ps設(shè)計(jì)播放器界面教程(10)

本教程主要教大家使用PhotoshopCS5制作精美的IPAD用戶(hù)應(yīng)用界面，教程將一步步指導(dǎo)大家如何制作逼真的IPAD用戶(hù)界面的一個(gè)音頻界面，這里將利用視網(wǎng)膜成像原理，使用PHOTOSHOP中的形狀圖層和圖層樣式達(dá)到圖示效果。

先看看效果圖

1、新建圖層，寬768像素，高1024像素，分辨率132

2、創(chuàng)建一個(gè)新組，命名為：背景，在組內(nèi)新建一個(gè)圖層，填充顏色為#707070。

3、創(chuàng)建一個(gè)圖層，位于最上層，可以填充任何顏色，這里使用#ffffff，執(zhí)行濾鏡----雜色---添加雜色，數(shù)量400%，平均分布，勾選單色，執(zhí)行“濾鏡----風(fēng)格化---浮雕效果，角度135，高度1，數(shù)量146，圖層混合模式為柔光，不透明度25%

4、使用矩形工具，如下圖所示做出選區(qū)，填充白色#ffffff，圖層混合模式為柔光，不透明度12%，背景已經(jīng)完成

5、現(xiàn)在開(kāi)始添加素材，創(chuàng)建一個(gè)新組，命名為：按鈕，使用橢圓工具(U)，如下圖所示創(chuàng)建一個(gè)圓形，填充顏色#e1e1e1，為按鈕的基礎(chǔ)制作添加以下圖層樣式

外發(fā)光：圖層混合模式正常，不透明度62%，方法柔和，擴(kuò)展13，大小38，等高線：線性，范圍50%。

斜面和浮雕：樣式內(nèi)斜面，方法平滑，深度1000%，方向上，大小2，角度120，高度30，等高線線性，高光模式濾色，75%，陰影模式正片疊底14%;

光澤：線性光，不透明度6%，角度19，距離24，大小5，等高線高斯

漸變疊加：混合模式正常，不透明度6%，樣式線性，角度118，縮放100%

6、使用畫(huà)筆工具，硬度為0，中等大小，如下圖所示的黑色，涂抹，不透明度設(shè)為33%。右擊圖層，在圖層面板中選擇創(chuàng)建剪切蒙版

7、選擇自由形狀工具(U)，做出圖示中的圓形，接下來(lái)使用選擇工具，做出如下的兩個(gè)選區(qū)，點(diǎn)擊圖層，反向選取，添加一個(gè)圖層蒙版的形狀，接下來(lái)使用圖層樣式。

投影：正片疊底，顏色#434343，不透明度88%，角度120，距離1,。

外發(fā)光：模式正常，不透明度40%，顏色#434343，方法柔和，大小6，范圍50%

漸變疊加：模式正常，不透明15%，線性，角度90，縮放100%

8、創(chuàng)建一個(gè)新圖層置于所有圖層上方，使用黑色(#000000)中型筆刷做出如下效果，不透明度22%，將圖層轉(zhuǎn)換為剪切蒙版。

9、選擇自定義形狀工具，并載入下載的形狀素材，使用自定義形狀做出如下圖型，顏色#707070，添加以下圖層樣式：

漸變疊加：柔光，不透明度40%，線性，角度90，縮放100%

10、使用鋼筆工具勾出如下形狀，使用濾鏡----模糊===動(dòng)感模糊，角度40，大小15像素，增加圖層蒙版，前景色設(shè)置為透明，使用黑色線性漸變(顏色#000000)做一個(gè)從底部向上的漸變，不透明度80%。

11、使用橢圓工具做一個(gè)圓形，添加如下圖層樣式

斜面和浮雕：內(nèi)斜面，雕刻清晰，深度191%，大小3，軟化2;

漸變疊加：柔光，不透明度31%，線性，角度99，縮放100%。

12、使用黑色畫(huà)筆做出如下形狀，不透明度63%，為圖層增加剪切蒙版。

13、使用橢圓工具做出如下圓形，增加圖層樣式

斜面與浮雕：內(nèi)斜面，平滑，深度1000，大小3，高光模式正常，陰影模式正片疊底

漸變疊加：柔光，不透明度88，線性，角度113，縮放21

描邊：大小1，內(nèi)部，正常，不透明度100，填充為顏色，顏色為灰色

14、使用矩形工具做出如下，顏色為#666666，為圖層增加剪切蒙版

15、使用橢圓工具再做一個(gè)圓形，圖層樣式如下：

斜面與浮雕：枕狀浮雕，雕刻清晰，深度1000，大小5，高光模式正常;

漸變疊加：柔光，不透明度47，線性，角度113

描邊：大小1，內(nèi)部，正常，不透明度100，顏色，#a2a2a2。

16、使用白色畫(huà)筆#ffffff做出如下效果，并轉(zhuǎn)換為剪切蒙版

17、接下來(lái)做電源的標(biāo)志，使用鋼筆工具勾出如下的形狀，填充#7c7c7a顏色，使用圓角矩形工具，半徑為10，做出如下形狀，為兩個(gè)選區(qū)增加以下圖層樣式

內(nèi)陰影：正片疊底，不透明度75,

外發(fā)光：濾色，不透明度75，顏色#fbf7c3，方法柔和

18、關(guān)閉按鈕組，創(chuàng)建另一個(gè)按鈕，置于圖層下方，命名為左上角鍵，使用圓角矩形工具，半徑為2像素，形狀如下，使用橢圓工具M(jìn)進(jìn)行選擇，2-3像素，半徑大于按鈕，右擊鼠標(biāo)選擇反選，為底部的按鈕圖層增加一個(gè)蒙版，基礎(chǔ)到此已完成。

19、為圖層按鈕形狀增加一下圖層樣式

投影：正片疊底，顏色#474747

內(nèi)陰影：正常，不透明度33

內(nèi)發(fā)光：柔光，不透明度12，顏色#6dcff6

斜面與浮雕：內(nèi)斜面，平滑，高光濾色，陰影正片疊底

漸變疊加：柔光

描邊：外邊緣，正常，顏色#474747

20、使用橢圓工具做出圖示形狀，應(yīng)用圖層樣式并轉(zhuǎn)換成剪切蒙版層，這個(gè)斜角內(nèi)的按鈕就會(huì)顯示

21、添加文字，使用橫排文字工具，大小設(shè)置為10像素，字體為Arial.文字如下圖，應(yīng)用以下圖層樣式

 

22、重復(fù)前四個(gè)步驟，做出余下三個(gè)按鈕

23、現(xiàn)在開(kāi)始做余下的四個(gè)小按鈕，復(fù)制大的按鈕組，將復(fù)制的組命名為小按鈕組，將按鈕復(fù)制的組拖入小按鈕組中，將按鈕的大小調(diào)整為33%，并且刪除電源的標(biāo)志，組中第一個(gè)圖層的圖層樣式將外發(fā)光減少13%。

24、接下來(lái)使用橫排文字工具加入一些指示標(biāo)志，用ARIAL 黑體，2.32號(hào)字體，左邊是9DB，右邊是40DB，添加一下圖層樣式

25、復(fù)制小按鈕組四次，將小矩形移到圖示位置。使用鋼筆工具繪制兩個(gè)圖示形狀，顏色為#464646圖層樣式如下;使用橫排文字工具，7.5像素，ARAIL字體，左側(cè)為INPUT，右側(cè)為OUTPUT，圖層樣式如下圖：

26、創(chuàng)建一個(gè)新組，命名為SWITCH，使用圓角矩形工具，半徑為2像素，填充顏色為#383839，圖層樣式如下

27、做完SWITCH的基礎(chǔ)之后，開(kāi)始添加陰影，使用鋼筆勾出如下形狀，填充顏色#000000，執(zhí)行濾鏡----模糊-----高斯模糊，半徑2像素，為陰影圖層增加蒙版，使用徑向漸變做一個(gè)#000000黑色到透明的漸變，效果如下

28、使用圓角矩形工具，半徑2像素，做出以下形狀，圖層樣式如下

29、創(chuàng)建一個(gè)新圖層，并轉(zhuǎn)換成剪切蒙版，使用矩形工具做出一個(gè)白色的方框，如下圖所示，現(xiàn)在開(kāi)始做另一個(gè)方框，同樣轉(zhuǎn)換成剪切蒙版，并填充顏色#222222，圖層樣式如下，左邊部分的方框同一方法處理。

30、使用鋼筆工具做出3個(gè)圖示的形狀，并填充#ffffff顏色，使用橫排文字工具，字體Arial，大小為5像素，輸入ON,STAND,OFF標(biāo)志，添加一下圖層樣式，并復(fù)制圖層三次以備后用。

31、新建一個(gè)組，命名為EQ,這是為建立均衡彎曲所用，將所得圖層復(fù)制10次

32、新建一個(gè)組，命名為Grill，使用圓角矩形工具，半徑為50做出如下的形狀，顏色為#212121，使用以下的圖層樣式，并且把圖層復(fù)制5次，且全部都轉(zhuǎn)換成智能對(duì)象

33、做完上一步之后，用鋼筆勾出圖示形狀，顏色為#984545，應(yīng)用以下圖層樣式，并且根據(jù)需要復(fù)制圖層并更改顏色

34、使用矩形工具做出圖示形狀，并填充#871b19顏色，圖層樣式如下圖所示;

35、現(xiàn)在開(kāi)始做正常樣式的按鈕，對(duì)于右側(cè)紅色方框，圖層樣式設(shè)置如下

36、使用橢圓工具做出如下2個(gè)2像素的圓形，分別填充#ed1c24和#72e22f，圖層樣式如下圖所示：

37、創(chuàng)建一個(gè)新組，命名為Display，使用矩形工具做出如下的形狀，顏色為#363636，使用橢圓工具做出圖示的兩個(gè)選區(qū)，右擊反向選擇，并添加圖層樣式

38、使用橫排文字工具，字體為L(zhǎng)ED字體，大小為29像素，輸入十一個(gè)8，不透明度15%，另一段字體輸入SONG TITLE，不透明度100%，接下來(lái)嘗試更多的文字，更改其大小和顏色。

39、從自定義形狀庫(kù)選擇圖示的三種形狀，其位置如下圖

40、創(chuàng)建一個(gè)新組，命名為信息按鈕，使用橢圓工具做出如下兩個(gè)圓形，顏色為#d7d7d7，添加相關(guān)圖層樣式

41、如圖所示創(chuàng)建另外一個(gè)圓形，顏色為#d7d7d7，設(shè)置相關(guān)圖層樣式，從自定義形狀中選出圖示的形狀，設(shè)置相關(guān)圖層樣式

42、創(chuàng)建一個(gè)新組，命名為音樂(lè)按鈕，使用橢圓工具做出圖示形狀，顏色為#d7d7d7，添加第40步相同的圖層樣式，使用橢圓工具再做出一個(gè)形狀，顏色為#b6b6b6，添加一下圖層樣式，這就是二個(gè)控制按鈕。

43、使用自定義形狀，選出音樂(lè)的符號(hào)，顏色為#1f1f1f，在頂部創(chuàng)建一個(gè)新的圖層，用中等白色筆刷做出圖示形狀，將其轉(zhuǎn)換成剪切蒙版，效果如下圖

效果圖如下：