作為一名有逼格的設(shè)計(jì)師，怎么可以不會(huì)制作好看的應(yīng)用圖標(biāo)呢？今天我為大家?guī)硪黄g文章，關(guān)于如何制作 iOS 應(yīng)用圖標(biāo)，教程也比較簡(jiǎn)單，對(duì)于初學(xué)者來說也是一次很好的學(xué)習(xí)機(jī)會(huì)，小伙伴們打開你們的 PS 操練起來吧。
本文學(xué)習(xí)要點(diǎn)：素材選擇及圖層樣式的運(yùn)用，簡(jiǎn)單幾步打造優(yōu)美的iOS應(yīng)用圖標(biāo)制作漂亮的 iOS 應(yīng)用圖標(biāo)是設(shè)計(jì)師的必備技能之一，本篇教程就來告訴你怎么做圖標(biāo)。
開始前，請(qǐng)先準(zhǔn)備一個(gè) iOS應(yīng)用圖標(biāo)模板，可以從 iOS Icon Template 或者 App Icon Template 下載（我用的就是后者的素材）。
關(guān)注公眾號(hào)liangyuansi1獲取最新學(xué)習(xí)軟件
我的電腦屏幕上只顯示了 1024px 的大圖標(biāo)，我覺得用這個(gè)模板做參考就可以了。
你可以將應(yīng)用圖標(biāo)模板進(jìn)行裁剪，只保留 1024px 的圖標(biāo)，或者處理模板上的其余元素。
下面我們正式開始。
步驟1：創(chuàng)建iOS 應(yīng)用圖標(biāo)的基本形狀
首先新建一個(gè)圖層并填充背景色，參考色值是 #acced6。
接下來，給顏色圖層添加蒙版，使其呈現(xiàn)圖標(biāo)的輪廓。技術(shù)上來講這一步可要可不要，因?yàn)樯蟼鲌D片之后，蘋果官方會(huì)自動(dòng)幫你切成圓角。
不過，為了呈現(xiàn)更好的視覺效果，我建議使用蒙版。
怎么操作呢？按住 COMMAND （MAC 用戶）或者 CTRL （Windows 用戶）鍵的同時(shí)點(diǎn)擊圖標(biāo)模板圖層，顏色圖層就會(huì)出現(xiàn)一個(gè)選區(qū)啦。
再在圖層面板的底部點(diǎn)擊蒙版圖標(biāo)，就可以創(chuàng)建蒙版了。
步驟2 ：添加漸變色
在顏色圖層點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇混合選項(xiàng)。我們來給它加一個(gè)弱漸變。漸變的起始和終止色值分別為 #acced6 和 #7cbece。
漸變樣式選擇線性漸變，角度設(shè)置為 135 度，呈現(xiàn)出由左上角的深藍(lán)色到右下角的淺藍(lán)色漸變效果。
如果這兩種顏色順序搞顛倒了，調(diào)整角度為 -135 度或者 315 度就行了。
步驟3：創(chuàng)建內(nèi)圓
圖標(biāo)中部的白色圓形是整個(gè)圖標(biāo)設(shè)計(jì)的重要組成部分，我們可以利用 iOS 圖標(biāo)柵格畫一個(gè)圓：使用橢圓工具（U）創(chuàng)建一個(gè)寬高為 890px 的正圓，
在屬性面板中可以調(diào)整它的大小以便與柵格對(duì)齊。
步驟4：給圓形添加圖層樣式
給形狀圖層添加描邊、陰影和漸變等圖層樣式。
添加漸變
圓的漸變比較簡(jiǎn)單，漸變色值為 #ffffff 和 #d9d9d9。
漸變樣式選擇徑向漸變。要讓圓的中心呈現(xiàn)些許亮色，從圓心到邊緣有一個(gè)白色到淺灰色的漸變，縮放比例設(shè)置為 150%。
添加描邊
圓的描邊要加粗，描邊位置選擇內(nèi)部，描邊大小的參考數(shù)值為 30px，填充類型選擇漸變。
漸變所用顏色比圖標(biāo)的背景漸變色要亮一些。起始色值和終止色值分別為 #d1e4e8 和 #a9deeb，漸變角度設(shè)置為 -45 度，呈現(xiàn)出由頂部的淺藍(lán)色到底部的深藍(lán)色漸變效果。
添加內(nèi)陰影
這里的內(nèi)陰影其實(shí)是白色高光，你也可以使用內(nèi)發(fā)光樣式。將混合選項(xiàng)設(shè)置為正常，距離設(shè)置為 0。將大小設(shè)置為 70。
（注：此處原文為 140px，但是與截圖上的參數(shù)不符，所以譯者暫時(shí)將參數(shù)改為70px）
添加投影
最后給這個(gè)圓添加投影，讓描邊看上去更清晰，也可以讓整個(gè)圓在藍(lán)色背景下看的也很明顯。把陰影的透明度設(shè)置為 10%，
距離設(shè)置為 0，將大小設(shè)置的稍微大一點(diǎn)，我的參考數(shù)值是55。
效果如下圖所示：
步驟5：添加鉛筆圖標(biāo)
我們?cè)谏弦徊降幕A(chǔ)上添加一枚圖標(biāo)，我選的是鉛筆圖標(biāo)。你可以在 Sliceberry 或者 the Noun Project 搜索你想要的圖標(biāo)。由于我們制作的圖標(biāo)是 1024*1024 規(guī)格的，
所以一定要選大圖標(biāo)。
如果你也想用鉛筆圖標(biāo)，可以從 the Noun Project 下載，作者是 Molly Bramlet，
將該圖標(biāo)導(dǎo)入你的 PSD 文件并調(diào)整大小。如果你用的鉛筆圖標(biāo)跟我用的一樣大，需要將其縮小到原來的 1/2。你可以利用 iOS 模板把該圖標(biāo)控制在內(nèi)圓的范圍之內(nèi)。
【關(guān)注公眾號(hào)領(lǐng)取最新學(xué)習(xí)UI學(xué)習(xí)資料】
為了讓該圖標(biāo)垂直于水平線，需要將其旋轉(zhuǎn) 62.32 度。按下 COMMAND （MAC 用戶）或者 CRTL （Windows 用戶）鍵的同時(shí)按下 T 鍵，
在頂部緊挨著小三角形圖標(biāo)的窗口中輸入數(shù)值 62.32。（你也可以跳過旋轉(zhuǎn)圖標(biāo)這一步驟）
步驟6：給鉛筆圖層添加圖層樣式
終于到了圖標(biāo)制作最后的步驟了，我們來給它添加漸變疊加和內(nèi)陰影。
添加漸變疊加
打開該圖層的混合選項(xiàng)，選擇漸變疊加，色值參數(shù)同步驟 2，即起始色值和終止色值分別為 #acced6 和 #7cbece。漸變效果沿對(duì)角線方向呈現(xiàn)，
角度設(shè)置為 -45 度，從左上角的淺藍(lán)色開始，到右下角的深藍(lán)色結(jié)束。
添加內(nèi)陰影
這是本教程的最后一個(gè)小步驟。給鉛筆圖層添加內(nèi)陰影，讓它看起來有些厚度。內(nèi)陰影其他參數(shù)不變，只降低其透明度，參考數(shù)值為15%。
這是因?yàn)閳D標(biāo)整體使用的是亮色，所以我們讓它有一點(diǎn)陰影的感覺就可以了。
最終效果
圖標(biāo)到這里就制作完成了。這篇教程的目的就是向你展示漂亮的iOS應(yīng)用圖標(biāo)制作方法，過程沒那么復(fù)雜，最終的效果看起來也很棒，
你可以使用這個(gè)方法嘗試制作其他圖標(biāo)。
對(duì)于UI設(shè)計(jì)是否還是處于一知半解，沒有頭緒，處于迷茫的境界呢？
這都不是問題，希望想學(xué)習(xí)的你，不管是什么基礎(chǔ)，或者是想轉(zhuǎn)行都可以加私信
喜歡此文章可以給小編留言哦
