想在您的網(wǎng)站上添加一款酷黑的導(dǎo)航條嗎？這篇教程將教您快速而有效的制作一款導(dǎo)航條并添加到您的網(wǎng)站中。

先預(yù)覽下最終效果吧！很酷哦！

第一步：基本要領(lǐng)

創(chuàng)建新的psd文檔，寬度700px，高度160px，背景色以黑灰色（#2b2b2b）填充。

新建圖層，圖層屬性為“導(dǎo)航條”，選擇圓角矩形工具，設(shè)置前景色為黑色（#000000）如下圖一樣畫(huà)一矩形條（長(zhǎng)度和寬度可自行處理）。

第二步：設(shè)置圖層樣式

雙擊“導(dǎo)航條”圖層或者選擇“導(dǎo)航條”圖層，點(diǎn)擊右鍵，在下拉菜單中選擇混合選項(xiàng)菜單，將出現(xiàn)“圖層樣式對(duì)話(huà)框”。

點(diǎn)擊左邊復(fù)選框中的“外發(fā)光”，并且如下圖進(jìn)行設(shè)置：

再點(diǎn)擊左邊復(fù)選框中的“斜面和浮雕”，并且如下圖進(jìn)行設(shè)置：

最后，點(diǎn)擊左邊復(fù)選框中的“漸變疊加”，如下圖進(jìn)行設(shè)置：

完成以上步驟后，你的導(dǎo)航條將會(huì)是這個(gè)樣子：

第三步：增加高光

新建圖層，設(shè)置前景色為白色（#ffffff），選擇矩形工具，用白色矩形條覆蓋導(dǎo)航條的上半部，選擇橡皮擦工具擦去左上角和右上角的白色，顯示導(dǎo)航條的圓角形狀，如下圖所示：

把此圖層的透明度降低為4%，導(dǎo)航條將會(huì)如下圖所示：

第四步：制造發(fā)光

新建圖層，設(shè)置前景色為#2a5368。

從畫(huà)筆工具中選擇預(yù)設(shè)畫(huà)筆，并設(shè)置大小為360px。使用畫(huà)筆，在導(dǎo)航條上方中心畫(huà)一個(gè)圓形區(qū)域，設(shè)置圖層透明度為65%（自己可斟酌減少或增加），選擇橡皮擦工具擦去不屬于導(dǎo)航條的發(fā)光區(qū)域，如下圖所示：

剩下要做的就是添加菜單按鈕（自行設(shè)計(jì)），使用白色或灰色即可。

完整的導(dǎo)航條華麗麗的出爐了：

但愿你喜歡！