音樂圖標(biāo),設(shè)計(jì)木質(zhì)的音樂播放器主題UI圖標(biāo)(6)
最終效果
1、新建一個(gè)1000×1000 px 的畫布,填充顏色#7b7776。
2、創(chuàng)建一個(gè)512×512像素,圓角半徑為90px的圓角矩形,并置入木紋素材,然后在圖層面板中,按住ALT點(diǎn)擊木紋圖層和圓角矩形圖層的交界,創(chuàng)建剪貼蒙版。
3、給“圓角矩形1”圖層添加內(nèi)陰影和投影。
4、在“木紋”圖層上面新建一個(gè)圖層,填充顏色#5f543f,混合模式改為正片疊底,透明度為70%,并創(chuàng)建剪貼蒙版。
5、音箱的立面就做好了。接下來(lái)創(chuàng)建一個(gè)512×460,圓角半徑為90px的圓角矩形,并和“圓角矩形1”左對(duì)齊和頂對(duì)齊,然后將木紋復(fù)制一層,在新的圓角矩形上建立剪貼蒙版。
如果是Photoshop的版本是CC,就可以直接復(fù)制一層“圓角矩形1”,然后CTRL+T變換大小。CC以前的版本變形的時(shí)候會(huì)損失圓角,所以只能創(chuàng)建形狀。
6、給“圓角矩形2”添加內(nèi)陰影和投影。
7、給“木紋 拷貝”圖層疊加一個(gè)10%的黑白漸變。
8、CTRL+J復(fù)制一層“圓角矩形2”,然后將圖層移動(dòng)到木紋圖層上面,CTRL+T變換大小,記得同時(shí)按住SHIFT和ALT,縮放90%,然后添加圖層樣式。
9、接下來(lái)做音孔,新建一個(gè)256×256的圓,調(diào)整位置,添加圖層樣式。
10、建議CTRL+G給音孔的這個(gè)圓建個(gè)組,因?yàn)榈葧?huì)兒會(huì)有很多圖層。
新建一個(gè)直徑為11px的橢圓,與“橢圓 1”水平、垂直居中,填充顏色#5f543f。然后用矩形工具手動(dòng)畫兩根參考線,找到圓心,效果圖如下。
11、中間的小圓直徑一定要是奇數(shù),不然不能準(zhǔn)確找到圓心。
將小圓復(fù)制一層,CTRL+G建組,然后將被拷貝的圓移動(dòng)到大圓外圍,ALT+CTRL+T變形,按住ALT將旋轉(zhuǎn)中心移動(dòng)到剛剛找到的圓心處。
12、然后旋轉(zhuǎn)到合適位置。需要注意的是,旋轉(zhuǎn)的角度一定要能被360整除。
13、然后多按幾下CTRL+SHIFT+ALT+T,再次變換,外圈音孔。
14、自行調(diào)節(jié)旋轉(zhuǎn)角度,重復(fù)步驟,將音孔做完。做到最后的時(shí)候,中間會(huì)顯得比較比較密集,可以將圓心處的小圓直徑改為9px。
15、音孔做好了,將參考線刪掉,接著做旋鈕。新建一個(gè)橢圓,填充顏色#ebebeb,移動(dòng)到合適位置,添加圖層樣式。
16、復(fù)制一層“橢圓 3”,CTRL+T變形,按住SHIFT+ALT等比縮放85%,添加圖層樣式。
17、然后復(fù)制一層“橢圓3 拷貝”,將填充透明度改為0,添加內(nèi)陰影。
18、右邊的旋鈕做好了,復(fù)制到左邊,整個(gè)圖標(biāo)就差不多做好了。
19、不過如果仔細(xì)看,會(huì)發(fā)現(xiàn)這個(gè)圖標(biāo)的木紋還有問題,所以最后來(lái)做一下簡(jiǎn)單的透視。
首先是選擇比較亮的木紋,CTRL+T,右鍵選擇“透視”,調(diào)整成這個(gè)樣子。
20、然后用同樣的辦法調(diào)整比較暗的木紋。
最終效果:
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡(jiǎn)約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
推薦教程
- ps日歷圖標(biāo)
- UI知識(shí),做UI的工作方式與流程
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- UI教程:設(shè)計(jì)電池icon
- PS繪制磚塊ICO圖標(biāo)
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- ps設(shè)計(jì)盒子圖標(biāo)