漂亮实力派!教你用Sketch绘制一枚精美的锤子论坛图标

2015/10/07 28805

sketch-smartisan-forum-icon-1

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

Sketch源文件免费下载:http://pan.baidu.com/s/1ntMnLxf

  1. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(一)》
  2. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(二)》
  3. 《SKETCH设计教室!带你了解超好用的SKETCH插件》
  4. 《想要一稿过不加班?SKETCH绝配神器MIRROR抢先体验》

工具:Sketch 3.3.2

首先,先画一个水箱

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

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

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

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

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

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

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

接下来是水箱凹面。

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

同样的,外阴影也两个。

红阴影

黑阴影

接着画水

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

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

接下来添加水面的波纹。

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

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

气泡

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

直接上图。

径向渐变填充

描边居中、线性渐变

外描边、纯色填充

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

水影

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

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

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

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

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

主体完成,来做背景

也是两层。

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

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

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

完。

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

1,迁移
《高效省时教程!PHOTOSHOP用户如何迁移到SKETCH?》

2,看新功能(安利必备)
《对比才有看头!SKETCH秒杀PS CC 2015新功能的7个地方》

3,好用的插件
《前端神器!为网页设计而生的15个优质SKETCH插件》

原文地址:zhihu
作者:@老罗弟弟_罗方可

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量102万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/sketch-smartisan-forum-icon

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里