Photoshop設(shè)計(jì)質(zhì)感播放器界面教程

2011-10-11 15:54:44來源:新勺網(wǎng)作者:

這個(gè)教程就是教大家用Photoshop創(chuàng)建一個(gè)時(shí)髦音頻播放器界面,也是新勺網(wǎng)特別推薦給大家的一個(gè)教程,教程中的高光處理是重點(diǎn),也是一些常用軟件界面制作的處理方法。希望對(duì)大家有所幫助。

12、創(chuàng)建一個(gè)新層,命名為“X”。為了讓X更好看,你可以使用你喜歡的字體或用鉛筆繪制工具,之后再添加一個(gè)漸變(暗灰色,淺灰色)和1px陰影得到這個(gè)效果。

\

13、同樣的方法創(chuàng)建另外兩個(gè)按鈕。

\

14、創(chuàng)建新層,畫一個(gè)像圖片中的矩形,填充漸變顏色為#303a44—— #4a5968。

\

15、創(chuàng)建一個(gè)新層。將它命名為“光澤”。再繪制一個(gè)小矩形,填充白色透明度降低到10%。

\

16、按照之前的方法繪制高光,透明度大家根據(jù)自己的感覺設(shè)置即可以。

\

17、文字添加,大家可以根據(jù)自己的想法修改,我使用的字體是Digital-7,大家可以在DaFont下載到,而細(xì)節(jié)的處理,還是使用前面常用的方法,用鉛筆工具畫1px線條來添加細(xì)節(jié)高光。

\

\

18、創(chuàng)建一個(gè)新層。將它命名為“進(jìn)度條”。再使用圓角矩形工具,半徑設(shè)置為5px,繪制一個(gè)細(xì)長(zhǎng)的矩形,黑色填充并添加圖層樣式:漸變疊加顏色設(shè)置為#303a44-#1c2329;添加描邊1px,顏色為#afbbc6,不透明度為16%。再創(chuàng)建一個(gè)新圖層,命名為“進(jìn)度條旋鈕”。畫出一個(gè)小矩形,并填充黑色。圖層樣式選項(xiàng)為:內(nèi)陰影:混合模式正常,顏色-白色,距離0,大小1,漸變疊加:#5c6977 -#212a30 -#5c6977; 外描邊:1px,顏色#222b31。

\

19、接下來要制作好多按鈕。創(chuàng)建一個(gè)新組,命名為“Buttons”。首先制作播放器基本按鈕,如暫停鍵等。建一個(gè)新圖層,命名“Button base”。用半徑為5px的圓角矩形工具畫出外框,然后描邊(弧線可重復(fù)使用圓角工具完成)。選擇圖層樣式-投影:角度90(使用全局光),距離1,大小0;再勾選內(nèi)陰影:混合模式為正常,顏色白色,角度90(不使用全局光),距離1,大小0;選擇漸變疊加:#4d5c6a-#1c2329-#303a43.

\

20、用1px鉛筆畫四條直線,擦去直線的末端,注意透明度變化?唇貓D自己想象該怎么細(xì)致就怎么整。

\

21、制作播放、暫停、停止、前進(jìn)和后退按鈕。用矩形和三角形工具簡(jiǎn)單的畫出,在這個(gè)圖層添加漸變疊加效果,顏色分別為#b7d9ed-#458fb2-#b7d9ed。

\

22、現(xiàn)在做最后四個(gè)按鈕:重復(fù)、隨機(jī)、播放單和均衡器。制作每一個(gè)按鈕的步驟都差不多,用圓角工具畫出大致形狀,添加圖層樣式:投影-透明度26%,擴(kuò)展 100%,大小1;內(nèi)陰影-模式選正常,顏色白色,透明度40%,角度90,距離1,阻塞100%,大小0;漸變疊加 -#3d4a59-#1c2329-#303a44。復(fù)制按鈕并如圖放置。

\

23、現(xiàn)在添加文字。選擇Arial字體,再進(jìn)行圖層樣式處理:投影-透明度42%,角度90,距離1,大小0.漸變疊加- #4c5a69-#8495a7。

\