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

　　01.安裝sketch

　　如果你尚未購(gòu)買(mǎi)它，你可以下載試用版或者直接到App Store購(gòu)買(mǎi)。然后安裝并啟動(dòng)sketch。

　　當(dāng)你看到提示畫(huà)面，不要點(diǎn)開(kāi)任何特定的模版，只要點(diǎn)擊”OK“按鈕，然后開(kāi)啟新文檔。你將會(huì)看到下圖。

　　02.創(chuàng)建畫(huà)板

　　畫(huà)板是工作區(qū)域，它的尺寸可以不受限制，小到圖標(biāo)、大到任意大。如果你用過(guò)Illustrator，他們是相同的。

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

　　在你的畫(huà)板/左側(cè)的圖層面板，雙擊”Artboard 1″標(biāo)簽，將其重命名。作者將其命名為”Colorful switch”，因?yàn)樗敲枋鲂悦Q(chēng)(如圖3)。

　　03.設(shè)置彩色背景

　　現(xiàn)在你已經(jīng)制作一個(gè)畫(huà)板，是時(shí)候?yàn)樗O(shè)定色調(diào)了。你可以之后調(diào)整它。但背景色的選取會(huì)影響到你圖標(biāo)上的光線反射和圖標(biāo)上的著色。

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

　　在畫(huà)板上畫(huà)一個(gè)矩形，使其與畫(huà)板完全匹配。矩形工具將自動(dòng)對(duì)齊畫(huà)板的邊沿(如圖5)。完成后你將發(fā)現(xiàn)右側(cè)的效果面板(effect panel)自動(dòng)完成灰色填充和灰色邊框(如圖6)。

　　解除邊框顏色，然后點(diǎn)擊填充顏色。在16進(jìn)制框輸入“A846FF”(如圖7)。現(xiàn)在你能得到基本顏色。

　　現(xiàn)在請(qǐng)注意填充面板右上角的“+” 按鈕，點(diǎn)擊它。

　　如你所見(jiàn)，在此前的圖層之上添加新的填充圖層。

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

　　在填充類(lèi)型選擇器右下角的兩個(gè)方形是你所選擇的漸變色。點(diǎn)擊它，使其變成可編輯狀態(tài)。

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

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

　　然后再次點(diǎn)擊添加按鈕。這次選擇第三個(gè)標(biāo)簽以得到徑向漸變。調(diào)整漸變?yōu)閺淖笊辖堑接蚁陆?如圖11)。

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

　　最后，創(chuàng)建組，將前面創(chuàng)建的圖層放入組中。在左側(cè)面板中選擇你的圖層，摁住“cmd”和“G”將圖層放入組中，雙擊組，將它命名為“Background”。或者起個(gè)更瘋狂的名字，如crazy color。最終效果見(jiàn)圖13。

　　04.應(yīng)用內(nèi)嵌的iOS7圖標(biāo)模版創(chuàng)建圖標(biāo)的外形

　　現(xiàn)在讓我們一起創(chuàng)建圖標(biāo)吧。

　　我們將用內(nèi)嵌的iOS圖標(biāo)模版，因此可以避免重建帶復(fù)雜圓角的外形。

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

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

　　選擇已經(jīng)創(chuàng)建的“Icon Shape”圖層(點(diǎn)擊“cmd”可以選擇多個(gè)圖層，如圖17)。

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

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

　　05.創(chuàng)建基礎(chǔ)形狀

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

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

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

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

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

　　運(yùn)用橢圓工具畫(huà)旋鈕。畫(huà)一個(gè)58 * 58的圓，然后將它與“Super colorful base”居中對(duì)齊。

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

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

　　如圖所示，我們已經(jīng)創(chuàng)建了基礎(chǔ)形狀以及我們圖標(biāo)的區(qū)域。在底層我們完成了iOS7的形狀。并且在頂層完成了彩色圓形和旋鈕。現(xiàn)在剩余的任務(wù)就是在這些扁平形狀上添加一些效果。中場(chǎng)休息，我們已經(jīng)漂亮地完成了一半。讓我們下半場(chǎng)繼續(xù)創(chuàng)造奇跡吧。