UI设计｜如何制作平面界面动物图标

1. 如何创建一个优雅的暹罗猫

步骤1

从椭圆工具（L）制成的60×60像素大小的圆圈开始形成猫的脸。用沙质米色填充圆圈。

第2步

使用直接选择工具（A）选择两个定位点，然后向下拖动，更改脸部的形状。

第3步

现在让我们来形成猫的耳朵。采取多边形工具，并做出约17×15像素大小的三边形状。转到效果>扭曲>凸出并将垂直弯曲值设置 为40％。 

对象>展开形状的外观以应用效果。使用“ 直接选择工具”（A）选择上部定位点，并通过单击上部上下文面板中的“ 转换角落到平滑”按钮使角部平滑。缩短此锚点的锚点并将锚点向上拖动，使耳朵更加尖锐。

步骤4

复制的形状和粘贴它在正面（操作-C>控制-F） 。使副本变小，并用巧克力棕色填充。旋转耳，并将其放置在头部的左侧，发送 它到返回（控制-按住Shift [）， 所述头部形状的下方。使用反映工具（O）通过双击它的图标在工具面板翻转耳在垂直 轴，并创建一个副本，将其放置在头部的另一侧。

第5步

让我们把头顶部分弄平。选择头部形状，使用橡皮擦工具（Shift-E）并通过按住Alt键在头部划一个窄条。现在我们把这个形状分成两部分。选择不需要的部分并删除它。

第6步

用多边形工具制作一个粉红色的小三角形鼻子。选择鼻子并拉动Live Corners的圆圈指示器以使形状变圆。如果此功能在您的Adobe Illustrator版本中不可用，请使用效果>风格化>圆角 完全相同。

第七步

再做一个椭圆并将其放置在脸部，使其接触鼻子的下部。将鼻子作为关键对象，将椭圆与鼻子对齐。为此，请选择两种形状，然后按住Alt键并单击鼻子。您将在鼻子周围看到一个粗大的中风，指示关键对象。前往“ 对齐”面板，然后单击“ 水平对齐中心”。

然后采取锚点工具（Shift-C）并将底部锚点的锚手柄向下移动到大约45度。使用指南将手柄移动到相等距离（您可以通过从标尺（Control-R）中将指南线拖到您的画板上来添加指南线。

用与我们在耳朵上相同的棕色填充脸部“面具”，用吸管工具（I）挑选颜色。在面罩下面加一个较小的浅棕色椭圆，描绘下颌。

第8步

现在，让我们添加眼睛！制作一个椭圆，从上面的控制面板中的Convert菜单中选择其正确的锚点并将其转换为一个尖角。用明亮的蓝色填充椭圆，然后为虹膜添加另一个椭圆。 

在这里，我们需要删除重叠在眼睛边缘的那块虹膜。选择两个椭圆，然后使用形状生成器工具（Shift-M）通过按住Alt键并单击不需要的部分来擦除虹膜的上半部分。 

旋转眼睛，使用反射工具（O）创建镜像副本。

第9步

为我们的猫的眉毛做两个浅棕色的椭圆，并在眼睛中添加两个微小的白色圆圈作为亮点。

创建一个浅粉红色的椭圆，将其放在鼻子的上部，使用形状生成器工具（Shift-M）按住Alt键删除不需要的部分，从而使鼻子更加细致。

第10步

让我们创造一个时髦的平面阴影，覆盖猫头的一半。组（Control-G）一起猫的所有部分，复制组和粘贴 它在正面（操作-C>控制-F）。 保持选择了复印，团结其部件在  探路者面板，将它们合并成一个单一的形状。将轮廓的混合模式切换为正片，使其变为半透明。 

最后，选择轮廓，使用橡皮擦工具（Shift-E），按住 Alt键，将鼠标拖动到猫头的左半部分，用白色矩形选择覆盖它。释放鼠标按钮以删除覆盖的部分。

在这里，我们拥有它！我们的平猫已经准备好了。我们来看下一个元素。

2.如何绘制一只快乐的小狗

步骤1

如前所述，我们开始形成一个60×60像素圈的肖像。将侧向锚定点向下移动一点，使形状隆起，并用橡皮擦工具（Shift-E）擦除其顶部。 

使用直接选择工具（A）选择左侧定位点，然后按Enter 打开“ 移动选项”窗口。将“ 水平位置”值设置为-5 px，将“  垂直”值设置为0 px ，然后单击“ 确定”，从而将锚点向左移动5个像素。

对正确的锚点执行相同操作，将水平移动值设置为 5 px，并将其向右移动5 px。

第2步

选择两侧锚点并将其转换为尖角。使用定位点工具（Shift-C）调整定位手柄的位置，然后向上移动，使脸部线条变得平滑。

第3步

让我们使用多边形工具从40 x 35像素的三角形形成耳朵。取曲率工具（Control-`），使三角形的边更圆和凸出。如果您使用的Adobe Illustrator的早期版本（不包含此工具），请随意使用效果>扭曲>突出，如以前一样。

选择上方的锚点，使其更平滑，并将其拖动到左侧，使形状偏斜。转到对象>路径>偏移路径，并将偏移值设置为-3像素，形成耳朵的内部部分。用浅灰色填充。

步骤4

旋转耳朵并将其放在头部的左侧。使用反射工具（O）在对面创建镜像副本。

第5步

从压扁的椭圆形成一个深灰色的鼻子，将其下方的锚点向下拖动一下。在鼻子下方做两个重叠的浅灰色椭圆，将它们分组并与脸部水平对齐，使用脸形作为关键对象。

第6步

现在让我们制作一个有趣的舌头！使用矩形工具（M）创建一个浅粉色的矩形，并将其置于浅灰色椭圆下。选择两个较低的锚点并将“实时角”标记拉至最大值，使形状的底部变圆。采取行分段工具（\）并绘制垂直的冲程，同时按住Shift键。您可以在“ 描边”面板中使线条的顶端变圆。

第七步

让我们移到眼睛。做一个深蓝色的椭圆，并用另一个椭圆或任何颜色覆盖其下部。选择两种形状，并使用形状生成器工具（Shift-M）删除下方的椭圆和覆盖的眼睛底部。这样，我们正在做一个俏皮的样子。给眼睛添加一个较深的虹膜和一个微小的白色高光。

旋转眼睛，创建第二个，将其放在脸的另一边。

第8步

创建两个均匀的浅灰色圆圈，覆盖眼睛。然后添加两个大圈，重叠并覆盖脸部的下半部分，如下面的截图所示。选择较低的圆圈并使用形状构建工具（Shift-M）删除脸部以外的部分。 

选择所有四个新的作品，并将其统一在探路者中，制作一张脸“面具”。您可以使用直接选择工具（A）单击其边缘并删除它，以删除掩码中间的间隙。

第9步

制作两个带圆角的小长方形眉毛，让狗看起来和蔼可亲，最后在右半边创造一个微妙的阴影。

3.如何制作花式浣熊

步骤1

我们开始从60 x 60 px柔和的蓝色圆圈中塑造脸部。压扁一点，使形状更宽。将两边的锚点向下拖动几个像素，然后将它们转换为上部工具栏中Convert菜单中的尖角。

复制我们猫的耳朵，根据浣熊头部的颜色重新着色，并将它们放在头部的两侧。

第2步

用一个18×10像素的深灰色椭圆形画出一个鼻子，将其顶部的锚点向上拖动一下。用深灰色的笔触 颜色创建另一个椭圆，在“ 颜色”面板中将“ 填充颜色” 设置为“ 无 ” 。拿剪刀工具（C），然后单击左侧和右侧的锚点，水平地将形状分成两半。删除下半部分，使我们的浣熊微笑。

第3步

复制脸部形状，使复制更小，填充白色，并将其放置在鼻子区域之下。添加两个带白色高光的黑色小眼睛，将它们分组并在“ 对齐”面板中水平对齐脸部，使脸部成为“ 关键对象”。

再次复制面部形状，使复制稍微小一点，填充深蓝色，并将其放置在脸部的底部，形成一个面具。

步骤4

我们把面膜分成两半，在眼睛周围形成两个独立的斑点。采取矩形工具（M），并绘制一个垂直条纹横跨中间的脸。选择蒙版和条纹，并使用探路者的分割功能 来切片所有的形状。删除不需要的部分，如果有的话。将您创建的一半放在眼睛下方，并使角稍微圆滑。

最后，在脸部的右侧添加一个扁平的阴影。现在我们可以继续前进！

篇幅有限本文讲解到这里详情内容请戳原文，关注第一时间更新学习哦！不要忘记在下面给我评论哦！玩得开心