文章出處

很多人喜歡折騰圖標,所以,很多人問,有沒有新的圖標教程,于是,今天,是一個簡單的圖標制作,重點是金屬質感,同往常一樣,我們都是用圖層樣式來實現。

教程的PSD源文件下載:金屬質感的APP圖標PS教程素材

先看看效果圖

Photoshop設計金屬質感的ICON圖標教程,PS教程

新建一個文檔,我用的大小是1000X800像素,創建一個漸變填充調整層,參數如下。

Photoshop設計金屬質感的ICON圖標教程,PS教程

將這個漸變背景圖層轉換為智能對象,添加一個雜色。

Photoshop設計金屬質感的ICON圖標教程,PS教程

用圓角矩形工具畫出我們的圖標主體,顏色設置為#f6f5f5,添加一個斜面浮雕和投影。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

復制一層主體圖層,右鍵清除圖層樣式,將填充修改為0,添加一個投影樣式,我們來做投影加強。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

用橢圓工具畫一個圓,設置圖層樣式。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

同樣的用橢圓工具畫出一個小一點的圓,這個將是我們的旋紐,設置圖層樣式。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

畫一個稍微小一點的圓,我們來制作金屬旋紐,效果我們通過圖層樣式實現。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

新建一個圖層,填充白色,轉換為智能對象,添加一個雜色。

Photoshop設計金屬質感的ICON圖標教程,PS教程

執行一個徑向模糊濾鏡,參數如下:

Photoshop設計金屬質感的ICON圖標教程,PS教程

將這個拉絲圖層圖層混合模式修改為“顏色加深”,因為這個拉絲層我們是要用來給金屬旋紐增加金屬質感的,所以我們載入金屬旋紐的選區,添加一個圖層蒙版。

Photoshop設計金屬質感的ICON圖標教程,PS教程

接下來,畫個三角箭頭,添加個圖層樣式。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

最后,我們添加環繞旋紐的圖標。圖標不應該位于最頂層,應該在我們中間的旋紐下層,所以請注意看我們的圖層關系。這里我用的圖標,不是現畫的,是來自于Asif Aleem的分享。

Photoshop設計金屬質感的ICON圖標教程,PS教程

我為箭頭指向的圖標添加了一個樣式,使其看了像是浮現。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

而其他的圖標,我設置的顏色是#151926,施加的樣式則是讓其看了像是凹陷。

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

Photoshop設計金屬質感的ICON圖標教程,PS教程

我們的最終結果如下:

Photoshop設計金屬質感的ICON圖標教程,PS教程


歡迎轉載:http://www.kanwencang.com/bangong/20170306/111186.html

文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()