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

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

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單  最終效果

  具體操作步驟如下。

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

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

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單  圖1

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

  投影:

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單

  圖2

  內(nèi)陰影:

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單

  圖3

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

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單

  圖4

  顏色疊加:

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單

  圖5

  描邊:

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單

  圖6

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

  Photoshop制作玻璃質(zhì)感導(dǎo)航菜單  圖7

 

標(biāo)簽:導(dǎo)航

隨機(jī)推薦