前段时间在网上看到一套比较漂亮的主题图标，很喜欢这种简洁(比较好临摹)的设计风格，心血来潮就临摹了一套，在做的过程中，有些图标还是比开始预想的要复杂一些，过程也产生了不少问题，为了让小伙伴们在练习的过程中避免遇到类似问题，所以我把个别图标的临摹思路分享出来，希望对小伙伴们在图标的创作或练习上有所帮助。

附上主题图标的链接地址：

https://www.zcool.com.cn/work/ZMjczNDAwOTI=.html

拆解

为什么要拆解图标，实际上复杂的图标都是由小的图形元素组成，只要一步步对结构进行解析，了解和学习具体的制作思路，就可以更好的掌握图标的设计技法。 

从下图所示的线框图中，可以分析出图标整体结构是由两种不同尺寸(尺寸可自定义)的圆组合，我们将这两种圆分别命名为“大圆”和“小圆”：

分析出结构后，我们再对图标进行拆解。根据上图所示的线框和纹路，可以把图标大致拆分成3个图形来完成，将这三个图形分别命名为：“图形一”“图形二”“图形三”：

01 图形一

“图形一”的步骤较多，是制作图标思路的关键，完成好“图形一”，其它两个也就很对简单些。

已知我们通过拆解得到了三个图形后，继而我们可以对拆解后的三个图形再进行拆分，直到我们通过简单的形状运算就能画出来为止。经过拆分后，我们就得到了下图的三个部分：

再将这三个部分分如下步骤去完成：

1.1第一部分

第一部分，画一个大圆200x200和一个小圆84x84(尺寸可自定义)，为了方便查看，我给图形做了颜色区分。

选中两个圆形进行居中对齐，执行“减去顶层”操作，再给图形添加一个从左至右的渐变，颜色为#FAEF5A-#FF7200：

再画一个“矩形”，将之前画好的“圆环”对半“减去顶层”，然后就得到了需要的第一个部分：

1.2第二部分

第二部分我们画两个小圆、一个大圆(画大圆的目的是为了方便理解小圆需要摆放的位置)，将“小圆1”与“大圆”居中对齐，“小圆2”顶部对齐“大圆”。再选中两个小圆，进行“减去顶层”，给图形添加一个从左至右的渐变，颜色为#FAEF5A-#FF7200：

再画一个“矩形”，将之前画好的图形对半“减去顶层”，然后就得到了“第二部分”：

1.3第三部分

第三部分画两个大圆、一个小圆(画小圆的目的是为了方便理解大圆需要摆放的位置)，将“小圆”与“大圆1”居中对齐，“大圆2”底部对齐“小圆”，再选中两个大圆，进行“减去顶层”，给图形添加一个从左至右的渐变，颜色为#FAEF5A-#FF7200：

再画一个“矩形”，将之前画好的图形对半“减去顶层”，然后就得到了“第三部分”：

1.4组合

得到了这三个部分后，将它们组合拼接，鼠标选中三个图形进行“联集”后，“图形一”就制作完成了：

02 图形二

“图形二”的步骤特别简单，相信小伙伴们已经看出来了，把“图形一”旋转“180度”后，“图形二”就制作完成了：

03 图形三

画两个大圆、一个小圆(画小圆的目的是为了方便理解大圆需要摆放的位置)，选中“小圆1”和“小圆2”，进行“交集”操作，再添加一个至上而下的渐变，颜色为#FF7200-#FAEF5A，“图形三”就制作完成了：

04 组合

接下来，我们将“图形一”“图形二”“图形三”进行组合拼接，就得到了图标的形状，但到这并没有结束，还需要添加效果来修饰图标。

(注：进行组合拼接的时候，尽量用键盘上下左右键去移动，鼠标手动拼接可能会造成形状与形状间存在缝隙)

0 5 效果

最后，我们给这个图形加上效果，选中上面的月环图形，添加一个颜色为#FFEA60，y坐标为-2的阴影(也有小伙伴会问为什么用阴影，阴影实现的效果并不好，怎奈lan～)，再画一个10x10尺寸的小圆，颜色填充为#F5EC61，将小圆放在合适的位置上(可参考图上位置摆放)，最终的图标就画好了！

以上就是这次的临摹图标的思路分享，第一次写教程，有不满意的地方就～～凑合看吧。

以后会不定期的分享一些图标小教程，感兴趣的小伙伴可以关注下，谢谢观看。

Powered by Froala Editor