漂亮實(shí)力派！教你用Sketch繪制一枚精美的錘子論壇圖標(biāo)

編者按：好久沒出Sketch教程了，今天跟著@老羅弟弟_羅方可?來一發(fā)圖標(biāo)臨摹，原圖標(biāo)是錘子科技的UI高手方遲設(shè)計(jì)的，效果驚艷。剛買Sketch的同學(xué)，內(nèi)文附有新手系列教程，幫你從零開始掌握Sketch。不多說，先看今天教程。

Sketch源文件免費(fèi)下載：http://pan.baidu.com/s/1ntMnLxf

1. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（一）》
2. 《SKETCH設(shè)計(jì)教室！從零開始學(xué)APP設(shè)計(jì)利器SKETCH（二）》
3. 《SKETCH設(shè)計(jì)教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗(yàn)》

工具：Sketch 3.3.2

首先，先畫一個(gè)水箱

新建圓角矩形、調(diào)透明度，然后調(diào)大小。

水箱的角，我是直接添加描點(diǎn)繪制的。

接下來就是添加水箱的邊，和凹面繪制。先看一下所有樣式。

因?yàn)檫@個(gè)水箱的邊內(nèi)外有兩個(gè)切面，所以描邊一共有三層。

第一層、第二層分別是線性漸變。

第一層比第二層短，這是因?yàn)榈诙硬攀撬溥叺膬?nèi)切面。

這是第三層，這里我使用了環(huán)形漸變，因?yàn)樗浣堑纳喜縚外切面也是高光的。

接下來是水箱凹面。

這里使用了兩個(gè)樣式，徑向漸變+內(nèi)陰影。

同樣的，外陰影也兩個(gè)。

紅陰影

黑陰影

接著畫水

同樣，先把水部分的輪廓勾出來，然后調(diào)整漸變色。

水與水箱之間是有“縫隙”的，所以也是要有“邊”。

接下來添加水面的波紋。

水波共兩層（ Path 21、Path 22 ）。

繪制方式：Path 21 是純色面+描邊，Path 22 是線段，色彩自己看著調(diào)，這里不上圖了。

氣泡

感受一下矢量圖和位圖之間的差別。

直接上圖。

徑向漸變填充

描邊居中、線性漸變

外描邊、純色填充

之后就是復(fù)制、粘貼、放大縮小、變形。

水影

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

水影我是直接繪制的，共兩層（愚蠢的方式）。

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

這是第一層 Path 24 的樣式（變焦模糊）。

第二層全部是變焦模糊。注意！變焦模糊會嚴(yán)重變形曲線，所以一定要使用蒙版（蒙到“水”里）。

主體完成，來做背景

也是兩層。

這是“背景”層，徑向漸變+雜色。

然后復(fù)制一層（中心背景），并添加圓形蒙版。

最后，改一下“中心背景”層的雜色。

完。

第一次用Sketch好緊張，如何假裝經(jīng)常用？

1，遷移
《高效省時(shí)教程！PHOTOSHOP用戶如何遷移到SKETCH？》

2，看新功能（安利必備）
《對比才有看頭！SKETCH秒殺PS CC 2015新功能的7個(gè)地方》

3，好用的插件
《前端神器！為網(wǎng)頁設(shè)計(jì)而生的15個(gè)優(yōu)質(zhì)SKETCH插件》

原文地址：zhihu
作者：@老羅弟弟_羅方可

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量102萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com