杂点插画技巧在设计中的应用

今天分享的文章来自于UI中国会员-RDD-Tenney的插画技巧分享。

前言：

Tenney是RDD设计团队的成员之一。最近几个月以来利用业余时间学习画了一系列以动物为主题的杂点风格的插画。人送绰号“动物园园长”

最近一年来，我们在各个设计平台上也经常看到一些杂点风格的插画作品，也在越来越多的app和网页的插图中，看到一些杂点风格插画的运用。或许有一天杂点表现的插图风格会被其他表现形式的风格替代，但是我们不得不承认这一年来杂点风格的插图是流行趋势之一，而且现在以及在以后的一段时间里，杂点风格的插图还将扮演着重要的角色。

在最近一段时间，经过和很多喜欢杂点风格插画的设计朋友的探讨交流，总结出来几个探讨最多的问题。

疑问：

01.这种杂点是怎么画出来的？

02.用的什么软件来画的，有没有用手绘板？

03.使用的是什么笔刷，能不能分享一下？

04.你用的颜色很鲜亮，是怎么调出来的？05.我也很想画这种插画，但是没有想法，不知道该画什么？06.你的插画是自己想的还是临摹的，我就想不出来，该怎么办？

…

在回答了当时的一些朋友询问的这些问题以后，很多朋友积极去尝试，马上就学会了。不过还有一些朋友，可能也对这类型的杂点风格插图比较感兴趣，但是又不知道如何上手的。那现在RDD团队就给大家发福利了。Tenney来给大家分享一下杂点插画绘制的过程和及步骤，以及每一个环节应该注意的问题。

步骤：

01.素材搜集：大多数人创作都需要素材灵感来源

02.草图绘制：可以快速把自己的灵感跟想法记录

03.软件造型：在草图的基础上用软件画出基本造型

04.确定基调：确定整个插画的基调，为下一步打下基础

05.杂点处理：利用杂点来表现出体积、光影、质感

06.色彩矫正：对最后的色调进行矫正

—— 01.素材搜集 ——

很多时候，我们在做设计的时候，在确定主题以后，第一步都是需要先参看一些参考素材来吸取灵感。我的参考素材一般来源于两个途径：

* 一种是平时每天逛设计网站时候，看到优秀的作品，我会收藏起来，我平时一般喜欢用eagle来分类整理我喜欢的作品。

* 另一个途径就是去各个设计网站输入跟自己要创作主题相关的关键词，然后就会找到很多优质的作品。

拿以下这个松鼠的插画举例，讲解Tenney是怎么搜集素材的。

／首先

确定要画一张以小松鼠为主体的插画。Tenney的习惯是要先去看很多小松鼠相关的图片素材，我们可以在很多图片素材网站上去输入关键词“松鼠”来看松鼠的千姿百态，大量的浏览以后，选择其中在造型跟构图上能打动你的几张保存下来，作为创作的造型参考依据。

／其次

去看看别人怎么来创作“松鼠”，那最常用的套路就是在dribbble、Behance等国外设计网站上输入松鼠的英文单词“squirrel”，或者在国内的设计网站比如UI中国上输入“松鼠”。搜索结果一般都会把其他设计师做的以“松鼠”为主题的作品按照受欢迎程度排列，在前的质量都不错，所以大家看的时候看搜索结果排前的作品就可以了。

—— 02.草图绘制 ——

当我们参看了很多素材图片以及别的设计师做的相关主题作品以后，就需要开始创作构思了。这时候，草图绘制是必不可少的一部分，草图的作用就是快速记录自己脑海中灵光一现的想法。有时候在接单的时候，先把草图给客户看看，客户觉得ok了再用软件来绘制，这样子可以避免不必要的返工。

草图刚刚开始可以很草，不过在整体构图跟造型确定了以后，草图越完整精确的话，对后期用软件绘制时候越有利。

—— 03.软件造型 ——

在这一步，就是开始用软件来制作了。不同的设计师使用的软件会不一样，这个看每个人的习惯。有的设计师习惯用PS，有的习惯用AI，也有的直接用 Sketch等相关软件，不过对于UI设计师来说，这三个软件是用得最多的了。就我而言，在画这种杂点插画的时候，Tenney习惯用PS来做，因为可以更好表现杂点的肌理。

几何形状绘图：Tenney在造型的时候，全部都是用圆形、矩形、三角形等规则的几何形状来绘制，任何一个不规则的形状，都可以用规则的几何形状来概括，这个有点类似于我们以前学素描时候的起形，都是用不同线条组成的几何形状来概括。所以，Tenney从来不用钢笔工具来绘制图形，最多是在进行几何布尔运算以后会来调整锚点。

几何图形绘图的优点：

01.高效：用几何图形切割出来的造型比用钢笔工具耗时更少

02.规范：用圆形切割弧线肯定比用钢笔工具画出来的更优美

03.简洁：几何图形具有概括性，可以把负责的形状简介化

…

—— 04.确定基调 ——

在造型确定了以后，接下来我们就要铺色调，具体使用什么样的色调，就完全取决于设计师本人想表达一个什么样的氛围了。

不同的设计师对于同样的造型肯定会配出不一样的配色方案，但是所需要遵循的配色法则都是一样的。

配色法则：

01.色调构成：80%主色调+20%辅助色调

02.色彩需要有冷暖对比

03.色彩需要有明度跟纯度对比

…

—— 05.杂点处理 ——

之前很多朋友问得最多的也就是杂点是怎么做的。在说杂点怎么做以前，我们先来分析一下杂点的作用，这样子我们可能就更好理解为什么这么做杂点了。

01.我们可以把杂点理解成我们画素描时候的笔触：

没有加杂点以前，更像是一个照片，我们加了杂点以后，就多了笔触，多了艺术感跟绘画感。

02.我们可以用杂点来处理插画的亮灰暗的素描关系：

在每一个形状上Tenney一般用的是3-4个颜色的杂点来过渡，就是用来塑造体积。

03.我们可以用杂点来处理插画的空间虚实关系：

最前面的或者在视觉中心的杂点层次比较丰富，杂点颜色对比也比较强烈，越往后杂点的这种层次根颜色对比慢慢变弱，使得画面有主次虚实。

04.我们可以用杂点来丰富插画的色彩：

使得画面层数更加丰富，如果一张插图，没有杂点以前有10个层次的颜色，按照我的做法，每个层次的颜色用3-4个颜色的杂点来过渡，那我们的插图就变成了30-40个层次的颜色，画面层次感是不加杂点前的3-4倍。

杂点处理方法一：刷笔刷以后溶解

笔刷的使用，Tenney一般选用PS画笔工具中自带的中密度硬笔刷，偶尔也会用到高密度或者低密度硬笔刷。很多人都找不到这个笔刷的位置。也不知道如何来设置参数，Tenney把笔刷路径以及可以设置的参数截图如下：

在PS左边的工具栏中找到“画笔工具”

在画笔工具对应的顶部状态栏点选“切换画笔面板”

在“画笔预设”里边可以调整画笔大小，Tenney一般直接调到最大值300，如果画小区域里边的笔刷的时候大小减半。画笔选择“中密度硬笔刷”，偶尔选用高密度或者低密度硬笔刷。

我们用一片简单的树叶来举例。和的任何复杂的形状的处理方式也是一样的。 

—— 06.颜色矫正 ——

很多朋友都会觉得Tenney的用色很鲜亮，其实这里涉及到颜色矫正。具体的做法是：当完成了之前所有的步骤以后，把插画导成图片，再放入PS里边整体的调整亮度对比度颜色模式等。

矫正颜色前

矫正颜色后

矫正颜色前后

大家可以看到，在矫正颜色前，整个画面的色彩其实是有点脏的对比也没有那么强烈，跳不出来。矫正颜色以后的效果就是把亮度提亮，对比度加强。

矫正颜色的方法就是在PS里边的【图像】-【调整】-【亮度／对比度】，根据具体情况来把亮度／对比度的色值稍微提高。也可以是复制一个图层，把图层的模式调整成叠加，调整叠加的不透明度也是可以达到加强对比的效果。当然大家也可以尝试矫正别的参数，Tenney个人主要是去调整亮度跟对比度来达到让画质更鲜亮的效果。

总结&

在以上的六个步骤里边，前四个基本都是通用的，大家在做设计的时候可能基本都会有这些步骤，后面的两个步骤是Tenney在绘制这种杂点插画的过程中个人习惯性的方法。当然同样是杂点风格的插画，也是有很多种样式的，这里的方法只是针对于Tenney平时画的这种杂点风格，其它的杂点风格的方法，是需要向大家学习的。

作者：RDD-Tenney

UI中国主页：http://i.ui.cn/ucenter/1166043.html

查看超多设计经验分享，戳“阅读原文” 嗷~~。

--关于我们---

UI中国 专业用户体验设计平台

主站：www.ui.cn

新浪微博：@UI中国

合作请加微信：18931333875