@李春暉-NonoLee ：今天的教程特別適合UI新手練手用，效果好看，作者對圖層樣式和漸變的理解也特別到位，同學們臨摹過程多加揣摩，進步會很快。操作界面全中文，不怕看不懂，小編已跟著練習了一遍，現在該你啦。
幫你成為大牛的速成好文
第1步：
打開Photoshop，Ctrl+N新建一個文檔，文檔尺寸可自定義。
第2步：
按住Alt鍵雙擊背景圖層，使其轉換為普通圖層。然后再次雙擊，打開圖層樣式面板，為其添加顏色疊加樣式，顏色為#262523。
繼續為其添加漸變疊加，數值如下：
再利用內發光中的雜色功能來給背景添加一些雜色，當然你也可以使用濾鏡中的添加雜色功能。
此時的背景：
第3步：
新建一層，用白色大號柔邊畫筆在畫布中心點擊出白色亮光。
Ctrl+T將其拉寬壓扁，如下圖所示。
將圖層不透明度調整為10-30%，這里可以根據自己的感覺來調整。
第4步：
接下來我們創建icon主體。利用圓角矩形工具在畫布中心點擊，在彈出的對話框中設置數值如下：
第5步：
在圓角矩形上方隨意繪制一個比其尺寸大一些的形狀，因為我們后面會將其轉換為剪貼蒙版，因此形狀可隨意繪制。
為創建的形狀添加角度漸變。
然后按住Alt鍵在角度漸變與圓角矩形中間點擊鼠標左鍵，將其轉換為剪貼蒙版。然后在圖層名稱上點擊右鍵，將其轉換為智能對象。
第6步：
利用馬賽克濾鏡（濾鏡>像素化>馬賽克）對其進行分塊處理。
第7步：
將執行了馬賽克濾鏡的圖層Ctrl+J復制一層，同樣轉換為剪貼蒙版。然后點擊濾鏡>風格化>照亮邊緣。
將其圖層混合模式設置為線性減淡（添加），圖層不透明度設置為30%。此時每個格子間都被細線分割開了。
第8步：
將上一步創建的圖層Ctrl+J再次進行復制。將圖層混合模式設置為減去，圖層不透明度設置為20%。
選擇移動工具，利用鍵盤上的方向鍵將其位置向下方與右方分別移動1像素。這樣格子的間隔部分便形成了凹槽的效果。
第9步：
利用橢圓工具在icon中心繪制出一個正圓形。
然后為其添加角度漸變。
繼續添加內陰影
為了表現立體感還要為其添加投影
我們來看一下此時的圓形樣式
第10步：
利用橢圓工具在icon中心再次創建一個較小的正圓形。
為其添加顏色疊加樣式。此處顏色選擇接近黑色的深灰色。
繼續添加內發光。與第2步相同，我們這里利用內發光來添加雜色。
然后為其添加內陰影。
再來個內部描邊以使其輪廓更加明顯。
來看看我們處理后的結果。
第11步：
下面我們來添加文字。
然后為文字添加漸變。這里我就不給出具體數值了，你可以根據自己的感覺來。當然你也可以使用其他色系的顏色。
添加內陰影以模擬邊緣的高光。
當然了，要表現立體感，陰影還是不能缺少的。
第12步：
做到這里，總覺得icon平平淡淡，缺少點感覺。好吧，使出我們的殺手锏，添加發光！你立刻就會感受的奇跡的發生了。
把第4步創建的圓角矩形圖層按住Alt鍵向上拖動復制一份，把填充調為0，這樣我們就可以不受這個圖層本身顏色的控制了，而可以對圖層樣式進行為所欲為的調整，嘿嘿。
來吧，給它添加內發光！
還有內陰影
來看看效果，怎樣樣？是不是好看了很多。
你是不是正要慶祝終于完工了？等等，icon右上角那一片白是怎么回事？木有細節了，親。
第13步：
好吧，苦逼的設計師，繼續調整。
雙擊圖層，打開圖層樣式面板。在混合選項中，將“圖層蒙版隱藏效果”勾選上。
然后為圖層添加蒙版，用黑色畫筆將細節擦出來。
第14步：
最后添加上倒影。Oh，my god！終于完了！
【UI設計學習三部曲】
Step 1：騰訊設計師的新人培訓教程！初學者必備！
《傳承設計經驗！圖標設計初階的3大關鍵入門知識點！》Step 2：到頂尖UI設計師集聚地吸收經驗與靈感！
《設計師必讀！玩轉Dribbble終極指南》Step 3：每天一練！技巧都學全！
《PS+AI制作精致可愛的毛線風格圖標》
作者：@李春暉-NonoLee
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
MJ+SD智能設計
已累計誕生 772 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓