UI教程，快速設(shè)計(jì)一個(gè)IOS應(yīng)用圖標(biāo)(2)

步驟 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，下載鏈接：https://thenounproject.com/term/pencil/16973/

將該圖標(biāo)導(dǎo)入你的PSD文件并調(diào)整大小。如果你用的鉛筆圖標(biāo)跟我用的一樣大，需要將其縮小到原來(lái)的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。（你也可以跳過(guò)旋轉(zhuǎn)圖標(biāo)這一步驟）