教你快速打造優(yōu)美地 iOS 應(yīng)用圖標(biāo)

教你快速打造優(yōu)美的iOS應(yīng)用圖標(biāo)開始前，請(qǐng)先準(zhǔn)備一個(gè)iOS應(yīng)用圖標(biāo)\t"/photoshop/jiaocheng/2015/_blank"模板，可以從\t"/photoshop/jiaocheng/2015/_blank"iOSIconTemplate或者\(yùn)t"/photoshop/jiaocheng/2015/_blank"AppIconTemplate下載（我用的就是后者的素材）。我的電腦屏幕上只顯示了1024px的大圖標(biāo)，我覺得用這個(gè)模板做參考就可以了。你可以將應(yīng)用圖標(biāo)模板進(jìn)行裁剪，只保留1024px的圖標(biāo)，或者處理模板上的其余元素。下面我們正式開始。步驟1：創(chuàng)建iOS應(yīng)用圖標(biāo)的基本形狀首先新建一個(gè)圖層并\t"/photoshop/jiaocheng/2015/_blank"填充背景色，參考色值是#acced6。接下來，給顏色圖層添加\t"/photoshop/jiaocheng/2015/_blank"蒙版，使其呈現(xiàn)圖標(biāo)的輪廓。技術(shù)上來講這一步可要可不要，因?yàn)樯蟼鲌D片之后，\t"/photoshop/jiaocheng/2015/_blank"蘋果官方會(huì)自動(dòng)幫你切成\t"/photoshop/jiaocheng/2015/_blank"圓角。不過，為了呈現(xiàn)更好的視覺\t"/photoshop/jiaocheng/2015/_blank"效果，我建議使用蒙版。怎么操作呢？按住COMMAND（MAC用戶）或者CTRL（Windows用戶）鍵的同時(shí)點(diǎn)擊圖標(biāo)模板圖層，顏色圖層就會(huì)出現(xiàn)一個(gè)選區(qū)啦。再在圖層面板的底部點(diǎn)擊蒙版圖標(biāo)，就可以創(chuàng)建蒙版了。步驟2：添加漸變色在顏色\t"/photoshop/jiaocheng/2015/_blank"圖層點(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)\t"/photoshop/jiaocheng/2015/_blank"設(shè)計(jì)的重要組成部分，我們可以利用iOS圖標(biāo)柵格畫一個(gè)圓：使用橢圓工具（U）創(chuàng)建一個(gè)寬高為890px的正圓，在屬性\t"/photoshop/jiaocheng/2015/_blank"面板中可以調(diào)整它的大小以便與柵格對(duì)齊。步驟4：給圓形添加圖層樣式給形狀\t"/photoshop/jiaocheng/2015/_blank"圖層添加描邊、陰影和漸變等圖層樣式。添加漸變圓的漸變比較簡單，漸變色值為#ffffff和#d9d9d9。漸變樣式選擇\t"/photoshop/jiaocheng/2015/_blank"徑向漸變。要讓圓的中心呈現(xiàn)些許亮色，從圓心到邊緣有一個(gè)白色到淺灰色的漸變，縮放比例設(shè)置為150%。添加描邊圓的描邊要加粗，描邊位置選擇內(nèi)部，描邊大小的參考數(shù)值為30px，\t"/photoshop/jiaocheng/2015/_blank"填充類型選擇漸變。漸變所用顏色比圖標(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è)圓添加\t"/photoshop/jiaocheng/2015/_blank"投影，讓描邊看上去更清晰，也可以讓整個(gè)圓在藍(lán)色背景下看的也很明顯。把陰影的透明度設(shè)置為10%，距離設(shè)置為0，將大小設(shè)置的稍微大一點(diǎn)，我的參考數(shù)值是55。效果如下圖所示：步驟5：添加鉛筆圖標(biāo)我們?cè)谏弦徊降幕A(chǔ)上添加一枚圖標(biāo)，我選的是鉛筆圖標(biāo)。你可以在Sliceberry或者theNounProject搜索你想要的圖標(biāo)。由于我們制作的圖標(biāo)是1024*1024規(guī)格的，所以一定要選大圖標(biāo)。如果你也想用鉛筆圖標(biāo)，可以從theNounProject下載，作者是MollyBramlet，下載鏈接：/term/pencil/16973/將該圖標(biāo)導(dǎo)入你的PSD文件并調(diào)整大小。如果你用的鉛筆圖標(biāo)跟我用的一樣大，需要將其縮小到原來的1/2。你可以利用iOS模板把該圖標(biāo)控制在內(nèi)圓的范圍之內(nèi)。為了讓該圖標(biāo)垂直于水平線，需要將其旋轉(zhuǎn)62.32度。按下COMMAND（MAC用戶）或者CRTL（Windows用戶）鍵的同時(shí)按下T鍵，在頂部緊挨著小三角形圖標(biāo)的窗口中輸入數(shù)值62.32。（你也可以跳過旋轉(zhuǎn)圖標(biāo)這一步驟）步驟6：給鉛筆圖層添加圖