打造彩色玻璃導(dǎo)航菜單

打造彩色玻璃導(dǎo)航菜單許多網(wǎng)頁(yè)元素都可以使用Photoshop來(lái)制作完成，今天我們就來(lái)學(xué)習(xí)一下如何用Photoshop來(lái)打造質(zhì)感十足的彩色玻璃按鈕，并用按鈕組成漂亮的導(dǎo)航菜單，最后再在Photoshop中將導(dǎo)航菜單輸出為HTML網(wǎng)頁(yè)文件。

　　本文以Photoshop CS2中文版為例，其它版本的Photoshop在操作步驟上可能會(huì)略有差異。先看一下最終效果。

　　

　　最終效果

　　具體操作步驟如下。

　　1.啟動(dòng)Photoshop CS2中文版，按Ctrl N打開(kāi)“新建”對(duì)話框，根據(jù)需要稍做設(shè)置(大小應(yīng)該能放得下將來(lái)的導(dǎo)航菜單)后，單擊“確定”按鈕新建一個(gè)文檔。

　　2.單擊圖層面板下方的“創(chuàng)建新圖層”按鈕新建一個(gè)圖層。選擇工具箱中的“圓角矩形工具”，在選項(xiàng)欄中將其半徑設(shè)置為15px，然后在新圖層上畫(huà)一個(gè)如圖1所示的圓角矩形�！　�

　　圖1

　　3.現(xiàn)在對(duì)上述形狀應(yīng)用如下圖層樣式。

　　投影：　　

　　圖2

　　內(nèi)陰影：　　

　　圖3

　　內(nèi)發(fā)光：　　

　　圖4

　　顏色疊加：　　

　　圖5

　　描邊：　　

應(yīng)用上述樣式后，得到如圖7所示的按鈕效果�！　�

圖7

4.現(xiàn)在再次使用“圓角矩形工具”，這一次，在按鈕上方畫(huà)一個(gè)小一些的白色圓角矩形，如圖8所示�！　�

　　圖8

　　5.將這一圖層的混合模式設(shè)置為“疊加”，并將不透明度設(shè)置為30%，則可以得到如圖9所示的按鈕效果�！　�

　　圖9

　　6.接下來(lái)復(fù)制這些按鈕，并將它們排列成一個(gè)導(dǎo)航菜單，添加上文本，如圖10所示�！　�

　　圖10

7.選擇工具箱中的“切片工具”，打開(kāi)“視圖”菜單，確認(rèn)“對(duì)齊”左邊有一個(gè)對(duì)勾，這樣可以使切片自動(dòng)對(duì)齊邊緣，從而創(chuàng)建出更為準(zhǔn)確的切片。使用“切片工具”一個(gè)按鈕一個(gè)按鈕的切割，每個(gè)切片中包含一個(gè)按鈕，結(jié)果如圖11所示�！　�

圖11

　　8.既然已經(jīng)做好切片，那么現(xiàn)在可以將其輸出為HTML文件，從而為后來(lái)的網(wǎng)頁(yè)設(shè)計(jì)做準(zhǔn)備了。選擇菜單命令“文件｜存儲(chǔ)為Web所用格式”，為了得到最好的圖像效果，采用如圖12所示的設(shè)置。設(shè)置完畢單擊“存儲(chǔ)”按鈕。

　　

圖12

　　9.在“將優(yōu)化結(jié)果存儲(chǔ)為”對(duì)話框中選擇網(wǎng)頁(yè)文件要保存的位置，并如圖13所示輸入文件名，選擇保存類型為“HTML和圖像(*.html)”，然后單擊“保存”按鈕。

　　

　
　　圖13

　　這樣就會(huì)得到一個(gè)HTML頁(yè)面，一個(gè)images文件夾，這個(gè)文件夾中即包含按鈕圖片。

　　現(xiàn)在只需要將HTML代碼拷貝到其它網(wǎng)頁(yè)中就可以使用了，不過(guò)在拷貝時(shí)不要拷貝由Photoshop生成的header/body標(biāo)簽