用PS中的矢量形狀以及圖層樣式打造精致的音樂播放器組件。
界面設(shè)計一定要保持簡約，保證原汁原味的內(nèi)容，一眼即知的操作方式。
音樂組件
通過本文，你將學(xué)習(xí)到：如何使用PS圖層樣式添加流暢精致的質(zhì)感；如何打造細(xì)膩的漸變，讓組件看起來栩栩如生；如何設(shè)計交互性優(yōu)秀的組件按鈕。
教程中完成的組件是灰度圖像，可以在這里下載源文件
01.創(chuàng)建一個容器圖層
圓角矩形，半徑6px。
圖層樣式 漸變疊加 線性 90度 從#（頂部）到#(底部），
添加白色的內(nèi)陰影，距離2px
02.添加投影
給容器圖層添加4px 黑色投影，距離1px，不透明度10%.
添加1px描邊，填充類型為簡便，從淺到深的漸變，頂部顏色為#，底部顏色自行調(diào)節(jié)。
03.劃分出按鈕欄
復(fù)制圖層，選擇路徑選擇工具
(A)，選擇矩形路徑。使用矩形工具畫出如上圖形狀，記住要按住 shift，然后選擇與形狀區(qū)域相交。
04. 創(chuàng)建按鈕形狀
移除掉描邊和投影ps制作音樂播放器界面ps制作音樂播放器界面，漸變疊加稍微柔和一點頂部設(shè)為#,底部設(shè)置為#，使用直線工具，
畫一個條#的線橫跨容器，再畫兩條垂直線，不透明度設(shè)置為6%。
05. 播放圖標(biāo)
自定義形狀工具，畫一個尖銳的三角形，填充為#。通過自由變換旋轉(zhuǎn)90度。
設(shè)置黑色內(nèi)陰影大小1px 距離1px，不透明度40%。
白色投影 距離1px
06. 快進圖標(biāo)
復(fù)制播放圖標(biāo)。使用自由變換，比例縮放為75%，然后使用路徑選擇工具選擇路徑。復(fù)制粘貼，然后按住shift，利用鍵盤的向右鍵再復(fù)制一個小三角型。
07. 倒回圖標(biāo)
使用直線工具，按住shift,為快進圖標(biāo)添加1px的垂直線。
按cmd+h來隱藏路徑。選擇移動工具按住opt+cmd，再按住鍵盤的向左鍵來復(fù)制圖層。然后cmd+t，右鍵，垂直翻轉(zhuǎn)。
08. 添加文本
將倒回圖標(biāo)位置放好，讓倒回和快進對稱。下一步，添加標(biāo)題、時間和藝術(shù)家名稱，使用字體工具，標(biāo)題和藝術(shù)家要形成對照，讓標(biāo)題文本圖層的樣色深一點。
09. 字體圖層樣式
兩行字體圖層樣式均為：投影，距離1px
10. 播放進度條
選擇圓角矩形工具，半徑100px，選擇合適的位置畫出進度條。要有一種深溝狀的質(zhì)感，其中要填充較深的顏色。
11. 進度條的圖層樣式
進圖條圖層樣式：白色投影，距離1px，黑色內(nèi)陰影，距離1px，不透明度10%。漸變描邊#（頂部）到#（底部）。漸變疊加#(頂部）到#（底部）
12. 當(dāng)前播放進度條
復(fù)制進度條圖層，用直接選擇工具，選擇三個最右端的錨點。按住shift，再同時按住鍵盤的向左鍵，來讓進度條右邊緣收縮。
13. 當(dāng)前播放進度條的圖層樣式
將提一個圖層的圖層樣式拷貝，然后粘貼到當(dāng)前播放進度條圖層上，去掉圖層樣式中的投影選項。
14.進度球
選擇橢圓工具，按住Shift，畫出一個進度球。圖層樣式和當(dāng)前播放進度條一樣，拷貝自第一個容器圖層。（不過這次要保留投影）
15. 仔細(xì)調(diào)整
復(fù)制進度球圖層，縮小到20%，圖層樣式可拷貝自整體進度條圖層。然后可適當(dāng)調(diào)整描邊。