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


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

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


原图较长,截图了一部分



拆解


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


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




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




01 图形一


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

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



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




1.1第一部分


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

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


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





1.2第二部分


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



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






1.3第三部分


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



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






1.4组合


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





02 图形二


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




03 图形三


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





04 组合


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

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





05 效果


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








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

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

Powered by Froala Editor

声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)