繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

2019-04-11 00:00:00 來源/作者: 自媒體 / 子乘 己有:955人學(xué)習(xí)過

接下來,我們開始做播放的進(jìn)度條,首先用圓角矩形工具畫一個(gè)長條的圓角矩形,設(shè)置顏色為#d0d0d0,并添加一個(gè)圖層樣式。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

用矩形工具,畫一個(gè)矩形,設(shè)置顏色為#53ba56,并創(chuàng)建剪貼蒙版,賦予已播放的部分綠色顯示。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

 

設(shè)置前景色為#ebebeb,畫一個(gè)正圓形,并添加一個(gè)圖層樣式。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

接下來,我們畫一個(gè)小一點(diǎn)的圓,顏色設(shè)置為# 53ba56,并添加一個(gè)圖層樣式。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

接下來,添加時(shí)間進(jìn)度和標(biāo)題信息,這里文字用的顏色為#51c054,并添加了一個(gè)投影。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

接下來,添加一個(gè)頻譜,用矩形工具畫就行了,也沒什么可講的,顏色為#119915,同樣添加一個(gè)投影。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

用矩形工具畫一個(gè)#68ce6b顏色的正方形,并添加一個(gè)漸變疊加。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

 

復(fù)制一層這個(gè)方形按紐圖層,放置到按紐的下層,我們來做陰影,更改顏色為#2b872e,在屬性欄里設(shè)置羽化4像素,并添加一個(gè)蒙版,把頂部和底部的位置擦一下。

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

繪制迷你網(wǎng)頁音樂播放器圖片的PS教程

接下來,我們來添加播放,上一曲,一下曲的圖標(biāo),這個(gè)也是超級簡單,沒什么好說的,形狀不知道怎么折騰的話,請看我們這個(gè)布爾運(yùn)算的教程貼,將圖標(biāo)的顏色設(shè)置為#119915,并添加一個(gè)圖層樣式。