UI实战案例：绘制功能图标（二）

昨天我们学会了

绘制“审核”与“邮箱”图标，

今天我们继续来学习！

制作“首页”图标

同样将“审核”图标复制一份，然后删除内部图形，然后使用【多边形工具】在画布中单击鼠标左键，在弹出的【创建多边形】对话框中设置【边数】为3，接着单击【确定】按钮，如图所示。

创建的三角形如图所示。

按【Ctrl+T】组合键进入自由变换状态，先将三角形逆时针旋转90°，然后对其进行缩放，将其调整成如图所示的效果。注意，三角形的3个角要紧挨着灰色背景边缘。另外，在Photoshop CC 2017中缩放形状是不会改变描边宽度的，这是Photoshop的一个很大改进。

变换三角形

将圆角矩形复制一个，然后在【属性】面板中将大小修改为10像素×22像素，同时将圆角大小修改为5像素。

复制并修改圆角矩形

下面开始删减路径，三角形和两个圆角矩形都要进行删减。由于删减方法都相同，这里直接给出删减过程图供大家参考，删减三角形的过程如图所示。

删减大的圆角矩形的过程。

删减小的圆角矩形的过程。

将内部的路径的描边宽度设置为1像素，然后将所有路径的端点都修改为【圆形】，主页图标完成效果。

制作“夜间模式”图标

将圆形规范背景复制一份，然后选择椭圆图形，接着选择【椭圆工具】，在选项栏中将路径运算模式设置为【合并形状】，这样可以在一个图层中进行绘制，最后按住【Shift】键在椭圆的右上方绘制一个大小合适的圆形。

选择模式

绘制圆形

将路径运算模式修改为【减去顶层形状】，这样就得到了月亮的形状，如图所示。

选择模式

月亮形状

在路径运算模式下拉列表中选择【合并形状组件】选项，将两个形状合并为一个形状，这样就得到了月亮的最终形状，如图所示。

合并组件

月亮最终形状

使用【多边形工具】在画布中单击鼠标左键，在弹出的【创建多边形】对话框中设置【边数】为4，并勾选【星形】和【平滑缩进】选项，同时设置【缩进边依据】为75%，接着单击【确定】按钮，创建的星形效果如图所示。

设置多边形选项

星形效果

为了让视觉效果更舒服，可以选择所有的形状，将路径描边的【对齐】设置为【居中】模式，同时将【角点】设置为【圆形】，效果如图所示。

设置描边选项

描边效果

使用【 钢笔工具】在月亮上绘制两个线条形状作为星星的光线，如图所示。注意，在选择钢笔的绘制模式时要选择【形状】模式。

绘制光线

使用【添加锚点工具】和【直接选择工具】删除多余的路径，完成后的效果如图所示。

删除多余路径

为了保持统一性，同样将内部图形的路径描边宽度都设置为1像素，夜间模式图标最终效果如图所示。

夜间模式图标最终效果

现在来看看制作完成的4个图标，如图所示。从图中可以发现，通过本例的绘制方法可以很好地保证图标的统一性，大家以后直接采用这种方法绘制图标。

图标整体效果

另外，其他图标的绘制方法就不再进行介绍了，基本都大同小异，最终完成后的效果如图所示。

最终效果

好啦！今天我们就分享到这里！

你学会了吗？

---

本篇文章来源于微信公众号:                         MICU设计