教你用UI手法绘插画 ~

作者： 小魔女007

地址： http://old.zcool.com.cn/work/ZMjIxNzM4MzY=.html

先看效果。。

那今天我就以这幅图为例，跟大家一起探讨下整个的创作过程， 也就是如何用UI设计的手法绘制插画。

---

写在前面：

在B的插画构思 ，我选择了Butcher(屠夫)。

无论是做什么设计，肯定不可能空穴来风，凭空想象，特别是对自己不太熟悉的东西。

所以我的第一步就是去花瓣，pintrest，或者dribbble上搜一下关键词，看看能找到到什么灵感。

能搜到的不多，质量好点的大概就这些。

我们来看看这些屠夫们有什么共同的构成点：彪悍的大叔+大刀+围裙。

接下来是不是脑子里就会有些画面感了？

对我而言，在我脑中出现的是一个穿着围裙正在卖力剁肉的屠夫大叔。

---

做了很多年的UI设计，规整的图形思维已经深入到了骨髓。

所以我在草图绘制的时候会用一些圆形，圆角矩形，方形等去构思主体框架。

鉴于是给自己看的草图，也没想到日后写教程会用到，所以画的比较潦草，请大家见谅，不要随意鄙视~

---

最重要的一步：轮廓勾

上一步有说过，这个系列的插画其实用的是UI绘制icon的手法和思维。

所以在轮廓勾勒的时候要注意:

一定定要用布尔运算！一定定要用布尔运算！一定定要用布尔运算！

也就是说，凡是涉及到曲线的部分，一定是用各种圆叠加切割的，而不是用钢笔工具勾勒的。

钢笔工具勾或许也可以，但这不是小魔女的插画风格~

个人比较喜欢的是规整的圆，整齐的方。

以稍微复杂一些的身体为例， 它其实是由很多的圆形，椭圆形叠加而成。

最后一行的不规则形状，其实是1/4圆。

初稿设计的时候填充的颜色都只是大致的颜色。

我个人是有一些固定的色卡（色卡在我的小密圈里提供下载哦）；

一般都是先用这些颜色 ，之后再根据整个画面重新去做调整。

---

因为是比较扁平的插画，所以阴影叠加起来也很方便。

在这套系列里，统一都是右边暗，左边明亮。

光阴的叠加分成面的叠加和线的叠加。

首先是面：

上完明暗后的效果如下图：也还是比较单调的。