ps設(shè)計(jì)播放器界面(2)
四、選擇線條工具(U),在播放按鈕右側(cè)畫一條1個(gè)像素寬的線條,命名為”left”,應(yīng)用漸變疊加(Gradient Overlay),顏色從#252727到#3c3e40。將此線條復(fù)制一遍(Ctrl+J),命名為”right”,向右側(cè)移動(dòng)1個(gè)像素,應(yīng)用漸變疊加,顏色從#333535到#515356,這樣就做好一條有凹陷效果的分隔線。按住Ctrl鍵,在圖層面板中同時(shí)選擇這兩個(gè)圖層,按下Ctrl+G,將兩圖層放入一個(gè)文件夾中,命名為”sep”。最終效果如下圖:
五、新建一個(gè)圖層,命名為”track”,選擇矩形工具(U),畫一個(gè)寬222像素,高7個(gè)像素的矩形框。顏色選擇#262929。按住Ctrl鍵,在圖層面板中同時(shí)選取”base”和”track”圖層,選擇移動(dòng)工具(V),在工具欄屬性中,點(diǎn)擊垂直居中按鈕,將矩形垂直放置于播放器的中間。如下圖:
之后給”track”圖層應(yīng)用如下圖層樣式,其中投影添加的實(shí)際上是高光效果,而內(nèi)陰影添加的是凹陷效果。
最終效果如下圖:
六、新建一個(gè)圖層,命名為”buffer”,選擇矩形工具(U),畫一個(gè)200像素寬,5像素高的矩形,顏色選擇#464849。任然選擇移動(dòng)工具,將其和”track”圖層垂直居中。這樣緩沖條的創(chuàng)建就完成了。效果如下圖:
七、接下來是播放進(jìn)度條。先來創(chuàng)建一個(gè)自定義圖案。在Photoshop中新建一個(gè)文檔(Ctrl+N),寬度6個(gè)像素,高度6個(gè)像素,背景設(shè)置為透明。如下圖所示:
將創(chuàng)建好的文檔放大到2000%,新建一個(gè)圖層,選擇鉛筆工具(B),1個(gè)像素大小,畫出如下圖形,然后選擇編輯(Edit)>自定義圖案(Define Pattern)命令,命名為”progress pattern”,保存。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 播放按鈕
- 設(shè)計(jì)
- 工具
- 效果
- 界面設(shè)計(jì)
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo),設(shè)計(jì)旋轉(zhuǎn)風(fēng)格播放圖標(biāo)教程
- 播放器圖標(biāo),設(shè)計(jì)勃朗風(fēng)格音樂播放器圖標(biāo)
- 音樂圖標(biāo),設(shè)計(jì)木質(zhì)的音樂播放器主題UI圖標(biāo)
- UI知識(shí),安卓和蘋果的界面設(shè)計(jì)之尺寸規(guī)范
- UI知識(shí),UI設(shè)計(jì)版式修改教程
- APP展示圖,教你怎么用PS制作APP的界面圖片
- UI教程,ps設(shè)計(jì)音樂主題UI圖標(biāo)實(shí)例
- UI設(shè)計(jì)知識(shí),基礎(chǔ)界面制作&細(xì)節(jié)把握
- 如何設(shè)計(jì)一款UI界面
推薦教程
- ps設(shè)計(jì)圓點(diǎn)可愛ICON圖標(biāo)
- 手機(jī)圖標(biāo),設(shè)計(jì)iPhoneES手機(jī)主題圖標(biāo)
- ps設(shè)計(jì)禮盒UI圖標(biāo)
- ps設(shè)計(jì)打印機(jī)UI圖標(biāo)教程
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- ps設(shè)計(jì)暗黑風(fēng)格游戲UI教程
- UI教程:設(shè)計(jì)電池icon
- 切圖教程,app切圖命名總結(jié)
- 相機(jī)圖標(biāo),設(shè)計(jì)白色相機(jī)UI圖標(biāo)
- ps cc設(shè)計(jì)唱片UI圖標(biāo)教程