最近翻看各大设计网站，发现在UI界面设计这一块兴起了比较火爆的插画设计风格——erics风格，欣赏了一下，感觉这种插画比较简单，没有太大的规范可言，设计全程就是夸张化，不用去考虑太多的肌肉和骨骼走向，这对没学过画画的小白来说简直就是量身订做的设计。废话不多说先来欣赏一波今天要讲解的插画内容：
这幅作品看起来感觉有点复杂，实际上我们只需要结合两款设计软件（PS和AI）以及掌握其设计构思，那么你以后制作这样的erics插画风格就都不在话下了，其实完成这副作品一共需要四个大的
utobao编注：更多AI教程学习进入优图宝AI实例教程栏目: http://www.utobao.com/news/61.html
步骤：
1.人物原型的设计（主要在AI里面制作）
2.场景设计（主要在AI里面制作）
3.后期的处理（主要在PS里面处理）
4.界面设计与插画的融合（主要在PS里面处理）
完成这四个步骤你就能做出高逼格的erics插画了。
1.人物原型的设计
1.1寻找真实照片制作原型
因为我个人比较喜欢Eason所以我今天拿他的照片进行插画的制作，先在网上搜索Eason的照片，然后把他保存下来。
1.2根据照片快速绘制线稿
这里介绍一种简单的方法（适合完全没学过画画的小白）：把找好的照片用PS打开，然后新建一个图层，填充白色（这里是为了不破坏背景图层为后面复制背景图层降低透明度作铺垫），再继续复制下背景图层，降低透明度为30%，最后点击画笔选择硬边圆画笔或干介质铅笔画笔（这个看个人喜好，你要选择其他画笔也是可以的，没有硬性要求，），画的时候要学会省略和夸张化，因为这个插画不属于写实插画，只要符合原本的身体结构就好了，画这个线条我使用手绘板画的，如果没有手绘板的同学可以用鼠标绘画；当然你要是有绘画的基础也可以用铅笔再草稿纸上绘画。
画好了之后就是导出线稿图片了，我们需要隐藏两个背景图层，
然后点击文件——导出——导出为
再点击——全部导出
_ueditor_page_break_tag_
1.3对线稿进行勾线（需要运用AI）
打开AI新建大小宽：800px、高：600px、颜色模式：RGB、分辨率：72PPI，点击——创建。
然后把在PS里面导出的线稿图拖进AI里面，调整好整体线稿的大小。
然后降低线稿的不透明度（这里是为了后面勾线做准备），锁定线稿，执行：选中线稿图层——对象——锁定——所选对象
锁定了图层之后开始使用钢笔工具开始勾线了，勾线需要注意所有的线都需要闭合（这是为了保证后面能够填充色块，没有闭合的线是不能够填充色块的），
画好了头部再画身体，从这里我们就可以看到我所有需要填充颜色的线条都是使用闭合的线，比如说——手腕、衣袖等可以看出来，
接着画腿部，现在我们还暂时不要考虑图层的顺序，所以不用管他，我们在勾线的时候不要100%去照着原图进行勾画，适当的取舍和夸张化；这样主题人物就画好了。
画好主题人物了，我们现在可以开始画陪衬物了。也就是沙发。
_ueditor_page_break_tag_
沙发画好了之后我们就需要整体去调整了，衣服不需要那么多褶皱，尽量用弧线来表现，在调整结构的时候也可以试着把阴影块面加上去。
1.4对线稿进行配色（需要运用AI）
首先把锁定的背景删掉，执行：对象——全部解锁——选中背景图层——Delete删除，
现在就开始上色了，如果你对上色没有什么概念，不知道上什么色好看，那么最好的办法就是多参考别人的颜色搭配，这里我在国外网站找了一张Norde大神的作品，拿来作为配色参考，大神的这个作品颜色运用了大量的渐变色，主色调是紫色，红色、黄色为辅色。
在来看下我们自己的原图片，衣服为橙色，裤子为蓝色，橙色与蓝色搭配属于互补色，橙色配色偏纯色，那么我们可以把裤子整体改为深蓝色，那么我们这里就可以确定我们的主色调为蓝色，辅助色为橙色。
定好了主色调颜色就开始上色了，先从主体物开始上色，上色需要考虑黑白灰的关系，黑代表暗面，灰代表颜色过度面，白代表亮光面
在这里我们可以看到脸的图层顺序盖住了头发，那么我们选中脸图层，执行：点击鼠标右键——排列——置于底层，这样就调整过来了，后面还会遇到很多这样图层顺序乱的问题，所以需要大家细心的思考哪一个图层在前面，哪一个图层在后面。还有需要定一个光源的点，本作品的光源定在了人物的左前方位置。
下面这个截图是我大部分的用色取值
_ueditor_page_break_tag_
2.场景的设计
现在来看下，我的整个画面感觉有点空，由于我画的是Eason，他是一位歌手，那么我想到了音乐符号、吉他、话筒来作为点缀。
但是这些东西加上去了之后仔细考虑下，物体放置得有点多，而且在用色上也不是很好，那么继续修改
最后只保留了这一把吉他，删掉了其他所有的元素，这样就使得左边沙发不至于那么单调了，并且我的主色调为蓝色，那么我把吉他的颜色也改为了蓝色调。
3.后期的处理（在PS里面处理）
3.1添加一些阴影丰富整个画面
打开PS新建文件 宽：800px、高：600px、分辨率72、颜色模式RGB
再切换到AI里面，用选中工具全选插画所有图层，再拖动到PS里面去，选择智能对象，那么图层就生成了智能对象图层。
为了不破坏原图，那么我们复制一个智能对象图层Ctrl+J,
再新建一个空白图层，作用是：用画笔在上面画阴影。画笔选择柔边圆，画笔大小看着自己的需求进行调节我这里是10px，调整前景色为暗的阴影色，这里色值为#d36940，
_ueditor_page_break_tag_
阴影画成这样并不好看，那么我们就需要用橡皮檫去进行修饰，线条修成两端尖中间粗，再把其他的阴影涂抹下。
3.2添加一些杂色点缀整个画面
隐藏背景图层，再盖印图层Ctrl+Alt+Shift+E，再隐藏盖印图层之外的所有图层。
选择盖印的图层，复制一个图层Ctrl+J，改名为杂点，
点击滤镜——杂色——添加杂色
杂色的数量建议控制再4%——6%范围左右，数值太大看不出来，数值太大比较模糊。
_ueditor_page_break_tag_
添加好杂点了，看整个画面的杂点比较多，所以我们需要擦出一些高光面的杂点，保留暗部的杂点，
选择柔边圆画笔，调整大小，画笔的不透明度改为50%，
多用画笔修整下，
最后的调试结果
这样后期处理部分就完成了。
4.界面设计与插画的融合（在PS里面处理）
界面的大小看自己的需求进行定义，本教程的大小为1290px*975px。
如果在设计中有什么问题可以扫一扫加入我们的QQ交流群，里面会有大神带你装X带你飞。
本期的教程就到这里结束了，希望大家能够多多进行练习，学以致用。
utobao编注：更多AI教程学习进入优图宝AI实例教程栏目: http://www.utobao.com/news/61.html