结合手绘和数码插画技巧

在一个高度依赖几何形状和合成纹理的媒介中，手绘插画是一种让网站感觉不那么人工、更具人性的绝佳方式。手绘作品中细微的缺陷体现了一种诚实、谦逊的魅力，而合适的插画可以为您的设计增添其他设计所缺乏的东西：一种真诚的感觉。将手绘插画融入网站的明显障碍是，并非所有设计师都知道如何创建和实现它。我在这里与您分享我的流程以及我在此过程中学到的有用的技巧。需要注意的是，这并不是一个教程或操作指南。这是一份我的个人流程指南，您可以将其用作您自己的技巧的参考。其目的不是再现一种效果，而是激发灵感。

您需要什么

• 钢笔（如果您急需，请选择极细笔尖的 Pilot 笔；如果您想要一些灵活性，请选择不同宽度的美工笔）
• 铅笔
• 普通打印纸
• 描图纸
• 打印机
• 扫描仪

可选

• 水彩纸（如果您选择通过水彩而不是数码方式为您的图画上色）
• 水彩颜料、画笔（用于上述内容）
  如果您无法使用颜料、彩色铅笔或马克笔，Bittbox 提供一套出色的高分辨率水彩 Photoshop 画笔。
• 灯箱或光板

在本文中，我们将参考我最近设计的一个名为 Bomb Guts 的网站。

此特定插画侧重于网站的背景。此外，它不是创建一张大型插画，而是由许多小型元素组成，这些元素是在 Photoshop 中绘制、着色、扫描和合成在一起的。在处理像这样复杂的插画时，我发现这种方法非常灵活且宽容，因为它允许您随意重新定位各个元素。

批发、零售、不售

首先，您需要一个想法！虽然这最终是特定于项目的，但我可以给您一些指导。这种类型的插画，尤其是我的风格，不太适合过于严肃的主题。最好的方法是将其保持在有趣、狂野、怪异和轻便的一面。

用铅笔在便宜的打印纸上开始勾勒您的想法。确定您希望图画出现的区域（尺寸和相对于页面其他部分的位置），然后开始勾勒出您的元素。即使只是基本的形状或您想要用户目光移动的方向，这都是一个开始！分层工作，逐步填充您想要的区域。

我以前的一位绘画老师在铅笔素描阶段讲的一课在这里非常有用。他经常强调在插画中使用三种不同层次的元素，并用一句老话来说明，“批发、零售、不售”。让我来分解一下。

• **批发**指的是您在整个插画中重复多次的元素，以创造视觉纹理和一致性感。通常是您作品中最简单的形式，细节最少。
• **零售**指的是在整个作品中重复多次的物体，以引导用户的目光在插画中移动。适合引入新的形状或颜色。
• **不售**物体只使用很少次数，通常只使用一次。

在铅笔素描时，提前计划并将您的元素分类到这三个稀有度组。这样，在添加新的元素层时，更容易做出决策。从 Jim Krause 的“设计基础索引”中可以看出，

“兴趣点周围的变化测量往往会提高作品的视觉趣味性和活力，并传递出创造力的感觉。”

简而言之，尽量确保您物体之间的间距不完全一致。这有助于暗示运动和变化。类似地，确保您的物体不会全部在同一条线上结束。这会让构图显得呆板、静止，坦率地说，有点无聊。当物体之间的负空间过于一致时，其趣味性就会大大降低。

至于您的“零售”和“不售”元素，最好尝试将它们与您的主题相关联。让它们变得特别！尝试引入新的颜色、形状和细节层次。利用这些元素来集中用户注意力并引导他们到页面上的重要区域。我倾向于将这些元素作为人物或吉祥物。它为网站的声音赋予了一张脸，并帮助用户与设计建立联系。

最简单的部分

我将与您一起制作每个部分的几件作品，以提供示例。让我们从“批发”和“零售”元素开始。

这很简单。您应该在选择的纸张上创建完全隔离的物体，而不是直接从您的图画中追踪。说到纸张，这取决于您想要如何给您的作品上色。彩色铅笔在打印纸上效果很好，如果您轻轻地着色，马克笔在布里斯托纸或描图纸上效果很好，水彩颜料在水彩纸上效果最佳。我一直很喜欢 Strathmore 的纸张，但 Canson 也是一个很棒的品牌。

显然，墨水比铅笔更不容易出错，因此请花时间并集中精力。观察您的笔尖以及您想要让它移动到的下一个位置。一点点不完美是件好事，但如果您的形状变得无法辨认，请随时在 Photoshop 或 Illustrator 中创建一个简单的形状集以进行追踪。这就是灯箱或描图纸派上用场的地方。

虽然您最终会在 Photoshop 中数字方式重复这些物体，但最好制作每个物体的多个物理副本。这样可以实现细微的差异，不同的线宽，并允许您尝试几种颜色，然后再调整 Photoshop 调整图层。

按照您的喜好为您的元素上色，用美工刀剪下它们，然后放在一边。

我更喜欢用手剪下我的元素，因为它会留下不规则的边缘。如果您不习惯或没有耐心使用刀片，可以保留您的图像而不进行物理剪裁，然后稍后完全在数字方式中提取它们。

接下来是最重要的“不售”元素。它们非常特别，因为它们将是用户目光停驻的地方。在像 Bomb Guts 这样的案例中，它们甚至可以用来吸引用户注意布局的重要部分，例如导航或浪漫的文字。尝试引入全新的形状和颜色，使这些元素脱颖而出。使用额外的细节和不同的线宽来创建深度也非常有用。对于这些元素，您试图在一个物体中捕捉网站的精神。我喜欢将这些元素制作成人物或吉祥物。它为网站的声音赋予了一张脸，并帮助用户与设计建立联系。

将您的突出元素制作成吉祥物会为您的网站增添很多个性。

就制作而言：与之前一样。素描、描线、上色、剪裁。只是要慢一点：这些应该是您最精美的元素。

扫描

尽可能多地将您的图像排列在扫描仪平台上，然后将它们扫描到 Photoshop 中。您的结果可能会很干净，使用像魔棒这样简单的工具就可以轻松提取，但有时这需要一些努力。以下是一些帮助提取和润饰单个元素的步骤。

复制您的背景层。我们将只在该副本上进行操作，并将原始层保持不变，以便您稍后可以参考它。

接下来，应用一个色阶调整图层以增加对比度。这非常依赖于特定的图像，但您需要消除大部分灰度色调，并将它们更接近黑色或白色，而不会吹出元素中的颜色。接下来，使用选框工具或套索工具将文档中的每个物体分离到它们自己的图层中。

在从背景中提取物体时，有很多工具可供选择。如果您在文档中色调之间有非常明显的差异，选择颜色或魔棒等工具可能会很有效，但它们也有破坏性，并且在选择什么以及不选择什么方面很含糊。我更喜欢使用图层蒙版。与擦除不同，它是无损的，并且您可以对要选择哪些像素以及不要选择哪些像素进行精确控制。您实际上是在绘制您想要在图层上显示的内容。

在图层蒙版内按下斜杠键，会显示一种特殊的视觉模式，用红色覆盖突出显示您已设置为不可见的区域。

元素边缘留一些或很多纸张都没问题。它突出了项目的制作工艺，并赋予其更“剪切”的感觉。提取后，可以随意提高饱和度以抵消扫描过程中发生的色彩褪色。最后，通过智能锐化滤镜锐化图层。使用 0.8 或 1.0 像素的低像素半径和 50% 到 70% 之间的数量。

稍加润色就能起到意想不到的效果。看起来不错，大块头！

对每个元素重复此过程，根据每个对象的需要调整饱和度和锐度等调整。

排版

对某些人来说，一种有帮助的策略是扫描他们的铅笔草图，并以 60% 的不透明度将其放置在设计图层上，以帮助他们更快地放置对象。

完成所有这些操作后，打开您的页面设计，复制您的元素，并像在铅笔草图中一样开始排版，同时牢记我们之前讨论的不均匀间距原则，并注意对象的结束位置。完成所有元素的排版后，应用任何必要的最终修饰层，尤其是饱和度。如果您发现任何区域感觉不够饱满，请打印出该区域的屏幕截图，并开始在其中草绘更多“批发”元素。

全部完成！希望这能激励您在自己的作品中加入更多手工元素。如果您有任何问题，请随时通过 [email protected] 联系我。