Photoshop設(shè)計(jì)質(zhì)感播放器界面教程

2011-10-11 15:54:44來源:新勺網(wǎng)作者:

這個(gè)教程就是教大家用Photoshop創(chuàng)建一個(gè)時(shí)髦音頻播放器界面,也是新勺網(wǎng)特別推薦給大家的一個(gè)教程,教程中的高光處理是重點(diǎn),也是一些常用軟件界面制作的處理方法。希望對(duì)大家有所幫助。

這個(gè)教程就是教大家用Photoshop創(chuàng)建一個(gè)時(shí)髦音頻播放器界面,也是新勺網(wǎng)特別推薦給大家的一個(gè)教程,教程中的高光處理是重點(diǎn),也是一些常用軟件界面制作的處理方法。希望對(duì)大家有所幫助。

播放器的都是由一些細(xì)小的元素構(gòu)成,而且每個(gè)元素又有水晶及金屬質(zhì)感,制作的時(shí)候需要細(xì)心。除了這些顏色的搭配也很重要,制作的每個(gè)元素都要融入到主體里面,這樣整體效果就美觀很多。

最終效果 

\
 

1、創(chuàng)建一個(gè) 600×400 px的圖層。

2、使用放射式漸變填充背景,顏色設(shè)置為#5e6c78 - #20282e。

\

3、復(fù)制背景圖層,之后進(jìn)行濾鏡-雜色-添加雜色,設(shè)置如下:數(shù)量:5%;選擇單色。下降圖片透明度到30%。

\

4、作主界面,創(chuàng)建一個(gè)新圖層,(按Ctrl + Shift + N)并命名為“Base”,再使用圓角矩形工具,設(shè)置半徑5px,畫出畫面中一樣的矩形,并使用這些混合選項(xiàng)。設(shè)置參數(shù)按照?qǐng)D片所示。顏色漸變參數(shù)為:#3d4a59;#1c2329;#303a44 ,描邊顏色為#191919。

\ 

\

\

\

 5、新建一個(gè)600 × 600px文檔。 充填50%灰色。 然后,添加雜色,參數(shù)設(shè)置:80%;高斯噪聲,單色。 然后再選擇濾鏡模糊-徑向模糊:旋轉(zhuǎn)參數(shù)為100。 之后可以根據(jù)自己的感覺,使用快捷鍵CTRL + F重復(fù)徑向模糊,直到你滿意。

\

6、復(fù)制到之前創(chuàng)建的“base”圖層上。更改混合模式為柔光,不透明度為80%。圖層命名為 “Texture”.按Ctrl 點(diǎn)擊“base”圖層,調(diào)用選區(qū),然后按Ctrl + Shift +I, 選擇Texture圖層點(diǎn)擊刪除不要的選區(qū)。

\

7、創(chuàng)建新圖層。將它命名為”Higlights”,再用鉛筆工具畫兩條線,分別放置在base圖層的視頻界面頂端和底部。再選擇一個(gè)大一點(diǎn),參數(shù)設(shè)置為80%不透明度的橡皮擦擦除兩側(cè)的線條。

\

8、再創(chuàng)建新圖層。將它命名為”speaker”。Ctrl鍵的點(diǎn)擊 “base”圖層的縮略圖獲得選區(qū)。然后選擇矩形工具,按住SHIFT鍵+ ALT鍵拖動(dòng)得到選區(qū),#3a3a3a填充它。復(fù)制圖層,命名為“質(zhì)地”。之后進(jìn)入混合選項(xiàng)并添加這些設(shè)置:選擇“蛛網(wǎng)圖案(素材下載見文章頂部)”,圖案疊加混合模式:疊加模式和參數(shù)設(shè)置為12%。

\

\

9、創(chuàng)建一個(gè)新層,命名為“突出”,再次使用鉛筆工具繪制1px高光邊緣,然后創(chuàng)建一個(gè)新圖層,命名為“影子”。使用橢圓工具,取出不需要的區(qū)域,羽化,高斯模糊,降低透明度50%既可以,大家可以適當(dāng)?shù)母鶕?jù)感覺調(diào)整。

\ 

10、按照左側(cè)制作方法,創(chuàng)建右側(cè)部分。

\

11、之后創(chuàng)建,最小化和最大化及關(guān)閉按鈕。創(chuàng)建新層,命名為“按鈕”。再使用圓角矩形工具,設(shè)置半徑為2px,畫一個(gè)小按鈕,它填充白色。圖層漸變的顏色為:#8799ab-#485664-#8799ab 描邊顏色為#384251。

\

\

\

\

\

\