ps設(shè)計(jì)音樂播放器詳細(xì)教程(7)

之前就有人做過(guò)這個(gè)教程但好多新手都看不明白，所以我在這里又重新整理一下希望新手可以完全看懂！ 與原教程的思路有所不同希望你可以找到自己的靈感同時(shí)希望大家批評(píng),但不要罵人啊

先看看效果：

具體的制作步驟如下：

1,新建一個(gè)650×450 px的圖層，分辨率為300，背景顏色為白色，顏色模式為RGB。

2、使用徑向漸變填充背景，顏色設(shè)置為#5e6c78 ——#20282e

3、復(fù)制背景圖層，之后進(jìn)行濾鏡-雜色-添加雜色，設(shè)置如下：數(shù)量：1%；選擇單色。下降圖片透明度到50%

4、制作主界面，創(chuàng)建一個(gè)新圖層，（按Ctrl + Shift + N）并命名為"主界面"，再使用圓角矩形工具，設(shè)置半徑5px， 畫出畫面中一樣的矩形，并使用這些混合選項(xiàng)。設(shè)置參數(shù)按照?qǐng)D片所示。顏色漸變參數(shù)為：＃3d4a59;＃1c2329;＃303a44，描邊顏色為#191919。

【1】創(chuàng)建一個(gè)如下參數(shù)的矩形要記得設(shè)置半徑5PX,【先找到圓角矩形，然后點(diǎn)擊畫布就彈出對(duì)話框了】

【2】?jī)?nèi)陰影看清參數(shù)哦！參數(shù)不對(duì)到時(shí)候你就一塌糊涂了

【3】設(shè)置漸變顏色，記得像我的那樣你懂得！

【4】然后再來(lái)個(gè)描邊1PX

5、再次新建一個(gè)文檔，寬高700 × 600px。 充填50％灰色。 然后，添加雜色，參數(shù)設(shè)置：80％;高斯分布，單色。 然后再選擇濾鏡模糊-徑向模糊：旋轉(zhuǎn)參數(shù)為100。 之后可以根據(jù)自己的感覺，在執(zhí)行�！疚乙槐榫秃昧恕俊�1】圖層面板下面有一個(gè)黑白小圖標(biāo)【點(diǎn)擊就可以填顏色了】

【2】濾鏡-添加雜色

【3】濾鏡-模糊-徑向模糊【要最好】確定回到第一個(gè)文檔。

6、 按Ctrl 點(diǎn)擊"主界面縮略圖"圖層，會(huì)出現(xiàn)選區(qū)，這是我們將剛才做好第二個(gè)文檔拖進(jìn)來(lái)，然后按Ctrl + Shift +I反選，再按Ctrl+X鍵刪除， 更改混合模式為柔光，不透明度為30％。圖層命名為 "主界面背景".

7，得到此效果：

8、創(chuàng)建新圖層。將它命名為"上下高光"，再用直線工具畫兩條線，分別放置在主界面圖層的視頻界面頂端和底部。執(zhí)行模糊-動(dòng)感模糊 -這里參數(shù)你自己看好就行。你可以更改不透明度的參數(shù)來(lái)裝修。

9、再創(chuàng)建新圖層。將它命名為"端頭布景"。然后選擇矩形工具，＃3a3a3a填充它。然后在進(jìn)入混合模式設(shè)置參數(shù)！

【1】注意參數(shù)哦

【2】點(diǎn)擊小齒輪，找到藝術(shù)表面。

【3】縮放設(shè)為15.完成后復(fù)制一個(gè)到另一端即可。

10、創(chuàng)建一個(gè)新層，命名為"突出"，使用直線工具畫一條短線，大概是主界面的一般即可，濾鏡-模糊-動(dòng)感模糊。 完成后復(fù)制一次到另一端。 然后創(chuàng)建一個(gè)新圖層，命名為"影子"。使用橢圓工具，畫一個(gè)橢圓，填黑色。模糊-高斯模糊，降低透明度50%既可以 使用選區(qū)工具將不要的刪除 ，復(fù)制一個(gè)到另一端。大家可以適當(dāng)?shù)母鶕?jù)感覺調(diào)整。

11，之后創(chuàng)建，最小化和最大化及關(guān)閉按鈕。創(chuàng)建新層，命名為"按鈕"。再使用圓角矩形工具，設(shè)置半徑為2px，畫一個(gè)小按鈕，它填充白色。圖層漸變的顏色為：＃8799ab-＃485664-＃8799ab 描邊顏色為＃384251。

12、創(chuàng)建一個(gè)新層，命名為"X"。為了讓X更好看，你可以使用你喜歡的字體或用鉛筆繪制工具，之后再添加一個(gè)漸變 （暗灰色，淺灰色）和1px陰影得到這個(gè)效果。同樣的方法創(chuàng)建另外兩個(gè)按鈕。

13、創(chuàng)建新層，畫一個(gè)像圖片中的矩形，填充漸變顏色為＃303a44—— ＃4a596812

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

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

16、文字添加，大家可以根據(jù)自己的想法修改，而細(xì)節(jié)的處理，還是使用前面常用的方法，動(dòng)感模糊添加細(xì)節(jié)高光。

17、創(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。

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

19、用1px鉛筆畫四條直線，【記住鉛筆畫直線要按shift】擦去直線的末端，注意透明度變化�？唇貓D自己想象該怎么細(xì)致就怎么整。

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

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

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

23、最后就是音量控制了。用1px鉛筆畫出喇叭圖標(biāo)【選擇放大鏡工具，放大圖層，再用鉛筆去點(diǎn)，接著進(jìn)行漸變處理， 顏色設(shè)置為#b7d9ed-#458fb2-#b7d9ed�！具@里告示大家一個(gè)秘密，你可將圖層剛才播放鍵組里的那個(gè)混合效果直接拖到小喇叭上。記住先按住alt然后找到播放鍵組后有【FX】拖到你想去的地方！

24、用半徑5px的圓角矩形工具畫音量條，用漸變工具填充顏色，設(shè)置與進(jìn)度條一致。 畫10個(gè)小圓圈。激活的小圓用與喇叭一樣的漸變填充，其他的填充簡(jiǎn)單的黑灰漸變。再用鉛筆工具進(jìn)行一些細(xì)節(jié)處理，主要是高光處理。

27、最后我們合并圖層【背景除外啊】如果你想做個(gè)特效或是倒影什么的，那看你自己了。最后希望大家可以理解。不明白的大家想我提問，有時(shí)間我就回復(fù)大家。 感謝你的閱讀！