Photoshop教程:設(shè)計(jì)一個(gè)黑色網(wǎng)站導(dǎo)航條

2022-12-26 14:01:49 來源/作者: / 己有:12人學(xué)習(xí)過
作者:ps真功夫 譯   出處:

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

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


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

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

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


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

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

點(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。

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


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

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


但愿你喜歡!