@李春暉-NonoLee ：今天的教程特別適合UI新手練手用，效果好看，作者對圖層樣式和漸變的理解也特別到位，同學(xué)們臨摹過程多加揣摩，進(jìn)步會(huì)很快。操作界面全中文，不怕看不懂，小編已跟著練習(xí)了一遍，現(xiàn)在該你啦。

幫你成為大牛的速成好文

1. 《UI設(shè)計(jì)新手？7條實(shí)用法則幫你迅速進(jìn)階！（一）》
   
2. 《UI設(shè)計(jì)新手？7條實(shí)用法則幫你迅速進(jìn)階！（二）》

第1步：

打開Photoshop，Ctrl+N新建一個(gè)文檔，文檔尺寸可自定義。

第2步：

按住Alt鍵雙擊背景圖層，使其轉(zhuǎn)換為普通圖層。然后再次雙擊，打開圖層樣式面板，為其添加顏色疊加樣式，顏色為#262523。

繼續(xù)為其添加漸變疊加，數(shù)值如下：

再利用內(nèi)發(fā)光中的雜色功能來給背景添加一些雜色，當(dāng)然你也可以使用濾鏡中的添加雜色功能。

此時(shí)的背景：

第3步：

新建一層，用白色大號柔邊畫筆在畫布中心點(diǎn)擊出白色亮光。

Ctrl+T將其拉寬壓扁，如下圖所示。

將圖層不透明度調(diào)整為10-30%，這里可以根據(jù)自己的感覺來調(diào)整。

第4步：

接下來我們創(chuàng)建icon主體。利用圓角矩形工具在畫布中心點(diǎn)擊，在彈出的對話框中設(shè)置數(shù)值如下：

第5步：

在圓角矩形上方隨意繪制一個(gè)比其尺寸大一些的形狀，因?yàn)槲覀兒竺鏁?huì)將其轉(zhuǎn)換為剪貼蒙版，因此形狀可隨意繪制。

為創(chuàng)建的形狀添加角度漸變。

然后按住Alt鍵在角度漸變與圓角矩形中間點(diǎn)擊鼠標(biāo)左鍵，將其轉(zhuǎn)換為剪貼蒙版。然后在圖層名稱上點(diǎn)擊右鍵，將其轉(zhuǎn)換為智能對象。

第6步：

利用馬賽克濾鏡（濾鏡>像素化>馬賽克）對其進(jìn)行分塊處理。

第7步：

將執(zhí)行了馬賽克濾鏡的圖層Ctrl+J復(fù)制一層，同樣轉(zhuǎn)換為剪貼蒙版。然后點(diǎn)擊濾鏡>風(fēng)格化>照亮邊緣。

將其圖層混合模式設(shè)置為線性減淡（添加），圖層不透明度設(shè)置為30%。此時(shí)每個(gè)格子間都被細(xì)線分割開了。

第8步：

將上一步創(chuàng)建的圖層Ctrl+J再次進(jìn)行復(fù)制。將圖層混合模式設(shè)置為減去，圖層不透明度設(shè)置為20%。

選擇移動(dòng)工具，利用鍵盤上的方向鍵將其位置向下方與右方分別移動(dòng)1像素。這樣格子的間隔部分便形成了凹槽的效果。

第9步：

利用橢圓工具在icon中心繪制出一個(gè)正圓形。

然后為其添加角度漸變。

繼續(xù)添加內(nèi)陰影

為了表現(xiàn)立體感還要為其添加投影

我們來看一下此時(shí)的圓形樣式

第10步：

利用橢圓工具在icon中心再次創(chuàng)建一個(gè)較小的正圓形。

為其添加顏色疊加樣式。此處顏色選擇接近黑色的深灰色。

繼續(xù)添加內(nèi)發(fā)光。與第2步相同，我們這里利用內(nèi)發(fā)光來添加雜色。

然后為其添加內(nèi)陰影。

再來個(gè)內(nèi)部描邊以使其輪廓更加明顯。

來看看我們處理后的結(jié)果。

第11步：

下面我們來添加文字。

然后為文字添加漸變。這里我就不給出具體數(shù)值了，你可以根據(jù)自己的感覺來。當(dāng)然你也可以使用其他色系的顏色。

添加內(nèi)陰影以模擬邊緣的高光。

當(dāng)然了，要表現(xiàn)立體感，陰影還是不能缺少的。

第12步：

做到這里，總覺得icon平平淡淡，缺少點(diǎn)感覺。好吧，使出我們的殺手锏，添加發(fā)光！你立刻就會(huì)感受的奇跡的發(fā)生了。

把第4步創(chuàng)建的圓角矩形圖層按住Alt鍵向上拖動(dòng)復(fù)制一份，把填充調(diào)為0，這樣我們就可以不受這個(gè)圖層本身顏色的控制了，而可以對圖層樣式進(jìn)行為所欲為的調(diào)整，嘿嘿。

來吧，給它添加內(nèi)發(fā)光！

還有內(nèi)陰影

來看看效果，怎樣樣？是不是好看了很多。

你是不是正要慶祝終于完工了？等等，icon右上角那一片白是怎么回事？木有細(xì)節(jié)了，親。

第13步：

好吧，苦逼的設(shè)計(jì)師，繼續(xù)調(diào)整。

雙擊圖層，打開圖層樣式面板。在混合選項(xiàng)中，將“圖層蒙版隱藏效果”勾選上。

然后為圖層添加蒙版，用黑色畫筆將細(xì)節(jié)擦出來。

第14步：

最后添加上倒影。Oh，my god！終于完了！

【UI設(shè)計(jì)學(xué)習(xí)三部曲】

Step 1：騰訊設(shè)計(jì)師的新人培訓(xùn)教程！初學(xué)者必備！
《傳承設(shè)計(jì)經(jīng)驗(yàn)！圖標(biāo)設(shè)計(jì)初階的3大關(guān)鍵入門知識(shí)點(diǎn)！》

Step 2：到頂尖UI設(shè)計(jì)師集聚地吸收經(jīng)驗(yàn)與靈感！
《設(shè)計(jì)師必讀！玩轉(zhuǎn)Dribbble終極指南》

Step 3：每天一練！技巧都學(xué)全！
《PS+AI制作精致可愛的毛線風(fēng)格圖標(biāo)》

作者：@李春暉-NonoLee

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege