原图标是锤子科技的UI高手方迟设计的,效果惊艳。刚买Sketch的同学,内文附有新手系列教程,帮你从零开始掌握Sketch。不多说,先看今天教程。
![图片[1]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/c5cae49d74f3fd3c3d9c6c64cc549fbd_b.png)
工具:Sketch 3.3.2
首先,先画一个水箱
![图片[2]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/ecb3d0bbafd8ae2da63015ff48b97432_b.png)
新建圆角矩形、调透明度,然后调大小。
![图片[3]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/541902c320484d391771780294d6ffc7_b.png)
水箱的角,我是直接添加描点绘制的。
接下来就是添加水箱的边,和凹面绘制。先看一下所有样式。
![图片[4]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/15653745226b86e39d12e6595dffd63a_b.png)
因为这个水箱的边内外有两个切面,所以描边一共有三层。
第一层、第二层分别是线性渐变。
![图片[6]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/54399ab2a357d8e380ff06b4d69d9de4_b.png)
第一层比第二层短,这是因为第二层才是水箱边的内切面。
![图片[7]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/cbfa4a1cccc2c25066f21c161b0212e4_b.png)
这是第三层,这里我使用了环形渐变,因为水箱角的上部_外切面也是高光的。
接下来是水箱凹面。
![图片[9]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/d52bfe1ed6ddb0b132a94e8c4e2a9d67_b.png)
这里使用了两个样式,径向渐变+内阴影。
同样的,外阴影也两个。
![图片[10]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/b6db0db1f2e7e0e286add83ad1485eb3_b.png)
红阴影
![图片[11]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/3468631e7ddf2da982e8f1552eb44f3c_b.png)
黑阴影
接着画水
同样,先把水部分的轮廓勾出来,然后调整渐变色。
![图片[13]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/1c28d4441a9cb53495810fff35bb6c84_b.png)
水与水箱之间是有“缝隙”的,所以也是要有“边”。
接下来添加水面的波纹。
![图片[15]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/35ac9840336e05bb0eb79af1dd812ba1_b.png)
水波共两层( Path 21、Path 22 )。
绘制方式:Path 21 是纯色面+描边,Path 22 是线段,色彩自己看着调,这里不上图了。
气泡
![图片[17]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/85f096530983cd5bebdfcee90c7216c2_b.png)
感受一下矢量图和位图之间的差别。
直接上图。
![图片[18]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/b31aab4bb974581c9c824481bc11b1ea_b.png)
径向渐变填充
![图片[19]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/3f3a28aff36a0c2b7fb95be36751811c_b.png)
描边居中、线性渐变
![图片[20]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/496e667075fc8259788fd74864855532_b.png)
外描边、纯色填充
之后就是复制、粘贴、放大缩小、变形。
水影
水面上半部分的 LOGO 我就不说了,我直接说水影。
![图片[22]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/7510fe1188a84c7cf1a4bf6e6b31c92d_b.png)
水影我是直接绘制的,共两层(愚蠢的方式)。
![图片[24]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/262b82dfb05a9194c84ee8d6d7f726ff_b.png)
第一层我用的高斯模糊。注意!是 Path 1 ~ Path 10 。
![图片[25]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/dff45237b7d442b6f994862b857e65fd_b.png)
这是第一层 Path 24 的样式(变焦模糊)。
![图片[27]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/f396de384d137f0528b2a6e6e0b04c2a_b.png)
第二层全部是变焦模糊。注意!变焦模糊会严重变形曲线,所以一定要使用蒙版(蒙到“水”里)。
主体完成,来做背景
![图片[28]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/86d8ad34935a393f00e45161bc2b7c4c_b.png)
也是两层。
![图片[31]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/1ff526b78b43fc0b159fd070fc03072b_b.png)
这是“背景”层,径向渐变+杂色。
然后复制一层(中心背景),并添加圆形蒙版。
![图片[32]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/343a3a4bdbee23b44a9375c961f1878a_b.png)
最后,改一下“中心背景”层的杂色。
![图片[33]-PS教程:教你用SKETCH绘制一枚精美的锤子论坛图标-易看设计 - 专业设计师平台](http://image.uisdc.com/wp-content/uploads/2015/10/cf1ce81b05cf88cce1803970706d2649_b.png)
完。
第一次用Sketch好紧张,如何假装经常用?


















暂无评论内容