界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
先看看最終效果:
這個(gè)界面粗看好像很復(fù)雜,其實(shí)步驟挺簡單的,主要還是運(yùn)用了圖層樣式來制作出整體效果,喜歡設(shè)計(jì)的可以跟著教程練習(xí)一下,還可以嘗試一下其他的顏色,做完交作業(yè)。
當(dāng)然,直接用色相之類的來修改顏色,我并不贊同,原因嘛,自己想!其實(shí)做完一個(gè)顏色后,直接在源文件里更改圖層樣式,換個(gè)色也花不了多長時(shí)間的。
今天,我所提供的PSD里,我們做了四個(gè)顏色,綠色,藍(lán)色,灰色,紅色,有興趣的朋友可以試試別的顏色。
我這里的教程用的綠色來示范!
首先,新建個(gè)文檔,我用的是400X300像素。創(chuàng)建一個(gè)漸變調(diào)整層,做個(gè)徑向漸變,顏色參數(shù)如下圖。
用圓角矩形工具畫一個(gè)320X125的圓角矩形,顏色無所謂,我們一會會更改。
為這個(gè)圓角矩形添加一個(gè)圖層樣式。
OK,接下來,我們復(fù)制一層圓角矩形這個(gè)圖層,右鍵清除掉圖層樣式,按住SHIFT畫一個(gè)矩形,SHIFT這里是增加的意思,保證我們新畫的矩形和圓角矩形是一個(gè)形狀圖層。 然后,將形狀的路徑操作更改為與形狀區(qū)域相交,這樣我們就得到了我們想要的下半部分的形狀了。將形狀顏色設(shè)置為#68ce6b。
下面,我們?yōu)檫@個(gè)下半部分的形狀添加一個(gè)圖層樣式。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- P大點(diǎn)S
- ps網(wǎng)頁設(shè)計(jì)
- 播放按鈕
- 界面設(shè)計(jì)
- 播放器
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 網(wǎng)頁圖片,設(shè)計(jì)一個(gè)網(wǎng)頁登陸框圖片教程
- 設(shè)計(jì)知識,新手詳情頁制作誤區(qū)
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁面圖片
- 圓角教程,教你制作網(wǎng)頁常用的圓角矩形邊角
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
- 圖標(biāo)設(shè)計(jì),ps設(shè)計(jì)六邊形圖標(biāo)實(shí)例
推薦教程
- Photoshop做網(wǎng)站的思路
- banner教程,設(shè)計(jì)一個(gè)簡單的母親節(jié)Banner教程
- 網(wǎng)頁設(shè)計(jì)實(shí)例:女性購物網(wǎng)站導(dǎo)航條制作
- Photoshop制作立體界面
- ps制作3D立體Logo網(wǎng)站抬頭網(wǎng)頁設(shè)計(jì)教
- ps設(shè)計(jì)游戲網(wǎng)頁頭版教程
- Photoshop制作Vista菜單
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- photoshop教程:設(shè)計(jì)絲帶風(fēng)格的網(wǎng)頁導(dǎo)航
- photoshop設(shè)計(jì)黑色網(wǎng)站導(dǎo)航