播放器界面制作
來源:不詳
作者:佚名
學(xué)習(xí):821人次
播放器界面制作作者:夢貓貓
前不久做了一個(gè)WINXP的播放器的界面,有朋友說做得還不錯(cuò)!讓我把過程寫出來,做一個(gè)教程!呵呵,其實(shí)做得也不怎么樣啦。。∫螅簩S至少熟悉一點(diǎn),不然就會不知道我在說什么啦!
下圖為完成稿:
1、新建一個(gè)600*300,背景為白色的圖象文件。
2、照下圖建四個(gè)圖層,利用圓形選擇工具 漸變工具 圖層效果在各圖層制作下面的各層圖象。
圖層4圖層效果參數(shù)分別為:
3、利用通道跟鋼筆工具建立如下圖選區(qū)。
4、通過上面幾個(gè)步驟,這個(gè)圖形現(xiàn)在已經(jīng)完成30%了。。∠旅胬玫谌浇⒌倪x區(qū),新建圖層5,利用線性漸變工具(設(shè)置前景色為白色,背景色為#718A99,沿120度角做漸變),并利用筆刷做局部陰影效果,結(jié)果如下圖
5、這時(shí)候在最頂層新建圖層六,利用圓形選取工具做出下面的圖層效果:
6、新建圖層7,按其它教程所教的方法制作一個(gè)球體,效果如下:
7、制作標(biāo)題條:
8、下面開始制作其它小部件了,完成效果分別如下
(圖層模式為柔光)
在圖層5下新建一層,使用選擇工具制作左面的金屬蓋板,并運(yùn)用筆刷工具制作陰影效果。ńY(jié)果如上圖)
新建圖層,并置頂,可利用鉛筆工具或直線選取工具制作播放按鈕,結(jié)果如上圖
制作裝飾小圓點(diǎn)(可先制作一個(gè)稍大的圓點(diǎn),覺得效果可以后,再利用圖象變形縮小圖象,并復(fù)制該圖層至八個(gè),調(diào)整好在圖象中的位置后,合并圖層),結(jié)果如上圖
制作微軟標(biāo)志(也可以直接用網(wǎng)頁設(shè)計(jì)素材里的),不過呢,我還是把自己制作這個(gè)的過程寫出來。利用鋼筆工具制作一個(gè)四邊形并調(diào)整上下兩邊成曲線,建立選區(qū),并保存選區(qū)備用。再利用漸變制作旗幟波動陰影效果!用同樣的方法制作另外三個(gè),調(diào)整好位置后合并圖層,結(jié)果如下圖
下面把其它部分全做出來!方法跟上面的差不多,也就不重復(fù)說了!
如果覺得有什么地方效果不理想,可以自己試著調(diào)試一下,方法同上!另外因?yàn)檫@個(gè)教程是后來才做的!所以原始圖跟教程里的圖略有出入!簡單的,我們教你,深奧的,你來分享
前不久做了一個(gè)WINXP的播放器的界面,有朋友說做得還不錯(cuò)!讓我把過程寫出來,做一個(gè)教程!呵呵,其實(shí)做得也不怎么樣啦。。∫螅簩S至少熟悉一點(diǎn),不然就會不知道我在說什么啦!
下圖為完成稿:
1、新建一個(gè)600*300,背景為白色的圖象文件。
2、照下圖建四個(gè)圖層,利用圓形選擇工具 漸變工具 圖層效果在各圖層制作下面的各層圖象。
圖層4圖層效果參數(shù)分別為:
3、利用通道跟鋼筆工具建立如下圖選區(qū)。
4、通過上面幾個(gè)步驟,這個(gè)圖形現(xiàn)在已經(jīng)完成30%了。。∠旅胬玫谌浇⒌倪x區(qū),新建圖層5,利用線性漸變工具(設(shè)置前景色為白色,背景色為#718A99,沿120度角做漸變),并利用筆刷做局部陰影效果,結(jié)果如下圖
5、這時(shí)候在最頂層新建圖層六,利用圓形選取工具做出下面的圖層效果:
6、新建圖層7,按其它教程所教的方法制作一個(gè)球體,效果如下:
7、制作標(biāo)題條:
8、下面開始制作其它小部件了,完成效果分別如下
(圖層模式為柔光)
在圖層5下新建一層,使用選擇工具制作左面的金屬蓋板,并運(yùn)用筆刷工具制作陰影效果。ńY(jié)果如上圖)
新建圖層,并置頂,可利用鉛筆工具或直線選取工具制作播放按鈕,結(jié)果如上圖
制作裝飾小圓點(diǎn)(可先制作一個(gè)稍大的圓點(diǎn),覺得效果可以后,再利用圖象變形縮小圖象,并復(fù)制該圖層至八個(gè),調(diào)整好在圖象中的位置后,合并圖層),結(jié)果如上圖
制作微軟標(biāo)志(也可以直接用網(wǎng)頁設(shè)計(jì)素材里的),不過呢,我還是把自己制作這個(gè)的過程寫出來。利用鋼筆工具制作一個(gè)四邊形并調(diào)整上下兩邊成曲線,建立選區(qū),并保存選區(qū)備用。再利用漸變制作旗幟波動陰影效果!用同樣的方法制作另外三個(gè),調(diào)整好位置后合并圖層,結(jié)果如下圖
下面把其它部分全做出來!方法跟上面的差不多,也就不重復(fù)說了!
如果覺得有什么地方效果不理想,可以自己試著調(diào)試一下,方法同上!另外因?yàn)檫@個(gè)教程是后來才做的!所以原始圖跟教程里的圖略有出入!簡單的,我們教你,深奧的,你來分享
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類陰影教程
- 陰影效果,制作網(wǎng)頁常見的圖片投影效果
- 設(shè)計(jì)知識,新手詳情頁制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- banner教程,超簡單三步設(shè)計(jì)一個(gè)BANNER
- 圖標(biāo)設(shè)計(jì),ps設(shè)計(jì)六邊形圖標(biāo)實(shí)例
- banner教程,用ps制作960*90的廣告圖片
- 做投影,教你做扁平風(fēng)格長陰影
- 網(wǎng)頁設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
- ps設(shè)計(jì)游戲網(wǎng)頁頭版教程
推薦教程
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- Photoshop制作網(wǎng)站導(dǎo)航圖
- 陰影效果,教你制作各類陰影教程
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 界面設(shè)計(jì),設(shè)計(jì)音樂播放器界面圖片
- 用ps制作豎列導(dǎo)航
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- banner教程,用ps制作960*90的廣告圖片
- Photoshop制作網(wǎng)頁搜索條
關(guān)注大神微博加入>>
網(wǎng)友求助,請回答!