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

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

作者：李東博 教程來源：天極設(shè)計(jì)在線

許多網(wǎng)頁元素都可以使用Photoshop來制作完成，今天我們就來學(xué)習(xí)一下如何用Photoshop來打造質(zhì)感十足的彩色玻璃按鈕，并用按鈕組成漂亮的導(dǎo)航菜單，最后再在Photoshop中將導(dǎo)航菜單輸出為HTML網(wǎng)頁文件。
　　本文以Photoshop CS2中文版為例，其它版本的Photoshop在操作步驟上可能會略有差異。先看一下最終效果。
　　　　最終效果
　　具體操作步驟如下。
　　1.啟動Photoshop CS2中文版，按Ctrl N打開“新建”對話框，根據(jù)需要稍做設(shè)置(大小應(yīng)該能放得下將來的導(dǎo)航菜單)后，單擊“確定”按鈕新建一個(gè)文檔。
　　2.單擊圖層面板下方的“創(chuàng)建新圖層”按鈕新建一個(gè)圖層。選擇工具箱中的“圓角矩形工具”，在選項(xiàng)欄中將其半徑設(shè)置為15px，然后在新圖層上畫一個(gè)如圖1所示的圓角矩形。
　　　　圖1
　　3.現(xiàn)在對上述形狀應(yīng)用如下圖層樣式。
　　投影：
　　
　　圖2
　　內(nèi)陰影：
　　
　　圖3
　　內(nèi)發(fā)光：
　　
　　圖4
　　顏色疊加：
　　
　　圖5
　　描邊：
　　
　　圖6
　　應(yīng)用上述樣式后，得到如圖7所示的按鈕效果。
　　　　圖7

本新聞共3

4.現(xiàn)在再次使用“圓角矩形工具”，這一次，在按鈕上方畫一個(gè)小一些的白色圓角矩形，如圖8所示。
　　　　圖8
　　5.將這一圖層的混合模式設(shè)置為“疊加”，并將不透明度設(shè)置為30%，則可以得到如圖9所示的按鈕效果。
　　　　圖9
　　6.接下來復(fù)制這些按鈕，并將它們排列成一個(gè)導(dǎo)航菜單，添加上文本，如圖10所示。
　　　　圖10

本新聞共3

7.選擇工具箱中的“切片工具”，打開“視圖”菜單，確認(rèn)“對齊”左邊有一個(gè)對勾，這樣可以使切片自動對齊邊緣，從而創(chuàng)建出更為準(zhǔn)確的切片。使用“切片工具”一個(gè)按鈕一個(gè)按鈕的切割，每個(gè)切片中包含一個(gè)按鈕，結(jié)果如圖11所示。
　　　　圖11
　　8.既然已經(jīng)做好切片，那么現(xiàn)在可以將其輸出為HTML文件，從而為后來的網(wǎng)頁設(shè)計(jì)做準(zhǔn)備了。選擇菜單命令“文件｜存儲為Web所用格式”，為了得到最好的圖像效果，采用如圖12所示的設(shè)置。設(shè)置完畢單擊“存儲”按鈕。
　　圖12
　　9.在“將優(yōu)化結(jié)果存儲為”對話框中選擇網(wǎng)頁文件要保存的位置，并如圖13所示輸入文件名，選擇保存類型為“HTML和圖像(*.html)”，然后單擊“保存”按鈕。
　　　圖13
　　這樣就會得到一個(gè)HTML頁面，一個(gè)images文件夾，這個(gè)文件夾中即包含按鈕圖片。
　　現(xiàn)在只需要將HTML代碼拷貝到其它網(wǎng)頁中就可以使用了，不過在拷貝時(shí)不要拷貝由Photoshop生成的header/body標(biāo)簽。

簡單的,我們教你,深奧的,你來分享
photoshop,ps,photoshopjiao cheng ,psjiao cheng ,photoshopxia zai ,pslun tan ,fei zhu liu psjiao cheng ,fei zhu liu psruan jian ,fei zhu liu tu pian ,fei zhu liu kong jian ,qqkong jian ,qqkong jian dai ma ,qqkong jian liu yan dai ma ,qqkong jian mo kuai ,QQkong jian FLASHmo kuai ,PSzi ti ,PSbi shua