音樂圖標,設(shè)計木質(zhì)的音樂播放器主題UI圖標(6)

來源:優(yōu)設(shè)網(wǎng) 作者:P大點S 學(xué)習(xí):11586人次
木質(zhì)紋理直接用素材裁剪一下就能制作出來,制作做出立體感,再繪畫出中間的樂播放器部分即可。跟著練習(xí),做完交作業(yè)。

最終效果

www.theoat.com.cn_02424H2R-0.jpg

1、新建一個1000×1000 px 的畫布,填充顏色#7b7776。

www.theoat.com.cn_02424J291-1.jpg

2、創(chuàng)建一個512×512像素,圓角半徑為90px的圓角矩形,并置入木紋素材,然后在圖層面板中,按住ALT點擊木紋圖層和圓角矩形圖層的交界,創(chuàng)建剪貼蒙版。

www.theoat.com.cn_02424GR2-2.jpg

www.theoat.com.cn_02424MG6-3.jpg
3、給“圓角矩形1”圖層添加內(nèi)陰影和投影。

www.theoat.com.cn_02424H0E-4.jpg

www.theoat.com.cn_02424LK6-5.jpg

4、在“木紋”圖層上面新建一個圖層,填充顏色#5f543f,混合模式改為正片疊底,透明度為70%,并創(chuàng)建剪貼蒙版。

www.theoat.com.cn_02424M428-6.jpg

5、音箱的立面就做好了。接下來創(chuàng)建一個512×460,圓角半徑為90px的圓角矩形,并和“圓角矩形1”左對齊和頂對齊,然后將木紋復(fù)制一層,在新的圓角矩形上建立剪貼蒙版。

如果是Photoshop的版本是CC,就可以直接復(fù)制一層“圓角矩形1”,然后CTRL+T變換大小。CC以前的版本變形的時候會損失圓角,所以只能創(chuàng)建形狀。

www.theoat.com.cn_02424M360-7.jpg

6、給“圓角矩形2”添加內(nèi)陰影和投影。

www.theoat.com.cn_02424Jc5-8.jpg

www.theoat.com.cn_02424Lb2-9.jpg
7、給“木紋 拷貝”圖層疊加一個10%的黑白漸變。

www.theoat.com.cn_02424G133-10.jpg

www.theoat.com.cn_02424K517-11.jpg

8、CTRL+J復(fù)制一層“圓角矩形2”,然后將圖層移動到木紋圖層上面,CTRL+T變換大小,記得同時按住SHIFT和ALT,縮放90%,然后添加圖層樣式。

www.theoat.com.cn_02424M230-12.jpg

www.theoat.com.cn_02424H400-13.jpg

www.theoat.com.cn_02424H924-14.jpg

www.theoat.com.cn_02424HX8-15.jpg
9、接下來做音孔,新建一個256×256的圓,調(diào)整位置,添加圖層樣式。

www.theoat.com.cn_02424G255-16.jpg

www.theoat.com.cn_02424M238-17.jpg

www.theoat.com.cn_02424I310-18.jpg

10、建議CTRL+G給音孔的這個圓建個組,因為等會兒會有很多圖層。

新建一個直徑為11px的橢圓,與“橢圓 1”水平、垂直居中,填充顏色#5f543f。然后用矩形工具手動畫兩根參考線,找到圓心,效果圖如下。

www.theoat.com.cn_02424G020-19.jpg

11、中間的小圓直徑一定要是奇數(shù),不然不能準確找到圓心。

將小圓復(fù)制一層,CTRL+G建組,然后將被拷貝的圓移動到大圓外圍,ALT+CTRL+T變形,按住ALT將旋轉(zhuǎn)中心移動到剛剛找到的圓心處。

www.theoat.com.cn_02424J2N-20.jpg

12、然后旋轉(zhuǎn)到合適位置。需要注意的是,旋轉(zhuǎn)的角度一定要能被360整除。

www.theoat.com.cn_02424L634-21.jpg

13、然后多按幾下CTRL+SHIFT+ALT+T,再次變換,外圈音孔。

www.theoat.com.cn_02424JC8-22.jpg
14、自行調(diào)節(jié)旋轉(zhuǎn)角度,重復(fù)步驟,將音孔做完。做到最后的時候,中間會顯得比較比較密集,可以將圓心處的小圓直徑改為9px。

www.theoat.com.cn_02424H531-23.jpg

15、音孔做好了,將參考線刪掉,接著做旋鈕。新建一個橢圓,填充顏色#ebebeb,移動到合適位置,添加圖層樣式。

www.theoat.com.cn_02424I512-24.jpg

www.theoat.com.cn_02424JP2-25.jpg

www.theoat.com.cn_02424H132-26.jpg

16、復(fù)制一層“橢圓 3”,CTRL+T變形,按住SHIFT+ALT等比縮放85%,添加圖層樣式。

www.theoat.com.cn_02424GY2-27.jpg

www.theoat.com.cn_02424KR8-28.jpg

www.theoat.com.cn_02424K930-29.jpg
17、然后復(fù)制一層“橢圓3 拷貝”,將填充透明度改為0,添加內(nèi)陰影。

www.theoat.com.cn_02424J534-30.jpg

www.theoat.com.cn_02424I964-31.jpg

18、右邊的旋鈕做好了,復(fù)制到左邊,整個圖標就差不多做好了。

www.theoat.com.cn_02424LF4-32.jpg

19、不過如果仔細看,會發(fā)現(xiàn)這個圖標的木紋還有問題,所以最后來做一下簡單的透視。

首先是選擇比較亮的木紋,CTRL+T,右鍵選擇“透視”,調(diào)整成這個樣子。

www.theoat.com.cn_02424J405-33.jpg

20、然后用同樣的辦法調(diào)整比較暗的木紋。

www.theoat.com.cn_02424M5F-34.jpg

最終效果:

www.theoat.com.cn_02424H2R-0.jpg

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
楊布布2018-11-30 03:28
我的作業(yè):
2016-08-25 11:35
PS教程自學(xué)網(wǎng)網(wǎng)友2016-08-25 11:08
葉朝陽2016-07-25 05:10
葉朝陽2016-07-25 05:07
www2016-06-22 02:07
中間圓里的小孔怎么做啊、怎么能讓它有規(guī)律的復(fù)制啊’
www2016-06-22 02:06
中間圓里的小孔怎么做啊、怎么能讓它有規(guī)律的復(fù)制啊’
丸子2016-04-10 09:22
丸子2016-04-10 09:04
tidy2016-03-25 12:03
UI教程太棒了,很詳細,新手都會做。
tidy2016-03-25 12:00
UI教程太棒了,很詳細,新手都會做。
沙河燒星2016-03-18 09:23
好教程
陪君醉笑五千場2016-03-18 09:23
好教程
初遇hope2016-03-18 09:23
好教程
畫眉彎彎_z2016-03-18 09:23
好教程

關(guān)注大神微博加入>>

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