AI+PS教程!鹦鹉噪点插画(非手绘)

时间:2017-09-21
类别:PS教程
水平:普通
观众:3.9w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

img

作者:Anano Miminoshvili

教程作者:软件基础营20期-B08-三排左数第七个

这次的插画的效果非常像手绘风格,但实际上仍然是通过我们熟悉的 AI 和 PS 制作完成的。当我们把插画的主体与背景分开制作,你会发现绘制的过程非常有趣,并没有想象中的复杂。那么用到哪些工具?有哪些细节需要注意?请看接下来的教程。

如果你对AI&PS不太熟悉请戳:

知识树系列!最容易理解的AI零基础入门教程合集

知识树系列!最容易听懂的PS零基础入门教程合集


步骤一:

打开ai,新建文档(Ctrl+N),宽度:800 px、高度:600 px、分辨率:72 px。
鹦鹉部分从头开始勾勒,首先是鸟喙。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤二:

可以先填充一个背景色,能更清晰得看出绘制的图形。下图使用的背景色是#69ad00。
然后继续使用钢笔工具勾勒出鹦鹉的脸、脖子部分。使用圆形工具做出鹦鹉的眼睛和鼻孔,再使用直接选择工具调整鼻孔形状中的描点。颜色如图。将脸部、眼睛、鼻孔编组。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤三:

使用钢笔工具绘制出鹦鹉脸上的花纹,描边宽度:4px,描边颜色:#2f0001。注意描边的两端选择方头。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤四:

使用橡皮擦工具分割开部分条纹,使得条纹更生动。相比直接全部使用钢笔工具勾勒,使用橡皮擦工具可以使分割处两边花纹的截面更加自然。
双击橡皮擦工具打开橡皮擦设置,调整橡皮擦大小。然后分割花纹形状。最后复制脸部形状,对花纹效果做剪切蒙版。效果如下图。

AI+PS教程!鹦鹉噪点插画(非手绘)

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤五:

完成鹦鹉头部之后,接着绘制鹦鹉的身体部分。身体部分为头顶及背部、肚子上部分、肚子下部分及左脚、右脚、翅膀上部分、翅膀中部分、翅膀下部分。这样分开,有助于后面在ps中为鹦鹉添加纹理。
其中,翅膀部分和肚子上部分可以通过钢笔工具来直接勾勒,也可以通过布尔运算。比如翅膀上部分,先使用矩形工具制作一个矩形,然后使用直接选择工具调整矩形的圆角,再拉动描点使矩形的一头呈现翅膀尖的形状,接着使用选择工具旋转形状至合适角度,复制粘贴并排列,可以根据需求对新的形状进行调整,然后使用钢笔工具绘制翅膀的根部,最后合并。翅膀中部分、翅膀下部分可以使用相同的形状来组合合并。
各部分使用颜色如下图。

AI+PS教程!鹦鹉噪点插画(非手绘) AI+PS教程!鹦鹉噪点插画(非手绘)

步骤六:

接下来要绘制鹦鹉爪下的树枝部分。
首先先用钢笔工具绘制树枝的形状,注意树枝形状不必等宽,而是可以有一定变化。树枝颜色:#4e424f。
然后用钢笔工具秀智树枝上的条纹,和鹦鹉脸上的花纹一样,使用描边宽度来体现这个花纹,而不是用形状。描边宽度为4px。上面两条条纹颜色为#ffdf85,模式采用叠加,透明度为60%。下面两条条纹颜色为#402b3e,透明度为80%。

AI+PS教程!鹦鹉噪点插画(非手绘)

使用橡皮擦工具,大小可以在4px到9px中调整,制造出不一样到条纹断点。将所有条纹编组,然后复制树枝图层,对编组做剪切蒙版。最后将树枝和条纹编组。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤七:

完成树杈及树杈上两片叶子的制作。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤八:

使用钢笔工具绘制两只爪子以及尾巴。尾巴绘制完复制作为尾巴的深色部分,调整到合适地方再加上剪切蒙版,最后编组。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤八:

现在我们完成了鹦鹉部分和树枝部分的全部形状,可以检查一下各部分,并对整体的大小和位置进行调整。整体效果如下。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤九:

然后绘制鹦鹉身后的灌木丛部分。这里先将背景色变为#ff8478,一方面是为了更清晰地看出各形状,另一方面这也是最后方天空的颜色。

AI+PS教程!鹦鹉噪点插画(非手绘)

在左下的灌木丛中加上两朵花。使用星型工具再拉圆角的方法绘制花朵。花朵颜色:#ff520b,花蕊颜色:#fb9308。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十:

然后绘制最后面的远景部分。先隐藏之前制作的形状,使用钢笔工具勾勒出山的形状。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十一:

使用矩形工具造出楼房。布局和颜色不必和教程中一致, 只需达到错落有致、配色合适即可。接着在楼房上加上窗户和一点绿化。然后完成右半部分的楼房。最后将所有楼房编组。

AI+PS教程!鹦鹉噪点插画(非手绘)

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十二:

使用钢笔工具勾勒出一个类似横置葫芦的形状。
然后调整各部分的位置和大小,使画面有个和谐的状态。
调整完毕以后可以导出一张图片,作为将各形状复制进PS后摆放位置的依据。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十三:

接下来将使用PS来对图片添加纹理。
首先将各形状复制进PS,粘贴为“智能对象”,复制时注意,复制“遮罩”形状时,先将其的填充填为白色,描边为无。一些形状可以编组之后再复制进PS(前几步有提及),比如楼房部分,因为这些部分不需要添加纹理或者可以一起添加纹理。
粘贴完之后调整各形状的位置,可以根据之前导出的图片来确定,同时还要整理各图层的前后位置及分组。
图中的两列图层表可以作为参考,先左后右。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十四:

添加纹理的主要方法是画笔+溶解模式,另外再加上蒙版的辅助,以达到独特的纹理效果。
从头部开始添加纹理。选择画笔工具,默认柔和笔刷,画笔大小为50px,画笔模式为溶解模式,颜色为#ffffff。新建图层,放置在“脸上的花纹”图层上,并创建剪贴蒙版。然后选中这个蒙版,使用画笔在上面绘制纹理,绘制完毕之后将图层的透明度调为50%。同样,在“鸟喙上制作相同纹理。
如果绘制时感觉纹理太密集,就增加画笔的大小,同理纹理太散时,就缩小画笔。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十五:

接着完成翅膀部分的纹理。
翅膀部分的纹理有两个要点:斑点状纹理、羽毛梗状纹理。
首先制作翅膀上的阴影和高光,注意要使用两层剪贴蒙版,不要放在一起,这样如果效果不好还可以再调整。“翅膀1”上的阴影,先用同样方法绘制出,再用钢笔工具把多余部分扣掉,扣掉的办法也分两种,直接delete删除,或是使用图层蒙版。而“翅膀2”和“翅膀3”上的底色已经是最深的颜色,所以制作的是高光层和中间色层。

AI+PS教程!鹦鹉噪点插画(非手绘)

然后制作羽毛梗状纹理,首先使用圆角矩形工具,绘制一个长条,宽4px,长50px,圆角2px,然后使其倾斜一定角度,最后羽化0.8px。命名为“羽毛梗”
在“翅膀1”图层上面新建图层,并创建剪贴蒙板。按住ctrl并点击“羽毛梗”图层,使用油漆桶工具上色,最后将图层的图层模式改为溶解模式。

AI+PS教程!鹦鹉噪点插画(非手绘)

而在“翅膀2”和“翅膀3”的羽毛梗状纹理的制作上,可以使用图层蒙版的方式来实现。同样为“翅膀2”或“翅膀3”的“中间色层”添加图层蒙版,然后按住ctrl并点击“羽毛梗”图层,使用油漆桶工具上黑色,最后将图层的图层模式改为溶解模式。但是要注意的是,如果图层蒙版所作用的图层已经使用了其他的图层模式,比如叠加模式,那么这种添加纹理的方法是不好用的,因为两者只能使用同一种模式。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十六:

然后是翅膀上的斑点状纹理。先用圆形工具绘制出一个适当大小的圆,然后新建图层,然后按住ctrl并点击更绘制的形状图层,然后建立图层蒙版。使用画笔工具,模式为溶解模式,在图层上(不是蒙版上)添加纹理。完成一个以后,复制出其它几个。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十七:

接下来完成鹦鹉的足部和身体其余部分的纹理,方法和之前一致。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十七:

接下来完成树枝部分的纹理。
同样在“树枝”图层上新建图层,并创建剪贴蒙版,用钢笔工具绘制出鹦鹉爪子在树枝上的投影,颜色为#000000,并用新建图层蒙版,使用画笔+溶解模式点缀在投影边缘,使投影更合理。
然后给树枝上高光和阴影。高光颜色#ff8c66,图层透明度90%,图层模式为柔光;阴影颜色#402b3e,图层透明度40%。树枝上的纹理相较于鹦鹉身体上的纹理来说,疏密变化的范围大但是变化的速度小,为了做出这种质感,在原先画笔+溶解模式过程之后,要再添加图层蒙版丰富这种层次,在选中蒙版之后,也使用画笔+溶解模式,注意要调低画笔透明度,一般在10%-50%之间,然后在点击在高光/阴影的边缘处。
“树杈”和两片树叶的纹理制作也是同样结合前几步的方法来完成。叶脉的画法和羽毛梗的方法类似。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤十九:

接下来是灌木丛部分的纹理制作。方法和之前相同,尤其是图层蒙版+画笔+溶解模式的使用,在灌木丛上会使用多次。
灌木丛中需要注意的是在“橘叶”图层和“黄叶”图层的纹理添加时,有一层比较不起眼的“阴影浅”,虽然这层在视觉上和底色十分相近,但是添加之后能使效果更丰富。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤二十:

按住ctrl并点击那个横葫芦形状图层,在选中“远景”组,添加图层蒙版,隐藏形状图层。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤二十一:

为灌木丛添加投影,颜色黑色,图层透明度60%,叠加模式。

AI+PS教程!鹦鹉噪点插画(非手绘)

为天空添加余晖,为山体添加高光和山头的青色。

AI+PS教程!鹦鹉噪点插画(非手绘)

AI+PS教程!鹦鹉噪点插画(非手绘)

为山体添加三层阴影。

AI+PS教程!鹦鹉噪点插画(非手绘)

步骤二十二:

最后再总体看看,调整调整。

AI+PS教程!鹦鹉噪点插画(非手绘)

结语

本期教程到这里就结束了,希望大家在练习过程中多思考、理解作者的思路和操作方法,活学活用。

做完作业的同学,欢迎到优设专属超级话题打卡交作业→#优设每日作业#

30 收藏 33

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 14

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片