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