如何在PS中設(shè)計一個時髦的播放器界面

在這個教程中，你將會學(xué)到如何在adobe Photoshop中設(shè)計一個時髦的音頻播放器界面。
步驟一：
創(chuàng)建600×400像素大的新文檔。
步驟二：
利用徑向漸變工具，從#5e6c78#20282e，填充背景。

 
步驟三：
復(fù)制背景圖層，執(zhí)行濾鏡/雜色/添加雜色。使用這些設(shè)置：數(shù)量（5）；均勻；單色。 單擊確定。 現(xiàn)在圖層不透明度降低至30。 現(xiàn)在您的界面應(yīng)該像這樣。

 
步驟四：
好了，現(xiàn)在我們開始做音頻播放器。用快捷鍵創(chuàng)建圖層，把它命名為"Base"。 使用圓角矩形工具、半徑5px，繪制一個像嵌在圖片里的矩形，并使用這些混合選項。 漸變中的顏色是：#3d4a59；#1c2329；#303a44。 描邊顏色：#191919。

 
步驟五：
現(xiàn)在創(chuàng)建一個新文檔，600x600px。 執(zhí)行文件-填充-50%灰度。然后執(zhí)行濾鏡——噪聲——添加雜色：80；高斯；單色。再執(zhí)行濾鏡-模糊-徑向模糊：100；旋轉(zhuǎn)；最佳。 按Ctrl鍵重復(fù)。現(xiàn)在您的界面應(yīng)該像這樣。

 
步驟六：
將之前做好的圖像復(fù)制到音頻播放器文檔，放在"base"之上。改變混合模式為柔光，不透明度為80%。我們把這個圖層稱為"紋理"。 按住Ctrl鍵點擊"base"圖層縮略圖進(jìn)行縮放，生成selesction。然后Ctrl+Shift+I鍵反選，刪除。

 
步驟七：
創(chuàng)建新圖層， 命名為"高光"。 使用鉛筆工具繪制兩條直線，其中一條在base頂部，一條 在base用一個大的柔軟筆刷擦除直線邊緣，降低不透明度至80%。要使這些圖層組織結(jié)構(gòu)分明，選擇之前做好的三個圖層：base,紋理和高光，然后按 Ctrl+G組合這些圖層。把組合圖層命名為“base”。

 
步驟八：
現(xiàn)在讓我們制作揚聲器的兩邊。 創(chuàng)建新圖層，命名為"揚聲器"。按住Ctrl鍵點擊"base"圖層縮略圖進(jìn)行縮放。然后利用矩形選框工具，按住Shift+Alt鍵創(chuàng)建圖片中的選區(qū)。 選擇#3a3a3a進(jìn)行填充。 復(fù)制圖層，命名為"紋理"。選擇混合選項，添加這些設(shè)置：以 "蜘蛛人模式" 進(jìn)行疊加，混合模式：重疊，范圍12%。

 
步驟九：
創(chuàng)建新圖層， 命名為"高光"。再次利用鉛筆工具繪制一個1px的高光，像下圖中一樣。然后創(chuàng)建一個新圖層，命名為“陰影”。 利用橢圓工具繪制一個選區(qū)，用黑色進(jìn)行填充，執(zhí)行濾鏡/模糊/高斯模糊，半徑5。擦除不需要的部分，可以得到圖片中的效果，降低不透明度至50%。

 
步驟十：
組合之前創(chuàng)建的四個圖層——播放器，紋理，高光和陰影，然后命名為“組合播放器—左”。復(fù)制組合圖層，將它進(jìn)行水平翻轉(zhuǎn)，然后放在右邊，命名為“組合播放器—右”。

 
步驟十一：
讓我們來制作關(guān)閉、最小化、最大化按鈕。創(chuàng)建新圖層，命名為“按鈕”。利用圓角工具，半徑2px，繪制一個小按鈕，用白色進(jìn)行填充。然后添加以下混合選項，漸變顏色#8799#485664-#8799。 描邊顏色#384251。

步驟十二：

創(chuàng)建新圖層，命名為“X”。你可以使用你喜歡的字體或者像我一樣用鉛筆工具繪制。我使用的漸變疊加（深灰-淺灰）和1px繪制陰影來達(dá)到這個效果。

 
步驟十三：
組合之前創(chuàng)建的兩個圖層，命名為“X”。然后通過復(fù)制和改變“X”組合圖層創(chuàng)建另外2個按鈕。我再次利用鉛筆工具來繪制符號。

步驟十四：

現(xiàn)在讓我們來制作屏幕，創(chuàng)建新圖層，命名為“屏幕base”。繪制一個矩形，就像圖片中一樣，然后從 #303a44 到 #4a5968進(jìn)行漸變填充。

步驟十五：

創(chuàng)建一個新圖層，命名為“光澤”。繪制一個小的矩形，用白色進(jìn)行填充，形成透明漸變。降低不透明度至10%。

步驟十六：

再次使用1px白色鉛筆工具繪制周圍的一些重點。 多試幾次，這樣可以得到你要的效果。

步驟十七：

讓我們在屏幕上填充一些內(nèi)容。創(chuàng)新一個新組合，命名為“內(nèi)容”。我將試著使這部分比較簡短，也易于理解。對于每個內(nèi)容都要創(chuàng)建一個圖層。首先，使用 柔軟圓筆刷添加突出計時器的位置。然后，利用數(shù)字的字體樣式輸入“03:59”或其它任何數(shù)字（我使用Digital-7字體，你可以在DaFont獲得 這種樣式）。使用宋體，重復(fù)輸入和Shuffle。Shuffle模式開著，比重復(fù)獲得的光效果亮一些。然后，我利用之前描述過的技巧添加一些小的細(xì)節(jié) ——1px鉛筆工具直線和一些圓形柔軟筆刷獲得光效果。

步驟十八：

創(chuàng)建一個新圖層，命名為“快進(jìn)條”。利用圓角矩形工具，半徑5px，繪制一個細(xì)長的矩形。使用黑色進(jìn)行填充，添加以下混合選項：漸變疊加#303a44#1c2329和1px，描邊顏色#afbbc6、不透明度16%。

步驟十九：

現(xiàn)在還有很多按鈕需要制作。因此再創(chuàng)建一個組合，命名為“按鈕”。首先，為播放、停止和其它按鈕創(chuàng)建一個base。創(chuàng)建新圖層，命名為“按鈕 base：，為了我利用5px的圓角矩形工具獲得圖形效果，然后用鉛筆工具繪制邊框。如果你愿意，你可以簡單地繪制一個圓角矩形。然后添加以下混合選項： 投影-90度（取消“選中全局光”），距離-1，大小-0。內(nèi)陰影：混合模式-正常，顏色-白，角度-90（再次不適用“全局光”），距離-1，大小 -0。漸變疊加：#4d5c6a-#1c2329-#303a43.

步驟二十：

現(xiàn)在，使用鉛筆工具1px和擦除直線的末端來添加一些細(xì)節(jié)。看看圖片思考一下。記住：你必須使用不透明度來獲得更好的效果。

步驟二十一：

為了制作播放、暫停、停止、向前和向后按鈕，我簡單地繪制了矩形和三角形，并合并成向前和向后按鈕。添加漸變疊加生成控制按鈕圖層：#b7d9ed-#458fb2-#b7d9ed.

步驟二十二：

現(xiàn)在，讓我們制作最后4個按鈕——重復(fù)、無序播放、播放列表和均衡器。她們都是一樣的設(shè)置，使用小的圓角矩形和以下混合選項：投影：不透明度 26%，擴展100%，大小1.。內(nèi)陰影：混合模式-正常，顏色-白，不透明度-40%，角度-90，距離-1，choke-100%。漸變疊 加：#3d4a59-#1c2329-#303a44。然后復(fù)制這些按鈕，放置在圖片中相應(yīng)位置。

步驟二十三：

現(xiàn)在添加文字。我使用宋體和以下混合選項：投影：不透明度-42%，角度90，距離-1，大小-1。漸變疊加：#4c5a69-#8495a7.

步驟二十四：

再次使用鉛筆工具添加一些細(xì)節(jié)。

步驟二十五：

現(xiàn)在最后一步是添加音量控制界面，首先，利用鉛筆工具繪制一個圖標(biāo)。添加一些漸變，就好像播放控制按鈕一樣（播放，暫停….）

步驟二十六：

利用圓角矩形工具，半徑5px，繪制一個矩形，然后添加一些漸變，就像快進(jìn)條一樣。

步驟二十七：

繪制十個小圓圈。激活的幾個要像音量控制一樣有梯度，其余的幾個要由簡單的淺灰過度到深灰色。

步驟二十八：

完成最后，添加一些投影效果。除了背景圖層，將所有圖層合并。復(fù)制，添加1，2px的高斯模糊，將其垂直翻轉(zhuǎn)，使用圓形軟橡皮擦工具擦除底部。

結(jié)論

到此為止——你已經(jīng)完成了音頻播放器界面的制作。你可以試著為Xion player制作一個真正的皮膚。但是很多人都想看到教程中將它設(shè)計成工作皮膚，我也如此。

本教程來源：http://www.tutorial9.net/tutorials/photoshop-tutorials/how-to-create-a-sleek-audio-player-interface-in-photoshop/#2

PS:由于教程所需資源服務(wù)器在國外服務(wù)器，導(dǎo)致下載很慢！教程盒子已經(jīng)幫您下載上傳到國內(nèi)服務(wù)器。（本站深度與QQ旋風(fēng)下載合作，所有下載均采用QQ旋風(fēng)高速下載。）

教程所需素材及PSD源文件下載