當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

ps設計金屬APP圖標(4)

來源:PS夢工場 作者:南辰 學習:6381人次

今天為大家?guī)硪黄浅:唵蔚膇Cloud圖標的PS教程。這篇教程雖然簡單,但是有很多細節(jié),大家從中還可以學到非常常用的角度漸變和漸變描邊的用法。

先看看效果圖

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第1步:

打開Photoshop,Ctrl+N新建文檔,根據(jù)自己的情況來定義尺寸。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第2步:

選擇圓角矩形工具,按住Shift鍵在畫布上繪制出一個方形的圓角矩形,這里我將圓角半徑設置為50像素。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第3步:

雙擊圓角矩形圖層,為其添加漸變圖層樣式。漸變樣式選擇角度漸變。漸變顏色使用深灰與淺灰相互交替,具體設置如下圖。這是做金屬樣式的常用手法。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

 

再添加描邊樣式,此處填充類型選擇漸變。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第4步:

選擇鋼筆工具,工具模式選擇形狀,在圓角矩形中心繪制出云形。這里我并沒有嚴格按照iCloud的曲線來繪制,只是教大家一種方法。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

 

第5步:

雙擊云圖層,為其添加內(nèi)陰影樣式。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

繼續(xù)添加描邊樣式,這里依然選擇漸變描邊,將默認的黑白漸變反向即可。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第6步:

將云圖層Ctrl+J復制一層,清除其圖層樣式,并將顏色改變?yōu)闇\灰色。Ctrl+T將其縮小,縮小時按住Alt鍵可以進行中心縮放?s小完畢,你可以利用直接選擇工具微調(diào)錨點,使邊緣看上去均勻即可。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

第7步:

復制圓角矩形的圖層樣式,粘貼到內(nèi)部的云形圖層。(小技巧:按住Alt鍵拖動圖層樣式的fx圖標到另外圖層上,可以快速復制圖層樣式。)

將描邊大小修改為2像素,我們就完成了非常簡單的icloud圖標的制作。

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

來看看最終效果圖吧:

Photoshop設計金屬立體效果的APP圖標,PS教程,16xx8.com教程網(wǎng)

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!