日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps設計音樂播放器教程

ps設計音樂播放器教程

時間:2024-03-06 21:46作者:下載吧人氣:14

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

先看看效果圖

ps設計音樂播放器教程

01.創建一個容器圖層

ps設計音樂播放器教程

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

02.添加投影

ps設計音樂播放器教程

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

03.劃分出按鈕欄

ps設計音樂播放器教程

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

04. 創建按鈕形狀

ps設計音樂播放器教程

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

05. 播放圖標

ps設計音樂播放器教程

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

白色投影 距離1px

06. 快進圖標

ps設計音樂播放器教程

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

07. 倒回圖標

ps設計音樂播放器教程

使用直線工具,按住shift,為快進圖標添加1px的垂直線。按cmd+h來隱藏路徑。選擇移動工具按住opt+cmd,再按住鍵盤的向左鍵來復制圖層。然后cmd+t,右鍵,垂直翻轉。

08. 添加文本

ps設計音樂播放器教程

將倒回圖標位置放好,讓倒回和快進對稱。下一步,添加標題、時間和藝術家名稱,使用字體工具,標題和藝術家要形成對照,讓標題文本圖層的樣色深一點。

09. 字體圖層樣式

ps設計音樂播放器教程

兩行字體圖層樣式均為:投影,距離1px

10. 播放進度條

ps設計音樂播放器教程

選擇圓角矩形工具,半徑100px,選擇合適的位置畫出進度條。要有一種深溝狀的質感,其中要填充較深的顏色。

11. 進度條的圖層樣式

ps設計音樂播放器教程

進圖條圖層樣式:白色投影,距離1px,黑色內陰影,距離1px,不透明度10%。漸變描邊#8C8C8C(頂部)到#DFDEDE(底部)。漸變疊加#CCCCCC(頂部)到#E8E8E8(底部)

12. 當前播放進度條

ps設計音樂播放器教程

復制進度條圖層,用直接選擇工具,選擇三個最右端的錨點。按住shift,再同時按住鍵盤的向左鍵,來讓進度條右邊緣收縮。

13. 當前播放進度條的圖層樣式

ps設計音樂播放器教程

將提一個圖層的圖層樣式拷貝,然后粘貼到當前播放進度條圖層上,去掉圖層樣式中的投影選項。

14.進度球

ps設計音樂播放器教程

選擇橢圓工具,按住Shift,畫出一個進度球。圖層樣式和當前播放進度條一樣,拷貝自第一個容器圖層。(不過這次要保留投影)

15. 仔細調整

ps設計音樂播放器教程

復制進度球圖層,縮小到20%,圖層樣式可拷貝自整體進度條圖層。然后可適當調整描邊。

標簽音樂,播放器,大氣,簡潔,設計,進度,選擇,樣式,工具,1p

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 国产美女作爱全过程免费视频 | 免费视频成人国产精品网站 | a毛片基地免费全部香蕉 | 日韩一级 | 国内精品一区二区三区最新 | 欧美日韩在线观看一区 | 美女免费黄视频 | 韩国美女一级毛片 | 国产成人福利夜色影视 | 日本三级香港三级少妇 | 秘书高跟黑色丝袜国产91在线 | 色www永久免费| 国产精选在线视频 | 国产精品免费看久久久香蕉 | 九九久久国产精品 | 亚洲系列| 精品欧美一区二区在线观看欧美熟 | 久久成人免费观看草草影院 | 免费国产a国产片高清不卡 免费国产不卡午夜福在线 免费国产不卡午夜福在线观看 | 嫩草影院在线观看网站成人 | 欧美视频在线观在线看 | 美女视频黄视大全视频免费网址 | 精品中文字幕一区在线 | 亚洲天堂中文网 | 丰满老熟女毛片 | 日本欧美一区二区三区不卡视频 | 日本私人色多多 | 欧美一区二区在线免费观看 | 中文字幕亚洲精品 | 夜夜操影院 | 初爱视频教程在线观看高清 | 欧美日韩视频免费播放 | 国产精品一区在线播放 | 久久精品亚洲精品一区 | 男吃女下面刺激视频免费 | 免费看片亚洲 | 九九精品视频一区在线 | 夜夜爱夜夜爽夜夜做夜夜欢 | 亚洲国产精久久久久久久 | 久久精品在线免费观看 | 国产成人91一区二区三区 |