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

通過本教程你將學(xué)習(xí)到如何使用PS圖層樣式添加流暢精致的質(zhì)感;如何打造細(xì)膩的漸變，讓組件看起來栩栩如生;如何設(shè)計(jì)交互性優(yōu)秀的組件按鈕。用PS中的矢量形狀以及圖層樣式打造精致的音樂播放器組件。界面設(shè)計(jì)一定要保持簡約，保證原汁原味的內(nèi)容，一眼即知的操作方式。

先看看效果圖

01.創(chuàng)建一個(gè)容器圖層

圓角矩形，半徑6px。圖層樣式 漸變疊加 線性 90度 從#F9F9FA(頂部)到#EFEFEF(底部)，添加白色的內(nèi)陰影，距離2px

02.添加投影

給容器圖層添加4px 黑色投影，距離1px，不透明度10%。添加1px描邊，填充類型為簡便，從淺到深的漸變，頂部顏色為#C8C8C8，底部顏色自行調(diào)節(jié)。

03.劃分出按鈕欄

復(fù)制圖層，選擇路徑選擇工具(A)，選擇矩形路徑。使用矩形工具畫出如上圖形狀，記住要按住 shift，然后選擇與形狀區(qū)域相交。

04. 創(chuàng)建按鈕形狀

移除掉描邊和投影，漸變疊加稍微柔和一點(diǎn)頂部設(shè)為#F0EFEF,底部設(shè)置為#F9FAFA，使用直線工具，畫一個(gè)條#DFDFDF的線橫跨容器，再畫兩條垂直線，不透明度設(shè)置為6%。

05. 播放圖標(biāo)

自定義形狀工具，畫一個(gè)尖銳的三角形，填充為#BABABA。通過自由變換旋轉(zhuǎn)90度。設(shè)置黑色內(nèi)陰影大小1px 距離1px，不透明度40%。

白色投影 距離1px

06. 快進(jìn)圖標(biāo)

復(fù)制播放圖標(biāo)。使用自由變換，比例縮放為75%，然后使用路徑選擇工具選擇路徑。復(fù)制粘貼，然后按住shift，利用鍵盤的向右鍵再復(fù)制一個(gè)小三角型。

07. 倒回圖標(biāo)