無論你要設(shè)計(jì)一個(gè)應(yīng)用程序界面、皮膚，或是一個(gè)播放器的外觀，你會發(fā)現(xiàn)，這篇教程中的技巧對你來說都會合用。很明顯，我不可能坐在這里，一個(gè)字一個(gè)字的敲出打造一個(gè)界面的所有步驟，因?yàn)橛行?shí)在是基礎(chǔ)的基礎(chǔ)。但是，我想，告訴你如何創(chuàng)造一些元件，對你設(shè)計(jì)一個(gè)美觀的界面來說，還是有用的。

　　1.首先，新建一個(gè)合適大小的文檔。這個(gè)例子中，我用的是500×500像素大小的文檔，分辨率為72像素／英寸，背景為白色。

　　如果你覺得在偌大的空白畫布上工作有些空蕩蕩的，那為什么不在圖像中貼一副喜愛的壁紙或制造一個(gè)簡單的背景呢？當(dāng)然要保證作為背景的圖像顏色非常淡，降低圖層的不透明度是個(gè)好辦法。（圖01）

圖01
　　2.現(xiàn)在開始繪制播放器的主要形狀。在這篇教程中，我們想要制作的是一個(gè)小巧玲瓏的播放器，形狀盡量的簡單。將前景色設(shè)為一種淺灰色#E5E5E5，在工具箱中選擇形狀工具中的圓角矩形工具，在工具欄中設(shè)定創(chuàng)建新的形狀圖層，圓角半徑為50px，拖動鼠標(biāo)，在圖中繪制一個(gè)圓角矩形，形狀如圖02所示。

圖02
　　采用矢量形狀工具來確定圓角矩形的形狀，除了方便之外，更重要的是，我們可以通過修改路徑來編輯形狀。點(diǎn)擊圖層剪貼路徑縮略圖以顯示路徑，用直接選擇工具點(diǎn)擊路徑顯示節(jié)點(diǎn)（圖03）。

圖03

　　用直接選擇工具選擇右上方的節(jié)點(diǎn)，點(diǎn)擊方向鍵向上移動5次，即向上移動5像素；選擇右下方的節(jié)點(diǎn)，向下移動5像素（圖04）。

圖04
　　接下來，用鋼筆工具在如圖位置上添加節(jié)點(diǎn)（圖05），用直接選擇工具選擇上面新添加的節(jié)點(diǎn)，向下移動4像素；選擇下面新添加的節(jié)點(diǎn)，向上移動4像素（圖06）。隱藏了路徑之后，你可以看到光滑的形狀，這就是我們要打造的播放器的外形了。

圖05

圖06
　　提示：用矢量形狀工具創(chuàng)建面板形狀是個(gè)不錯(cuò)的主意。不但圖像質(zhì)量會提高，更重要的是，你可以隨時(shí)編輯修改。

　　3.下面的工作是要給形狀添加立體外觀。我想使它呈現(xiàn)光滑的金屬外觀，我們通過圖層樣式來實(shí)現(xiàn)。當(dāng)然，你可以用各式各樣的方法來進(jìn)行，但運(yùn)用圖層樣式的話，以后遇到相同的情況就可以直接套用樣式了。雙擊圖層，我們開始運(yùn)用圖層樣式：

　　選擇漸變疊加，混合模式為正常，不透明度為10％，縮放為34％，其它保持默認(rèn)；
　　選擇光澤，將混合模式改為正常，顏色為黑色，不透明度為16％，其它保持默認(rèn)狀態(tài)；
　　選擇斜面和浮雕，在結(jié)構(gòu)中，僅將大小改為9像素，軟化改為6像素，在陰影中，將角度改為90度，高度改為6度，暗調(diào)模式的不透明度為0％，其它保持默認(rèn)；
　　選擇內(nèi)發(fā)光，混合模式改為正常，不透明度為21％，發(fā)光顏色為黑色，其它保持默認(rèn)；
　　選擇內(nèi)陰影，將不透明度改為17％，角度為-87度，取消全局光，距離為5像素，阻塞為16％，大小為6像素，其它保持默認(rèn)；
　　選擇投影，不透明度為17％，角度為90度，距離為3像素，擴(kuò)展為0，大小為3像素。

　　這樣，播放器的面板就完成了。你可以將圖層樣式保存起來，下次再用。下面的任務(wù)是給面板上添加各種元素。（圖07）

圖07

　　4.選擇圓角矩形工具，將前景色設(shè)為白色，依然按照剛才的設(shè)定，在面板層上新建一個(gè)小一些的圓角矩形層，添加漸變疊加樣式，將不透明度設(shè)為49％，漸變?yōu)閺陌椎胶?，選擇反向，縮放為93％，效果如圖08。

圖08
　　現(xiàn)在我們需要一個(gè)略小于我們剛才所建的黑色圓角矩形。復(fù)制剛才的形狀圖層，右鍵點(diǎn)擊新的副本層，從彈出菜單中選擇“清除圖層樣式”命令；雙擊圖層縮略圖，在拾色器中選擇黑色，這樣，新圖層的顏色就變成了黑色。我們想使它稍微小一些，按CTRL+T，調(diào)出變形框，按住ALT，使縮放對稱，稍稍向上拖動變形框的下邊， 同樣，按住ALT，向內(nèi)拖動變形框側(cè)邊。如果覺得不合適，按ESC取消變形，按ENTER確定變形。（圖09）

圖09
　　我們依然用圖層樣式為之添加立體效果：

　　選擇斜面和浮雕：深度為1％，大小為1像素，角度為90度，取消全局光，高度為80度，高光不透明度為47％，其它保持默認(rèn)，在等高線選項(xiàng)中，選擇消除鋸齒，范圍設(shè)為100％；
　　選擇內(nèi)發(fā)光，混合模式為正常，不透明度為96％，發(fā)光顏色為黑色，在圖索選項(xiàng)中，設(shè)阻塞為20％，大小為3像素；

　　這樣，你的圖現(xiàn)在應(yīng)該像下圖一樣（圖10）。

圖10
　　5.現(xiàn)在，我們來打造一個(gè)真正的液晶屏幕。下面你看到的過程會和上面的有些相似。

　　選擇前景色為#86B7E7，使用圓角矩形工具，將圓角半徑設(shè)為3像素，在黑色面板上繪制一個(gè)新的藍(lán)色圓角矩形層，作為液晶屏幕的面板（圖11）。

圖11
　　它看上去太平板了，所以我們用圖層樣式修飾：

　　選擇投影，將混合模式設(shè)為正常，顏色為白色，不透明度為30％，角度為-56度，取消全局光，距離為3像素，大小為1像素，其它默認(rèn)；
　　選擇內(nèi)發(fā)光，混合模式設(shè)為正常，不透明度為41％，顏色為黑色，其余按照默認(rèn)；
　　選擇斜面和浮雕，深度為211％，大小為92像素，陰影角度為-90度，取消全局光，高度為45度，高光模式為顏色減淡，顏色為白色，不透明度為30％，暗調(diào)模式為顏色減淡，顏色為黑色，不透明度為0％；
　　選擇描邊，大小為1像素，顏色為黑色，圖像現(xiàn)在如圖12所示。

圖12
　　下面的步驟可隨意選擇，不過我經(jīng)常用它來為圖像添加高光效果，就像它真的反射了光線一樣。當(dāng)然，要得到反光效果并不是只有這一種方法，但我覺得，這種方法創(chuàng)造的效果最為逼真。

　　首先，復(fù)制藍(lán)色的液晶屏幕層，用右鍵菜單去除圖層樣式，用白色重新填充圖層。按CTRL+T，變形形狀圖層，在屏幕上的工具欄中，將寬度設(shè)為97％，高度設(shè)為87％，確定變形（圖13）。隨后，在高及混合選項(xiàng)中，將填充不透明度降低為0，使其不可見?；謴?fù)默認(rèn)前景背景色面板，并反轉(zhuǎn)前景色和背景色，進(jìn)入漸變疊加圖層樣式，將漸變設(shè)為前景色到透明，選擇反向，將縮放設(shè)為123％，其余選項(xiàng)保持默認(rèn)。這樣，我們就得到了很好的高光，但仍有一些不夠完美，我們來進(jìn)一步修改高光。

圖13
　　在高光層中，點(diǎn)擊圖層面板下的添加圖層蒙版按紐，為高光層添加圖層蒙版，蒙版縮略圖夾在圖層縮略圖和圖層剪貼路徑縮略圖之間。確定在圖層蒙版中，選擇鋼筆工具，畫出如圖路徑（圖14），按CTRL+ENTER，將路徑轉(zhuǎn)化為選區(qū)，反選，將蒙版選區(qū)填充為黑色，取消選擇，此時(shí)的高光層如圖15所示。

圖14

圖15
　　選擇合適的字體，為液晶屏幕添加顯示數(shù)字（圖16）。

圖16
　　最后，需要你發(fā)揮一些想象力，再添加一些其它的按紐和零件，使其更完整，這個(gè)精致玲瓏的播放器就完成了。（圖17）

圖17