UI设计学习干货之用AI创作出中国风十二生肖组合

　　新年万事如意！在这个教程中，大家将会学习怎样用矢量绘图软件Adobe Illustrator CC 2014从基础开始绘制卡通动物，勾画轮廓，然后润色丰富ai路径描边。除此之外，大家还要准备将这些动物打印出来。所以我们要确保在每个图标设计中只有两个动物，这样才能用Grace Fussell把它们汇集在一起，做成十二生肖日历。

　　1.创建一个文件

　　第一步：打开Adobe Illustrator CC 2014，然后创建一个新文件ai路径描边。我设定的尺寸是宽800px*高600px，色彩模式设定为RGB。在使用矢量绘图软件进行创作时，你可以随时改变这两个设定。

　　第二步：从工具栏里选择矩形网格工具ai路径描边，鼠标左键单击画图板打开工具选项，键入以下属性：

　　宽：800px

　　高：600px

　　水平分隔栏：2

　　垂直分隔栏：3

　　设定完成，点击确定ai路径描边。将新做的网格对齐到画图板。现在，你有12个小格子，每一个格子用来绘制一个动物图案。把矩形网格锁定在图层。

　　2.勾画动物：老鼠、牛和老虎

　　第一步：让我们开始勾画出动物的轮廓！你可以在Adobe Illustrator、Adobe Photoshop以及其他的绘图软件画出来，或者画在纸上，然后导入软件ai路径描边。

　　如果你用矢量绘图软件来勾画，你会发现用融合笔工具（按Shift-B）最简单，让精度保持在圆刷状的滑动器中间位置ai路径描边。并且让尺寸和压力变化设定在6pt。

　　在每一个矩形网格里面各画一个图案，为了保持你的图层的条理性，在开始下一个步骤之前，用control-G将这些元素组合起来ai路径描边。

　　第二步：让我们从老鼠开始ai路径描边！

　　1. 老鼠的头是不规则的圆形或者苹果般的形状ai路径描边。试着把较低的两边看成老鼠胖胖的脸颊。

　　2. 我画了两个椭圆作为老鼠的耳朵，把最右边的耳朵画小一点，因为这是被头挡住一部分ai路径描边。

　　3. 身体也画成椭圆形ai路径描边。注意这些形状都不完美。当然如果需要的话，你可以使用形状工具或者样板。

　　4. 顺着身体的线条和轮廓画弧线，然后画一个结合点，注意画的时候顺着身体的幅度ai路径描边。这会帮助你绘制出老鼠的尾巴、腿以及躯干。

　　第三步：现在我们来画老鼠的腿、尾巴和剩下部分ai路径描边。

　　1.顺着刚才身体的外部轮廓画出尾巴ai路径描边。尾巴要画得细细的，最好像一条鞭子，而且要弯曲成字母C的形状。

　　2.把腿画成弯曲的三角形ai路径描边。靠外的腿看上去是个半圆。

　　3.两条前腿要弯曲成三角形，另一边隐掉ai路径描边。（见下图）

　　4.脸很简单：画两个U形代表眼睛，画一个X代表嘴巴，脸颊两边各画三根胡须ai路径描边。在描绘整套生肖组合时，我会保持一样的（或相似的）形状用作眼睛。

　　第四步：接下来画牛ai路径描边。

　　1.首先画一个三角形，最左角画成圆形ai路径描边。

　　2.从左边剪出一个小三角，这就成了牛嘴ai路径描边。如果在Adobe Illustrator 进行操作，可以利用橡皮擦工具（按Shift-E）或者就在那边画一个小三角。画身体时，先在右边，挨着脸的地方画一个圆圈。

　　3.在顶部用一条曲线连接这个圆和三角形，在身体底部，用一条大曲线连接ai路径描边。画两个细长的U代表牛的耳朵。

　　4.用简单的线条开始画腿：三条直线和一直曲线ai路径描边。

　　5.腿看起来有点像细长的字母Wai路径描边。在牛的身体右边画一条短短的线作为牛的尾巴。

　　6.最后，画两个角、一张脸，考虑把扇形图案灵活运用于最终的设计ai路径描边。

　　第五步：我们要画的下一个生肖图案是老虎ai路径描边。

　　1.把脑袋的底部画成一个宽宽的V形ai路径描边。

　　2.用一条曲线将脑袋顶部两端连接起来ai路径描边。

　　3.画身体时，先画两条前腿，即在脑袋的两边各画一条微微弯曲的线条ai路径描边。

　　4.脚的底部分别聚拢在两个点上，中间画一条曲线作为胸底部ai路径描边。

　　5.再画其他的身体部位，朝右边画一条延伸的曲线ai路径描边。

　　6.腿和脚的画法与之前我们画的老鼠相似ai路径描边。

　　第六步：让我们继续画老虎ai路径描边。

　　1.在头的两侧，各画一个圆圆的三角形作为耳朵ai路径描边。

　　2.画尾巴时，考虑画一个随意的S形图案，尾部又圆又粗，向下逐渐变细ai路径描边。

　　3.我沿着设计图案的边缘画上了分散的小三角形作为老虎的花纹，角尖指向中间ai路径描边。

　　4.最后，在脸上画上U形的眼睛和三角形代表鼻子和嘴巴ai路径描边。

　　3.勾画动物：兔子、龙和蛇

　　第一步：家兔或者野兔是我们生肖组合里的下一个生肖ai路径描边。

　　1.兔子的脸与老鼠相似：是平底的圆形（近似扁平）ai路径描边。

　　2.兔子的耳朵非常像一个Mai路径描边。注意它们的耳朵如何向右上方弯曲。

　　3.因为兔子总是坐着的，画身体时，在右边画一个反向的Cai路径描边。

　　4.在底部画一条向左弯的直线，并且画两条短短的曲线标记为（看得见的）前肢ai路径描边。

　　第二步：给兔子的脚添加直线和曲线，给兔子的尾巴加上一些扇形图案ai路径描边。兔子的脸和老鼠的脸类似，所以可按照之前的教程画出来。

　　第三步：让我们接下来画龙ai路径描边。

　　1.画头时，先画个三角形ai路径描边。

　　2.在三角形的右边加一个正方形ai路径描边。

　　3.从右边开始，画一条长长的、起伏的曲线，构成龙的身体ai路径描边。

　　4.在之前的曲线左边画一条更短的线，用来显示龙的身体粗细ai路径描边。

　　5.在龙的全身，画三角形给龙加上凸起的龙鳞ai路径描边。

　　6.在身体的右侧加一个蝙蝠一样的翅膀ai路径描边。

　　7.最后，画上其他一些细节，比如前肢、一只眼睛和鼻孔ai路径描边。

　　第四步：画蛇时就像画龙一样：从三角和弯曲的S形开始ai路径描边。

　　1.画一个底部是平边的三角形ai路径描边。

　　2.从最左边的角开始，画一个S形弯曲到右边，这样构成了蛇的身体ai路径描边。

　　3.在蛇的尾部加上一个颤动的响尾设计ai路径描边。

　　4.画一个分叉的舌头，让蛇更有灵性ai路径描边。在我最后的一张图片里，我决定把舌头放在左边，这样更容易看见。当然，你的设计完全由你自己做主。

　　5.最后，加粗蛇的身体，画一张小脸ai路径描边。记得当你完成每个设计时，要把每个图案的部件组合在一起。

　　4.勾画动物：马、羊和猴

　　第一步：马的设计和牛相似

　　1.先画一个三角形，它的最左边是平的ai路径描边。

　　2.继续画马的头，画两条成角的直线，自右开始弯曲向下去（注意不是要形成一个完美的直角）ai路径描边。

　　3.马的身体像一颗豆粒糖或者肾脏的形状ai路径描边。

　　4.就像牛一样，马的左前肢向内弯曲，并且是抬起来的ai路径描边。

　　5.其他的腿是长方形ai路径描边。

　　6.画两个三角形构成马的耳朵ai路径描边。

　　7.最后，加上一些细节，比如脸，鬃毛、尾巴和马鞍ai路径描边。

　　第二步：我们接着画羊，另一个类似马和牛的设计，不同的是我们已经熟悉它们的构造ai路径描边。

　　1.先画一个头，比小于符号“<”小一点ai路径描边。

　　2.在头部画两只三角形作为耳朵，并用一条直线连接起来ai路径描边。

　　3.眼睛画成V或U形ai路径描边。

　　4.画两个弯曲的、尖尖的形状构成羊角ai路径描边。

　　第三步：

　　1.羊的身体顶部是一个U形，尾巴像羽毛一样，画在右边ai路径描边。

　　2.从头的中间画一条长长的、弯曲的线条作为最左边的腿ai路径描边。用两条曲线表示羊的胸部和肚子。

　　3.像牛一样，羊有四个蹄子ai路径描边。

　　4.最后，沿着羊的身体加一些细节比如线状的羊毛或扇形的羊毛团ai路径描边。

　　第四步：让我们接着画十二生肖组合里的第九个设计图案：猴子

　　1.先画一个心形的脸（类似于一只金丝猴或者雪猴）ai路径描边。

　　2.画两个C形图案各代表一只耳朵，在心形脸的上方画一段弧线，代表头顶ai路径描边。

　　3.画身体时，从背部到尾巴ai路径描边。从脸的中间开始向下画一条弧线。你也要注意画腿也是先从弧线开始，类似于画老鼠和兔子的腿。

　　4.脚是楔形的，画手臂时，先画两条90度的线条ai路径描边。

　　5.继续画一些羽毛似的符号作为猴子的爪子和脚掌ai路径描边。

　　6.最后，加上一些细节比如心形的脸和S形的尾巴ai路径描边。

　　5. 勾画动物：公鸡、狗和猪

　　第一步：紧接着，我们开始画中国十二生肖的最后一组动物，从公鸡开始ai路径描边。

　　1.就像之前的许多设计一样，画公鸡时，先画一个三角形，代表鸡嘴ai路径描边。

　　2.身体的底部是是一个宽宽的U形，尾巴和山羊的尾巴相似ai路径描边。

　　3.围绕着刚才的设计顶部ai路径描边，画几个不一样的尖角，作为鸡冠

　　4.再画一个宽宽的U形，构成公鸡的翅膀ai路径描边。

　　5.一个小小的、弯弯的W形成公鸡的垂肉，再加上两条直线和两个V形，作为公鸡的两条小腿ai路径描边。

　　6.最后，加一个U形和一条直线，分别构成公鸡的眼睛和嘴ai路径描边。

　　第二步：接下来画狗ai路径描边。

　　1.先画一个U形作为耳朵ai路径描边。

　　2.画两条弧线，中间相交，构成头顶和脸ai路径描边。

　　3.狗的鼻子是一个翘起的V形ai路径描边。

　　4.它的身体和公鸡相似，由宽宽的U组成或者由靠近头部的弧线组成ai路径描边。要注意，与公鸡相比，狗的身体看起来要长一些。

　　5.在图案右边加一条小尾巴，近似于狗鼻子的形状ai路径描边。

　　6.我快速地画了一个小领子，这样整个设计看起来更像狗，而不是鸭子ai路径描边。

　　第三步：最后，增添细节，比如尖尖的小V作为腿，以及一张小脸，这样就完美地完成这个设计了ai路径描边。

　　第四步：我们最后的图案设计是猪ai路径描边。我画的猪更像一个可爱的小猪，这是为了和其他的设计风格保持一致。

　　1.猪的耳朵是叶子形状的或心形的ai路径描边。

　　2.从左至右，画一条微微弯曲的头顶线条ai路径描边。

　　3.再画一条小弧线，构成猪鼻的上面一部分ai路径描边。

　　4.从猪鼻的下面开始，向下画一条大大的弧线，这就画好了猪头ai路径描边。

　　第五步：

　　1.猪的身体是一个大大的卵形或者椭圆形，从头的末尾开始画一条弧线，弯曲至耳朵中间ai路径描边。

　　2.画一条喷泉一样的小尾巴ai路径描边。

　　3.它的四肢是细长的Wai路径描边。

　　4.最后，画脸ai路径描边。画法和之前所画图案的脸一样：画一个U形作为眼睛，一条弧线作为嘴巴。给猪身体加一些小小的扇形线条或者花朵，这样就完成了你的设计。

　　第六步：这是一张我的全套的生肖草图ai路径描边。我整理了一下它们，让这些草图看起来更加自然，并且把每个动物的设计元素整合在一起，这样在我的图层中就有12独立的组合。给每个图标单独做一个新图层，然后把相应的草图组合放进去。

　　6. 描出每个图案的轮廓

　　第一步：我要展示一下如何分解各个生肖的草图，来制作出一个简单的红色剪影ai路径描边。下面我用老虎图案做示范。

　　1.用钢笔工具（P），从头开始，描绘它的轮廓ai路径描边。这次我们要确保

　　2.每条边如设想中一样对称ai路径描边。我的下一步是把每只耳朵当作单独的形状来处理。我先描左耳，复制（Control-C）、粘贴（Control-V）然后在纵轴上对称投影出另一只耳朵。

　　3.继续描动物的其他每个部分ai路径描边。接下来是胸和腿。

　　4.然后，你要描身体和尾巴ai路径描边。

　　按照组成部分依次分解设计可以让你更好地控制这个剪影，尤其是如果你的草图和我一样松散ai路径描边。如果你的草图比较精细，或许你可以也许一下子就描好轮廓。在接下来的12个图案设计就重复这样的步骤。

　　第二步：使用其他工具会有利于完成一些动物设计ai路径描边。

　　1.当你画好了蛇头，从刷子板面选择画笔刷工具（B）和设定值是5pt的毛笔刷来描绘蛇的身体轮廓ai路径描边。

　　2.你也可以用钢笔工具来画蛇余下的身体，或者用笔刷迅速的画出身体的路径，然后把路径在末尾连接起来ai路径描边。

　　3.当你完成了身体的曲线，把你的画笔颜色设定为无效，并且对你接下来的设计进行颜色填充ai路径描边。

　　第三步：另一个快捷的技巧是复制和粘贴可见的下肢，然后沿着纵轴投影它们，就像之前我描述制作老虎耳朵的方式一样ai路径描边。这样做不仅能够加速你的完成时间，还能够让你在每个图案中延续相同的风格。

　　第四步：当你满意每个设计后，选择单个的红色的部分，然后在路径查找器点击结合，让它们融合成一个单个的复合形状ai路径描边。在12个设计中，重复这些步骤。

　　第五步：下面是我的十二生肖剪影ai路径描边。尽管一些细节变了，如蛇的舌头、狗的脖子和龙脚的形状，但注意这些剪影的轮廓边缘是多么地完整。

　　7.画出表面细节

　　第一步：开始时，将融合笔工具的精度设置为靠近光滑，而不是之前的设定值ai路径描边。将融合笔的尺寸和压力变化调整为4pt。如果你不用压敏写字板，这个步骤对你没多大用处，但如果你想用铅笔工具（N）或者钢笔工具（P），这很有所帮助。

　　第二步：在图层上从合成剪影图移动到草图组合，然后锁定他们ai路径描边。使用融合笔工具或者你所选择的绘图工具来描脸部细节，就像我们之前为每个图标设计做的那样。大家注意，这里我开始增加额外的细节，像老鼠头上的耳朵。

　　第三步：为了显示前肢和身体是分开的，放大（Z）图标，并且小心地用曲线画出银色区域来显示手臂与脚之间的空间和动物的身体ai路径描边。要确保每个白色的形状的尾端与红色剪影的边缘保持一致。你的草图会提示你哪些形状需要这样做。

　　第四步：作为一个统一设计风格的做法，我习惯在每只动物上画小圆点代表眉毛和睫毛，再画上一些花点缀ai路径描边。除此之外，许多动物的背上也会有扇形的设计。当然为了统一设计风格，在每只动物上加什么样的设计取决于你自己。花朵、三角或小衣服，无论你用什么，确保每个生肖符号以某种特征联系起来。

　　第五步：举个例子ai路径描边，看看下图的三个设计，简单地解释一下它们的明确的特点：

　　1.牛有一个尖尖的、扇形的颈背ai路径描边。这显示了它的头在哪里结束以及身体的从哪里开始。这个有点像衣领的作用。

　　2.龙有明显的鼻孔和一些鳞片ai路径描边。然后，身上也会画一些花朵。

　　3.猴子头上画了花环ai路径描边。它的脸是白的，但其他面部特征是红色的。为了从白色的脸上祛除这些特征，你可以结合这些红色的特征，点击路径查找器选择按前置对象剪裁。

　　8.准备打印你的设计

　　第一步：此刻，你可以将你的设计称作完整ai路径描边。注意每个设计都有相似的风格，你能够判断出它们是一个紧密相关的组合。不然，为了简化你的设计、路径和点的数量，你可以接下来的几个步骤，这样让它们成为一体。

　　第二步：你要在十二生肖设计中对每个动物重复以下四个步骤ai路径描边。

　　1.在路径查找器选择并结合白色细节ai路径描边。在做这个之前，确保这些描绘路径延伸到物体。

　　2.粘贴并且复制红色剪影，将颜色变为白色，并将它放在一边ai路径描边。为了从红色设计中减去白色部分，选择白色细节组和红色剪影。然后点击按照前置对象剪裁。

　　3.在图层中，把你之前放在一边的白色剪影放在红色镂空图案后面ai路径描边。

　　4.在对齐板面，把白色的剪影对齐到镂空图案的中心ai路径描边。

　　做得好ai路径描边，到此我们就完成了！

　　最后，为每个图案白的剪影加上白边，设定值为6pt（粗细由你定），使他们真正适合于任何你选择用作图标组合的背景颜色ai路径描边。既然你已经完成了你的中国十二生肖图案组合，继续在排版软件Adobe InDesign中用Grace Fussell来完成这个项目“设计一个恭贺新年的十二生肖日历”。在这些相关教程的评论区下和大家分享你的设计成果吧！

　　我们的创造力去了哪里ai路径描边，它什么时候才会回来？

　　对于UI设计初学者的我们来说，最重要的是要保证自身的创造力的同时不断地提升自身的设计水平ai路径描边。如今企业对其对外开放平台的界面设计质量要求越来越高，为保证自己可以有足够的设计水平，最好的方法还是接受专业的培训，如今国内众多的CG培训学校中，CGWANG的UI设计培训课程，拥有业内一流的专业老师，其教学质量与效果在业内都有着很高的好评度。