教你用Sketch绘制一枚精美的锤子论坛图标(图文教程)

编者按:好久没出Sketch教程了,今天跟着@老罗弟弟_罗方可 来一发图标临摹,原图标是锤子科技的UI高手方迟设计的,效果惊艳。刚买Sketch的同学,内文附有新手系列教程,帮你从零开始掌握Sketch。不多说,先看今天教程。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第1张

工具:Sketch 3.3.2

首先,先画一个水箱

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第2张

新建圆角矩形、调透明度,然后调大小。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第3张

水箱的角,我是直接添加描点绘制的。

接下来就是添加水箱的边,和凹面绘制。先看一下所有样式。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第4张

因为这个水箱的边内外有两个切面,所以描边一共有三层。

第一层、第二层分别是线性渐变。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第5张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第6张

第一层比第二层短,这是因为第二层才是水箱边的内切面。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第7张

这是第三层,这里我使用了环形渐变,因为水箱角的上部_外切面也是高光的。

接下来是水箱凹面。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第8张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第9张

这里使用了两个样式,径向渐变+内阴影。

同样的,外阴影也两个。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第10张

红阴影

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第11张

黑阴影

接着画水

同样,先把水部分的轮廓勾出来,然后调整渐变色。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第12张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第13张

水与水箱之间是有“缝隙”的,所以也是要有“边”。

接下来添加水面的波纹。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第14张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第15张

水波共两层( Path 21、Path 22 )。

绘制方式:Path 21 是纯色面+描边,Path 22 是线段,色彩自己看着调,这里不上图了。

气泡

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第16张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第17张

感受一下矢量图和位图之间的差别。

直接上图。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第18张

径向渐变填充

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第19张

描边居中、线性渐变

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第20张

外描边、纯色填充

之后就是复制、粘贴、放大缩小、变形

水影

水面上半部分的 LOGO 我就不说了,我直接说水影。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第21张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第22张

水影我是直接绘制的,共两层(愚蠢的方式)。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第23张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第24张

第一层我用的高斯模糊。注意!是 Path 1 ~ Path 10 。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第25张

这是第一层 Path 24 的样式(变焦模糊)。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第26张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第27张

第二层全部是变焦模糊。注意!变焦模糊会严重变形曲线,所以一定要使用蒙版(蒙到“水”里)。

主体完成,来做背景

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第28张

也是两层。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第29张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第30张教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第31张

这是“背景”层,径向渐变+杂色。

然后复制一层(中心背景),并添加圆形蒙版。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第32张

最后,改一下“中心背景”层的杂色。

教你用Sketch绘制一枚精美的锤子论坛图标(图文教程),教你用Sketch绘制一枚精美的锤子论坛图标,设计,这个,变形,第33张

完。

第一次用Sketch好紧张,如何假装经常用?

免责声明:
1;所有标注为智造资料网zl.fbzzw.cn的内容均为本站所有,版权均属本站所有,若您需要引用、转载,必须注明来源及原文链接即可,如涉及大面积转载,请来信告知,获取《授权协议》。
2;本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除,相关侵权责任均由相应上传用户自行承担。
内容投诉
智造资料网打造智能制造3D图纸下载,在线视频,软件下载,在线问答综合平台 » 教你用Sketch绘制一枚精美的锤子论坛图标(图文教程)