@呼嘯而過(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)擊”O(jiān)K“按鈕，然后開(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）?，F(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)閺淖笊辖堑接蚁陆牵ㄈ鐖D11）。

確認(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)造奇跡吧。

圖標(biāo)教程：
《PS+AI制作精致可愛(ài)的毛線風(fēng)格圖標(biāo)》
《PS教程：教你創(chuàng)建精美的螺旋圓點(diǎn)花紋ICON》
《PS新手教程：中國(guó)臺(tái)灣設(shè)計(jì)師教你快速制作圓形漸變圖標(biāo)》

原文地址：blog.sina
作者：@呼嘯而過(guò)Charles

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

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