繼續(xù)帶來一大波圖標(biāo)制作教程，這次帶來的風(fēng)格是頹廢機械風(fēng)格跟不規(guī)則形狀風(fēng)格，本教程依舊提供源文件psd下載，網(wǎng)盤鏈接下載：http://vdisk.weibo.com/s/cQKtf42BUtif ，希望大家多多支持！另外歡迎上傳交作業(yè)啦~

上一期回顧：http://www.zuodeer.cn/article/ZMTYxNTMy.html

一、頹廢機械風(fēng)格 —— METAL （備份圖標(biāo)）

link：http://www.zuodeer.cn/work/ZMzUzMTE0NA==.html

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

Step02：選擇【圓角矩形工具】（快捷鍵U，可按Shift+U切換），在畫布點擊【創(chuàng)建圓角矩形】彈出層，設(shè)置寬度為180px，高度為180px，半徑20px，并勾選【從中心】，然后點擊確定；

Step03：重命名圖層為di，右鍵設(shè)置圖層樣式：

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

【漸變疊加】：線性漸變，色值從上到下為 #333333 — #c6c6c6，角度為90°；

 

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

Step04：制作殘舊金屬紋理部分，這一步采用的是素材圖片嵌入和筆刷繪制，可在網(wǎng)上搜索關(guān)鍵字：殘舊、頹廢、噴濺、金屬等字眼下載相關(guān)素材，ps：本教程所用到的圖片跟筆刷連同圖標(biāo)源文件psd均有提供（見附件下載或者網(wǎng)盤鏈接），筆刷如何載入請自行百度，謝謝！

金屬紋理主要是不斷通過設(shè)置圖層的混合模式和不透明度的參數(shù)值疊加調(diào)試而成的，本教程調(diào)試后的參數(shù)如下：

01采用素材圖片 Rust_5.JPG，混合模式：正片疊底，不透明度70%；

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

03采用素材圖片 紋理.png，混合模式：變暗，不透明度30%；

這一步可自由發(fā)揮，自己覺得金屬圖片哪塊可以作為紋理即用就可，參數(shù)也可自己調(diào)試疊加，以實際效果為主；

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

【內(nèi)陰影】：正片疊底，填充顏色#464646，角度90°，距離1px，阻塞0，大小1px；

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

Step06：復(fù)制圖層di重命名為nei_di，點擊【編輯】—【自由變換路徑】（快捷鍵Ctrl+T），縮小90%（記得點擊【保持長寬比】），右鍵清除圖層樣式，選擇【混合選項】設(shè)置：

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

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

Step07：繪制備份圖標(biāo)，選擇【橢圓工具】（快捷鍵U，可按Shift+U切換），在畫布上按住Shift鍵畫一個正圓，再選擇【橢圓工具】，并選擇路徑【減去頂層形狀】，畫一個圓環(huán)，選擇【鋼筆工具】（快捷鍵P，可按Shift+P切換），并選擇路徑【合并形狀】，在圓環(huán)右邊處畫一個三角形，最后再選【鋼筆工具】，并選擇路徑【減去頂層形狀】，畫一個缺口，完成備份圖標(biāo)，重命名為backup，填充顏色#202020，設(shè)置圖層樣式：

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

【內(nèi)陰影】：正片疊底，顏色#474747，角度90°，距離3px，阻塞0，大小3px；

再復(fù)制圖層backup重命名為backup_bian，載入選區(qū)，向上移動一像素，反向選區(qū)（快捷鍵Shift+Ctrl+I），再點擊【圖層】窗口的【添加圖層蒙版】，設(shè)置圖層樣式：

【漸變疊加】：線性漸變，色值從上到下為 #282828 — #aeaeae，角度為90°；

Step08：繪制螺絲孔：選擇【橢圓工具】，在畫布上按住Shift鍵畫一個小正圓，大小自定適合即可，設(shè)置圖層樣式：

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

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

復(fù)制圖層（快捷鍵Ctrl+J或者選擇【移動工具】按住alt鍵拖動），復(fù)制四個小圓分別放在四個角；

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

【描邊】：大小1px，內(nèi)部，顏色#606060；

【內(nèi)陰影】：正片疊底，顏色#2c1d02，角度90°，距離1px，阻塞0，大小5px；

【漸變疊加】：線性漸變，色值從上到下為 #e5c511 — #644200，角度為90°；

最后復(fù)制六個圖層，并排放在底部且居中排列；

Step09：制作內(nèi)部框殘舊金屬紋理部分，一樣是采用素材圖片嵌入和筆刷繪制；

金屬紋理主要是不斷通過設(shè)置圖層的混合模式和不透明度的參數(shù)值疊加調(diào)試而成的，本教程調(diào)試后的參數(shù)如下：

01采用素材圖片 Rust_4.JPG，混合模式：強光，不透明度15%；

02 使用筆刷，顏色# 181818，混合模式：疊加，不透明度40%；

03使用筆刷，顏色# 3f311d，混合模式：疊加，不透明度50%；

這一步可自由發(fā)揮，自己覺得金屬圖片哪塊可以作為紋理即用就可，參數(shù)也可自己調(diào)試疊加，以實際效果為主，完成圖標(biāo)繪制；

END：根據(jù)自己喜愛跟感覺調(diào)試破舊金屬紋理，完成其他圖標(biāo)。

二、不規(guī)則形狀 —— MEIOS （相機圖標(biāo)）

link：http://www.zuodeer.cn/work/ZNjE2NTI5Mg==.html

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

Step02：選擇【圓角矩形工具】（快捷鍵U，可按Shift+U切換），在畫布點擊【創(chuàng)建圓角矩形】彈出層，設(shè)置寬度為200px，高度為150px，半徑10px，并勾選【從中心】，然后點擊確定；（PS：因為是不規(guī)則形狀的主題圖標(biāo)，長寬比采用4:3比例）

Step03：重命名圖層為di，右鍵選擇【混合選項】，設(shè)置

【描邊】：大小為1，位置內(nèi)部，填充類型為漸變，色值從上到下為 #ededed — #ffffff，角度為90°

【漸變疊加】：線性漸變，色值從上到下為 #f1f1f1 — #ffffff，角度為90°；

再復(fù)制圖層（快捷鍵Ctrl+J），重命名為di2，填充顏色改為b9b9b9，并把圖層向下移動三像素；

Step04：繪制鏡頭部分，選擇【橢圓工具】（快捷鍵U，可按Shift+U切換），按住Shift鍵畫個正圓，大小自定適合即可，源文件的大小是為120×120px，圖層重命名為B_yuan；設(shè)置圖層混合選項：

【描邊】：大小為5，位置外部，填充類型為漸變，色值從上到下為 #d5d5d5 — #e6e6e6，角度為90°

【漸變疊加】：色值從上到下為 #292929 — #232323，角度為90°

【投影】：顏色為#323232，角度90°，距離7px，擴展0，大小13px；

復(fù)制圖層B_yuan重命名為Blue_yuan；點擊【編輯】—【自由變換路徑】（快捷鍵Ctrl+T），縮小60%（記得點擊【保持長寬比】），右鍵清除圖層樣式，選擇【混合選項】設(shè)置：

【描邊】：大小1px，位置內(nèi)部，顏色# 111111，

【漸變疊加】：線性漸變，色值從上到下為 # 082441 — # 08101b，角度為90°；

再用【橢圓工具】畫個正圓，大小自定，命名為S_yuan，填充顏色# 0c0c0c，

最后畫鏡頭的高光，一樣用【橢圓工具】畫個正圓，大小自定，命名為guang，填充顏色# FFFFFF，不透明度為10%；

Step05：繪制相機的頂部，用【橢圓工具】和【矩形工具】通過刪除部分節(jié)點、路徑移動和填充顏色等繪制，在此就不一一詳解；

最后繪制相機的小紅點，用【橢圓工具】畫個正圓，大小自定，放在相機的左上角位置，設(shè)置圖層樣式：

【描邊】：大小1px，位置外部，顏色#ff4d42；

【內(nèi)陰影】：顏色#ff483d，角度90°，距離5px，阻塞0，大小8px；

【漸變疊加】：線性漸變，色值從上到下為 # fe574c — #ff463b，角度為90°；

完成圖標(biāo)的繪制。

END：用相同的方法跟技巧完成整套主題圖標(biāo)，應(yīng)該注意整體的一些細(xì)節(jié)（圖片來自設(shè)計師@ElethomHunter），因為這套主題是不規(guī)則形狀的，形狀上無法統(tǒng)一，整體視覺細(xì)節(jié)效果應(yīng)更加謹(jǐn)慎細(xì)膩。