ps設計音樂播放器教程

來源:優(yōu)設 作者:佚名 學習:11570人次

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

先看看效果圖

Photoshop設計簡潔大氣的音樂播放器

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

Photoshop設計簡潔大氣的音樂播放器

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

02.添加投影

Photoshop設計簡潔大氣的音樂播放器

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

03.劃分出按鈕欄

Photoshop設計簡潔大氣的音樂播放器

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

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

Photoshop設計簡潔大氣的音樂播放器

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

05. 播放圖標

Photoshop設計簡潔大氣的音樂播放器

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

白色投影 距離1px

06. 快進圖標

Photoshop設計簡潔大氣的音樂播放器

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

07. 倒回圖標

Photoshop設計簡潔大氣的音樂播放器

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!