@呼嘯而過Charles?：話接上文，創建完基本形狀之后，現在是精雕細琢的時間了，究竟怎樣利用Sketch描摹出有質感的漂亮圖標呢，不嘮嗑，接著看吧。

上半部分戳這里：《設計師新寵！教你利用SKETCH創建彩色開關（上）》

06.創建斜面效果

現在我們來處理“Color base” 群組。

首先，周圍創建“環”。

在Base中央用橢圓工具（點擊“O”）創建128 * 128的圓。不要忘記使用排列工具。按住“Alt” 鍵顯示智能引導線，使每個元素都對齊。完成后如圖27。

再次運用橢圓工具，創建一個小一點的圓。將之前的圓與之居中對齊。不要忘記按住“shift” 來畫116 * 116的圓。（如圖28）

確保最近添加的圖層在最上面，選擇兩個圖層，之后工具欄點擊“substract”（差集－譯者注）如圖29。完成后如圖30。

你會注意到現在Oval 3變成“shape group”。若你打開它，你可以修改形狀。重命名為“Surrounding”。

在它的上面創建線性漸變圖層。確保漸變從左向有一些透視漸變。

設置頂部顏色為#F698FF 、底部顏色為#FFF3FF。完成后如圖31。

現在創建附件的漸變圖層來模擬反射。當你在漸變中激活描邊時，你會看到光標有“+”。點擊添加新顏色。在1/3 處添加新顏色（近旋鈕輪廓）設定顏色為#BDB6FF。（如圖32）

下一步是關于斜面。我們需要這圖標上創建一點“隆起”。創建后會突出中心部分的元素并創建3D效果。這sketch中沒有類似Photoshop中的斜面和浮雕工具。我們可以使用簡單的漸變來創建同樣的效果。

在“Super colorful base”圖層下面畫一個新的144 * 144圓(點擊“O”鍵) 并居中對齊。去掉邊框，添加一個垂直的漸變，頂部顏色設置為#ffffff ，底部顏色設置為#DF80FF （如圖33）。

下一步是通過創建模糊效果來制造恰當的平滑過度效果。注意右側邊欄的“Gaussian Blur” （高斯模糊－譯者注）。點擊復選框，設置參數為3px（如圖34）。最后設置該圖層的透明度為44%（如圖35）。

07.添加深度

現在為圖標的斜面添加一些深度。對彩色圓重復該深度。選擇“Super colorful base” 圖層，在“Inner Shadows”（內陰影－譯者注）行點擊“+”添加首個內陰影。

保持顏色為#000000 ，但設置透明度為64%。設置X和Y坐標值為0、blur（模糊－譯者注）值為10。保持spread （范圍－譯者注）為0（如圖36）。

再次點擊“+”按鈕添加內陰影。這次設置透明度為56，X:0, Y:7 和blur值為9（如圖37）。

08.斜面

現在我們為中心部件添加了漂亮的斜面。在這部分我們將深度添加到基礎部件上，將他們更好的混合起來。

在“icon base”文件夾，選擇“base”圖層。我們需要做的是保持相同的光線方向，及從上至下由淺到深。對此處而言頂部為白色、底部為粉色。

添加第一個內陰影，設置顏色為#E187FF，透明度為90%。X：0, Y：-5, Blur：6，范圍值為0。

添加第二個內陰影，顏色為#ffffff，透明度為100%。這次設置該內陰影為向下而飛向上。設置Y:5 （如圖38）。

將內陰影應用于小旋鈕。選擇“knob base” 群組和“oval 2" 圖層。

設置第一個內陰影顏色為#8D1799，透明度48% 。X:0 Y:-1 和 blur:3。

設置第二個內陰影顏色為#ffffff，透明度100% 。X:0 Y:2 和 blur:3。完成后值旋鈕頂部將創建一個漂亮的反射（如圖39）。

下一步是將旋鈕雕刻的更有觸感和深度。使用橢圓工具，在旋鈕的中間畫48 * 48的圓（如圖40）。取消邊框，添加垂直漸變填充，設置頂部顏色為黑色，底部顏色為白色。最后設置白色透明度為0%（如圖41）。

用調整混合模式來代替添加顏色。設置整個圖層為“overlay” （疊加模式－譯者注，如圖42）。

你也可以設置其他尺寸。

09.陰影

這部分是我的最愛。Sketch 3中令人驚艷的是其將陰影處理的如此精妙。在Sketch 3中有幾種創建陰影的方法：在圖層面板中應用陰影工具。簡易漸變或者應用模糊圖層。

這里我們使用兩種方法：陰影工具和模糊圖層。

首先選擇“Icon base > Base” 圖層。然后共計添加三個陰影。從很重的貼近base（底部原件－譯者注）的陰影到很輕的base的陰影。添加陰影如下：

#000000 Alpha（透明度－譯者注） 42% X:0 Y:10 Blur（模糊值－譯者注）:16 Spread（范圍－譯者注）:0

#000000 Alpha 34% X:0 Y:4 Blur:14 Spread:0

#000000 Alpha 24% X:0 Y:2 Blur:2 Spread:0

完成后如圖43。

最后為base添加強烈的陰影（drop shadow）。

復制“base” 圖層：可以右鍵點擊圖層，選擇復制（duplicate）；或者復制、粘貼圖層；或者按住“alt” 鍵，拖拽圖層。

完成后你會發現效果也同樣復制過來了。刪除全部效果。取消靠近效果的復選框，然后點擊選擇標簽右側的垃圾圖標（靠近“+” 符號）。點擊此圖標將自動取消所有陰影效果（如圖44）。設置顏色填充的顏色為#000000。完成后如圖45。

在圖層面板重，重命名該圖層為“Big drop shadow” ，將其移動至“base”圖層下面（如圖46）。

調整該圖層的位置，向下移動30px：選擇圖層，按住shift鍵同時點擊向下箭頭的按鍵三次。按住Shift＋上下左右箭頭將以10px單位移動選中圖層（如圖47）。

最后，設置該圖層透明度為20%，然后設置高斯模糊值為7px（如圖48）。底部原件現在有了漂亮的陰影。

下面將同樣的陰影應用到旋鈕上。

進入“Knob base”群組，選擇oval 2”圖層。復制該圖層，將其移出群組。為該圖層設置單獨的群組，重命名為“Knob shadow” ，將該群組拖拽到“knob base” 下面（如圖49）。

移除該圖層的所有效果，設置單色為#000000，向下移動10px（如圖50）。完成后設置該圖層透明度為10%、告訴模糊為4px。效果會非常輕微（如圖51）。

讓我們制作個更精致的陰影。復制該圖層，向上移動10px，與旋鈕對齊。修改此圓的形狀。選中后按enter（return）”鍵，如圖52。現在編輯路徑。請注意右側面板已經發生變化。

如果未選中，選擇底部錨點（如圖52）。將該錨點下移10px（如圖53）。完成后在矢量編輯面板的頂部點擊“finish editing”，回到常規視圖。

設置圖層透明度未20%、8px高斯模糊（如圖54）。

完成最后的陰影，復制剛才完成的圖層，設置透明度為40%。在右側面板的“size”中，設置新圖層68寬、80高，設置頂部居中對齊（如圖55）。

最后設置圖層的混合模式為Overlay，進而得到漂亮的深藍色陰影（如圖56）。

為旋鈕陰影添加方向效果。

選擇旋鈕的base圖層（“Knob base>Oval 2”）。添加三個陰影效果，如下：

·#000000 60% alpha（透明度－譯者注） X:0, Y:1, Blur:2, spread 0. 設置混合模式為“Overlay”。

·#000000 14% alpha X:0, Y:3, Blur:4, spread 0。

·#000000 50% alpha X:0, Y:2, Blur:4, spread 0。

完成后如圖57。

現在我們完成了陰影部分。

10.完成細節

添加開關。

在Knob base群組中創建圓角矩形：點擊“U” 鍵或點擊“Insert>Shape>Rounded” （如圖58），尺寸8*2（寬＊高）、圓角半徑為3或更多。

將它移到其他旋鈕圖層的頂部，重命名為“pointer thingy”，我尚未找到更合適的名字。

水平居中，距旋鈕底部右側8px（如圖59）。

取消邊框，設置單色為#CA2DEA、透明度為40%。

為其添加深度。添加陰影：#FFFFFF 46% alpha X:0, Y:1, Blur:0。然后添加內陰影：#000000 40% alpha X:0, Y:1, Blur:0。

設置內陰影混合模式為“overlay”。完成后如圖60。

在“color base” ，應用橢圓工具（點擊“o”鍵）創建8X8的圓。將其移至距旋鈕左側10px處并水平居中。重命名為“OFF”（如圖61）。取消邊框，為其填充顏色為#ffffff 、設置混合模式為overlay（如圖62）。

為了使其更像關閉的開關，在“OFF”圖層的頂部創建另一個圓型圖層。這次設置其尺寸為6X6。取消邊框并與“OFF” 圓居中對齊（如圖63），完成后看起來漂亮許多。

同時選擇“oval 11”和“OFF”圖層。在工具欄應用“substract”（差集－譯者注）合并他們（如圖64）。 完成后如圖65。

創建“ON” 圓，復制“OFF”圖層。重命名它，將其移到旋鈕的另一側，距離相同（如圖66）。

點擊圖層左側的三角形來展開矢量圖群組，選擇“oval 11" （如圖67）并刪除它（如圖68）。

大功告成！

11.導出

教程的最后我們將展示將畫板一次輸出多個DPI。這是一個絕妙的特點。

在本列中我們將輸出一倍（當前設計的尺寸）和兩倍的文件。

選擇畫板“colorful switch”。

在右側邊欄的底部，你會看到“Make Exportable”按鈕。點擊它，你將得到圖69。

1x表示基線，例如你設計的原始尺寸。在“Export”的右側點擊 “+”，添加新的輸出倍數。系統自動添加@2x（2倍－譯者注）。你也可以改變后綴和格式（如圖70）。

當你點擊“Export colorful switch”將生成1倍和2倍的相應格式的文件。

當你看到這里，你已經具備了成功的潛質（能看譯者啰嗦到這里的都是意志十分強大的童鞋，這段非原文，乃譯者自己的感慨！）。希望此教程能給各位帶來些許幫助。

圖標設計教程：
《繪制一個超級閃亮的鉛筆圖標》
《利用ILLUSTRATOR設計時尚漂亮的LOGO》
《手把手教！用PS設計一枚IOS 7風格日記圖標》

投稿者：@呼嘯而過Charles

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量73萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：