PhotoShop繪制音樂播放器界面教程

　　最終效果圖：

　　1、新建一個600*400的文檔，拉一條徑向漸變，如圖所示。

　　2、對背景執行：濾鏡—雜色—添加雜色(數值為105，平均分布，單色)，效果如下：

　　3、新建一層，畫一圓角矩形，半徑5PX，此圓角矩形將會作為播放器框架，對此矩形添加圖層樣式，數值僅供參考，不要做數值黨-o-。

　　效果如下：

　　4、在這裡，我自已做一些質感紋理。

　　此紋理做法：新建一個600*600的文檔，填充一個#767676灰色，然後添加雜色(80，高斯，單色)，然後對其徑向模糊(100，旋轉，最好)，有點點生硬，

　　CTRL+F再來一次，就可以得到下圖效果!

　　把剛才生成的質感紋理拖入到我們原來的文檔裡，模式為疊加，效果如圖：

　　然後再給現在的矩形上下邊加1PX的高光，高光做法：新建一層，用1PX鉛筆畫一直線，給圖層添加蒙版，前景色為黑色，用柔光畫筆(不透明度50%)，

　　去擦直線的兩邊，使兩邊柔弱，效果如下：

　　5、在矩形內兩側，繪制一個如圖所示的形狀，然後對其圖案疊加，在該圖案上添加一些陰影，使其向內部過渡自然，然後再在圖案內部添加兩個高光，

　　效果如下：

　　再添加三個小按鈕，按鈕上的圖片按照下圖中放大的效果去畫，畫好後給小圖片一個向下1PX的投影即可。

　　按鈕的圖層樣式設置：

　　6、在原圓角矩形內側繪制一個矩形並添加漸變樣式，漸變從303A44到4A5968，在該矩形上方加一條1PX白色線，透明度為54%，下方加1PX高光，再在該矩形內

　　加一長條白色區域，透明度為3%，效果如下：

　　CTRL+這個矩形，出現這個矩形的選區，新建一層，用白色柔光畫筆點一下，繪制了該矩形的高光。

　　7、下面添加中心文字，左邊數字我用的字體是DS-Digital，還有一些大家看的明白的我就不詳細說了，不然這個教程明年也寫不完。

　　進度條和拖動按鈕的詳細參數見下，進度條的圖層樣式參數，1PX描邊顏色為#4A545D，就不截 圖了，拖動按鈕加一個內發光和描邊就行了。

　　8、下面用鋼筆工具繪制一個如圖的形狀，圖層樣式：漸變疊加(#4D5C6A-#2C2329-#303A43),描邊(#50575D)，下方邊明顯多余，怎麼刪掉呢?圖層—圖層樣式

　　—創建圖層，可以看到原來的圖層按照不同的樣式被分離了，這個是個很常用的技巧，我們找到它的外描邊圖層，刪除下邊，再給這個外描邊圖層一個描邊的

　　圖層樣式，顏色為#030A12，最後我們再添加一些高光，效果如下：

　　下面我們添加一些播放器按鈕，這些形狀都不難畫，給按鈕一個漸變疊加的圖層樣式，參數：

　　9、做上四個小按鈕，給按鈕漸變疊加，描邊，內發光，圖層—圖層樣式—創建圖層，刪除內發光圖層的下方，只留上邊，添加圖層蒙版，對邊緣稍稍擦一下，

　　使其過渡自然。具體數值就不說了，大家自已發揮，按鈕上方的英文字母為Arial字體。

　　10、下面我們做最後的音量圖標，大家按照放大的圖用鉛筆去畫吧，其圖層樣式與下面播放按鈕的圖層樣式相同，在音量右方繪制一個類似於進度條的形狀，

　　在其上方繪制十個小球，前6個小球的圖層樣式與播放按鈕的圖層樣式相同，後4個添加深灰到灰色的漸變。

　　11、最後我們給播放器做一個倒影，隱藏背景，在最上方新建一層，蓋印圖層(CTRL+ALT+SHIFT+E),垂直翻轉圖層，在兩側加上半圓輪胎狀的修飾，高斯模糊1-2PX，

　　再添加圖層蒙版，拉一條從黑到白的漸變，效果如下：

　　擴展

　　在做好的播放器最上方新建一層，填充任一你喜歡的顏色，圖層混合模式為疊加，教程完畢，祝大家學習愉快!