【 PS創意設計 】Photoshop設計頹廢風格的軟件APP圖標

Photoshop設計頹廢風格的軟件APP圖標

這一次的教學是屬於PS教程領域中的設計教程的相關教學。

文章出處是來自站酷的PS教程類文章,寫教學的作者是Yu0910,感謝Yu0910提供設計教程的實作教學。

教學大綱:

整體的頹廢風格運用在軟件的APP上面也非常的使用,喜歡的朋友讓我們一起來學習吧,有什麼不懂的地方可以下載PSD文件查看,下面就一起來學習吧。


設計教程教學開始

先看看效果圖

Photoshop設計頹廢風格的軟件APP圖標

下面是教程開始

Step01:點擊 — 【文件】— 【新建】(快捷鍵Ctrl+N)新建一個新的圖像,命名好並把寬度設置為800px,高度為600px,分辨率為72dpi,然後點擊確定,記得順手保存文件(快捷鍵Ctrl+S)。

Photoshop設計頹廢風格的軟件APP圖標

Step02:選擇【圓角矩形工具】(快捷鍵U,可按Shift+U切換),在畫布點擊【創建圓角矩形】彈出層,設置寬度為180px,高度為180px,半徑20px,並勾選【從中心】,然後點擊確定;

Photoshop設計頹廢風格的軟件APP圖標

Step03:重命名圖層為di,右鍵設置圖層樣式:

【斜面和浮雕】:樣式:內斜面、方式:平滑、深度100%、方向:上、大小3、軟化1、陰影角度90°、勾選【使用全局光】、高度30°、高光模式顏色#dedede、陰影模式顏色#262626、

【漸變疊加】:線性漸變,色值從上到下為 #333333 — #c6c6c6,角度為90°;

複製di圖層重命名為di_bian,選擇右鍵清除圖層樣式,填充顏色改為# 616161;按住Ctrl鍵點擊圖層載入選區,向上移動兩像素,再反向選區(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】;

Photoshop設計頹廢風格的軟件APP圖標

Step04:製作殘舊金屬紋理部分,這一步採用的是素材圖片嵌入和筆刷繪製,可在網上搜索關鍵字:殘舊、頹廢、噴濺、金屬等字眼下載相關素材,ps:本教程所用到的圖片跟筆刷連同圖標源文件psd均有提供(見附件下載),筆刷如何載入請自行百度,謝謝。

金屬紋理主要是不斷通過設置圖層的混合模式和不透明度的參數值疊加調試而成的,本教程調試后的參數如下:

01採用素材圖片 Rust_5.JPG,混合模式:正片疊底,不透明度70%;

02 使用筆刷,顏色#8c8c8c,不透明度30%;

03採用素材圖片 紋理.png,混合模式:變暗,不透明度30%;

這一步可自由發揮,自己覺得金屬圖片哪塊可以作為紋理即用就可,參數也可自己調試疊加,以實際效果為主;

Photoshop設計頹廢風格的軟件APP圖標

Step05:製作金屬破損處,選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),繪製幾個不規則多邊形,形狀自由發揮自定,配置金屬紋理背景,顏色深點即可,此處舉例:填充顏色#777777,設置圖層樣式:

【內陰影】:正片疊底,填充顏色#464646,角度90°,距離1px,阻塞0,大小1px;

再複製圖層載入選區,填充顏色為#FFFFFF,向上移動一像素,反向選區(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】。其他破損處也是使用這種操作方法;

Photoshop設計頹廢風格的軟件APP圖標

Step06:複製圖層di重命名為nei_di,點擊【編輯】—【自由變換路徑】(快捷鍵Ctrl+T),縮小90%(記得點擊【保持長寬比】),右鍵清除圖層樣式,選擇【混合選項】設置:

【漸變疊加】:線性漸變,色值從上到下為 #4b4b4b — #98988d,角度為90°;

【投影】:正片疊底,顏色#202020,角度90°,距離5px,擴展0,大小8px;

Photoshop設計頹廢風格的軟件APP圖標

Step07:繪製備份圖標,選擇【橢圓工具】(快捷鍵U,可按Shift+U切換),在畫布上按住Shift鍵畫一個正圓,再選擇【橢圓工具】,並選擇路徑【減去頂層形狀】,畫一個圓環,選擇【鋼筆工具】(快捷鍵P,可按Shift+P切換),並選擇路徑【合併形狀】,在圓環右邊處畫一個三角形,最後再選【鋼筆工具】,並選擇路徑【減去頂層形狀】,畫一個缺口,完成備份圖標,重命名為backup,填充顏色#202020,設置圖層樣式:

【描邊】:大小3px,外部,線性漸變,色值從上到下為 #787878 — #484848,角度為90°;

【內陰影】:正片疊底,顏色#474747,角度90°,距離3px,阻塞0,大小3px;

再複製圖層backup重命名為backup_bian,載入選區,向上移動一像素,反向選區(快捷鍵Shift+Ctrl+I),再點擊【圖層】窗口的【添加圖層蒙版】,設置圖層樣式:

【漸變疊加】:線性漸變,色值從上到下為 #282828 — #aeaeae,角度為90°;

Photoshop設計頹廢風格的軟件APP圖標

Step08:繪製螺絲孔:選擇【橢圓工具】,在畫布上按住Shift鍵畫一個小正圓,大小自定適合即可,設置圖層樣式:

【描邊】:大小2px,外部,線性漸變,色值從上到下為 #929292 — #3b3b3b,角度為90°;

【漸變疊加】:線性漸變,色值從上到下為 #353535 — #0c0c0c,角度為90°;

複製圖層(快捷鍵Ctrl+J或者選擇【移動工具】按住alt鍵拖動),複製四個小圓分別放在四個角;

繪製插槽:選擇【矩形工具】(快捷鍵U,可按Shift+U切換),畫一個長方形,大小自定適合即可,設置圖層樣式:

【描邊】:大小1px,內部,顏色#606060;

【內陰影】:正片疊底,顏色#2c1d02,角度90°,距離1px,阻塞0,大小5px;

【漸變疊加】:線性漸變,色值從上到下為 #e5c511 — #644200,角度為90°;

最後複製六個圖層,並排放在底部且居中排列;

Photoshop設計頹廢風格的軟件APP圖標

Step09:製作內部框殘舊金屬紋理部分,一樣是採用素材圖片嵌入和筆刷繪製;

金屬紋理主要是不斷通過設置圖層的混合模式和不透明度的參數值疊加調試而成的,本教程調試后的參數如下:

01採用素材圖片 Rust_4.JPG,混合模式:強光,不透明度15%;

02 使用筆刷,顏色# 181818,混合模式:疊加,不透明度40%;

03使用筆刷,顏色# 3f311d,混合模式:疊加,不透明度50%;

這一步可自由發揮,自己覺得金屬圖片哪塊可以作為紋理即用就可,參數也可自己調試疊加,以實際效果為主,完成圖標繪製;

Photoshop設計頹廢風格的軟件APP圖標

END:根據自己喜愛跟感覺調試破舊金屬紋理,完成其他圖標。

Photoshop設計頹廢風格的軟件APP圖標

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop設計頹廢風格的軟件APP圖標