@呼嘯而過Charles ：Sketch是Mac平臺上超火的圖片處理軟件，功能強大，并且比起PS它更加輕量級。感謝Sebastien Gabriel，本教程由他制作。下方是最終效果。不贅言，直入主題。

　　01.安裝sketch

　　如果你尚未購買它，你可以下載試用版或者直接到App Store購買。然后安裝并啟動sketch。

　　當你看到提示畫面，不要點開任何特定的模版，只要點擊”OK“按鈕，然后開啟新文檔。你將會看到下圖。

　　02.創建畫板

　　畫板是工作區域，它的尺寸可以不受限制，小到圖標、大到任意大。如果你用過Illustrator，他們是相同的。

　　在鍵盤上按“A”鍵或者點擊左上角的“Insert”按鈕，選擇”artboard”(如圖1)。如圖，你可以在右側欄看到許多預設尺寸。本例不采用這些預設尺寸。簡單在畫布上畫任意尺寸的畫板。完成后在右側面板上”size”上輸入400 X 300(如圖2)。

　　在你的畫板/左側的圖層面板，雙擊”Artboard 1&PRime;標簽，將其重命名。作者將其命名為”Colorful switch”，因為它是描述性名稱(如圖3)。

　　03.設置彩色背景

　　現在你已經制作一個畫板，是時候為它設定色調了。你可以之后調整它。但背景色的選取會影響到你圖標上的光線反射和圖標上的著色。

　　敲擊鍵盤上的”R”鍵選擇矩形(insert>shape>rectangle (R)，如圖4)

　　在畫板上畫一個矩形，使其與畫板完全匹配。矩形工具將自動對齊畫板的邊沿(如圖5)。完成后你將發現右側的效果面板(effect panel)自動完成灰色填充和灰色邊框(如圖6)。

　　解除邊框顏色，然后點擊填充顏色。在16進制框輸入“A846FF”(如圖7)?，F在你能得到基本顏色。

　　現在請注意填充面板右上角的“+” 按鈕，點擊它。

　　如你所見，在此前的圖層之上添加新的填充圖層。

　　如果未選中漸變面板請選中它，在畫板上從左上角到右下角畫漸變(如圖8)。

　　在填充類型選擇器右下角的兩個方形是你所選擇的漸變色。點擊它，使其變成可編輯狀態。

　　確認你的形狀的左上角的顏色是白色(#ffffff)、右下角是黑色(#000000)。點擊漸變色選擇器中的黑色，設置它的透明度為0。漸變色的透明度的調整可以通過滑動取色器右下方的滑塊或者在RGB右側的“A”字母輸入框輸入。選擇白色，設置透明度為60(如圖9)。

　　設置填充為“overlay”(如圖10)

　　然后再次點擊添加按鈕。這次選擇第三個標簽以得到徑向漸變。調整漸變為從左上角到右下角(如圖11)。

　　確認左上角顏色為白色，右下角顏色為黑色。保證他們的透明度都為50%。同樣設置這個填充為“overlay”。完成后效果如圖12。一個閃亮的由淺及深的霓虹燈紫色漸變色。

　　最后，創建組，將前面創建的圖層放入組中。在左側面板中選擇你的圖層，摁住“cmd”和“G”將圖層放入組中，雙擊組，將它命名為“Background”?；蛘咂饌€更瘋狂的名字，如crazy color。最終效果見圖13。

　　04.應用內嵌的iOS7圖標模版創建圖標的外形

　　現在讓我們一起創建圖標吧。

　　我們將用內嵌的iOS圖標模版，因此可以避免重建帶復雜圓角的外形。

　　點擊“File”>“New From Template”>“iOS App Icon”(如圖14)，新建文件。

　　在左側的面板中點擊“Icon-76@2x”中的“Icon Shape”右側的鎖(如圖15)。選中此圖層并解鎖，復制(cmd+c)并粘貼到你原始的文件中 (如圖16)。你可以關閉模版文件窗口，無需保存。

　　選擇已經創建的“Icon Shape”圖層(點擊“cmd”可以選擇多個圖層，如圖17)。

　　使用右側邊欄頂部的排列工具，將圖標置于背景的中間。點擊“align horizontally” 按鈕(水平居中第四個圖標)和 “align vertically” 按鈕(垂直居中，第七個圖標)，如圖18。完成后如圖19。

　　現在我們整理之前的成果，之后就不必再做了。在Icon shape圖層點擊 “cmd+G” 創建組。向上拖拽該組，重命名為“Icon”。在該組中再次點擊“Cmd + G”將圖層放入群組中。重命名為“Icon Base”(如圖20)。

　　05.創建基礎形狀

　　選擇“Base” 圖層，修改色彩為#ffffff。點擊“+”按鈕添加第二個平色填充(可理解為單色-譯者注)，設置顏色為#FAC3FF。

　　設置剛才的平色透明度為10。完成后如圖21。

　　現在鍵盤上點擊“O” 選擇橢圓形狀工具。在“Base”圖層的中央畫124 * 124的圓。你也可以右側邊欄設置圓的尺寸。不要忘記我們之前使用的排列工具將圓形完美的居中。去掉邊框，你將得到如圖22的圖形。

　　將“Oval 1”圖層的填充樣式設為“Linear Gradient”(線性漸變-譯者注)，調整角度為對角線。設置左上角顏色為#E500E7、右下角顏色為#00D7FF。不要修改透明度和混合模式。(如圖23)

　　為該圖層命名為“Super colorful base” ，然后將起放入“Color Base”群組。(如圖24)

　　運用橢圓工具畫旋鈕。畫一個58 * 58的圓，然后將它與“Super colorful base”居中對齊。

　　在該圖層上添加垂直線性漸變。頂部顏色為#FFDBFF、底部顏色為#FCF2FC。(如圖25)

　　為該圖層建群組(cmd+G)，然后命名為Knob base”(如圖26)

　　如圖所示，我們已經創建了基礎形狀以及我們圖標的區域。在底層我們完成了iOS7的形狀。并且在頂層完成了彩色圓形和旋鈕。現在剩余的任務就是在這些扁平形狀上添加一些效果。中場休息，我們已經漂亮地完成了一半。讓我們下半場繼續創造奇跡吧。

　　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?，F在編輯路徑。請注意右側面板已經發生變化。

　　如果未選中，選擇底部錨點(如圖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倍的相應格式的文件。