編者按：好久沒出Sketch教程了，今天跟著@老羅弟弟_羅方可?來一發(fā)圖標臨摹，原圖標是錘子科技的UI高手方遲設計的，效果驚艷。剛買Sketch的同學，內(nèi)文附有新手系列教程，幫你從零開始掌握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

首先，先畫一個水箱

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

水箱的角，我是直接添加描點繪制的。

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

因為這個水箱的邊內(nèi)外有兩個切面，所以描邊一共有三層。

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

第一層比第二層短，這是因為第二層才是水箱邊的內(nèi)切面。

這是第三層，這里我使用了環(huán)形漸變，因為水箱角的上部_外切面也是高光的。

接下來是水箱凹面。

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

同樣的，外陰影也兩個。

紅陰影

黑陰影

接著畫水

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

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

接下來添加水面的波紋。

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

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

氣泡

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

直接上圖。

徑向漸變填充

描邊居中、線性漸變

外描邊、純色填充

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

水影

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

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

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

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

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

主體完成，來做背景

也是兩層。

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

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

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

完。

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

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

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

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

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

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

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