ps制作立體效果的網(wǎng)站導(dǎo)航教程

2022-12-26 11:31:21 來(lái)源/作者: / 己有:22人學(xué)習(xí)過(guò)

步驟十八

如果你做的正確,那么現(xiàn)在你的菜單應(yīng)該如下所示。

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟十九

在當(dāng)前畫(huà)布上,LittleLines當(dāng)前按鈕上有黑色文本,選擇你的文字圖層,點(diǎn)擊T鍵激活“文字工具”,選中第一個(gè)按鈕上的文字,在字符面板上將選中的文字顏色改為黑色。

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟二十

在按鈕準(zhǔn)備方面,最后一步為在剩余按鈕中間添加黑色分隔線。點(diǎn)擊“Double Border”圖層,然后在它上面新建一個(gè)新圖層,命名為“Divider Lines”。右擊新圖層,從菜單中選擇“創(chuàng)建剪切蒙版”,為“Divider Lines”圖層創(chuàng)建一個(gè)剪切蒙版。如下所示,現(xiàn)在已經(jīng)有三個(gè)圖層重疊到“Button Background”圖層上。

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟二十一

為了創(chuàng)建黑線,按D鍵將前景色重置為黑色,然后從矩形選框工具的彈出菜單中選擇可以生成1像素寬豎直選區(qū)“單列選框工具”。

從之前的例子中我們可以看到,這些小的黑色分隔線只放在每個(gè)按鈕的左邊框,所以,在兩個(gè)按鈕之間點(diǎn)擊,創(chuàng)建1像素寬的選區(qū),如果位置不合適,按左、右箭頭鍵輕輕移動(dòng)它,然后按“Alt-Delete”鍵為其填充黑色。重復(fù)此操作,直到將所有剩余按鈕劃分完畢,不要忘記也要在最后一個(gè)按鈕右邊緣畫(huà)線。做完后按“Ctrl-D”鍵取消選區(qū)。

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟二十二

對(duì)那些想深入了解,為背景添加木質(zhì)紋理的同學(xué),在這里我也解釋一下(因?yàn)槲抑?,如果我不這樣做,我會(huì)收到50封電子郵件)。

首先,你需要先找到你喜歡的一種木質(zhì)紋理,我覺(jué)得defcon-x 是能找到這種紋理的最好的網(wǎng)站之一,它們擁有很多種高分辨率的木質(zhì)紋理可供選擇。在圖片上右擊選擇復(fù)制圖片,然后返回到Photoshop文件。

選中“Nav Background”圖層(有橙色紋理的那個(gè)),按“Ctrl-V”將紋理復(fù)制到文件中。這樣將會(huì)自動(dòng)產(chǎn)生一個(gè)新圖層,命名為“Wood”。木質(zhì)圖層現(xiàn)在填充到整個(gè)文件中,我們對(duì)它進(jìn)行修剪。像前面那樣,在新建的“Wood”圖層上右擊,在菜單中選擇創(chuàng)建剪切蒙版。

(注意:如果你覺(jué)得由于高分辨率而不能足夠看清木質(zhì)紋理,可以用自由變換工具將紋理縮小到合適的尺寸。)

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟二十三

最后一步工作,為“Nav Background”圖層添加一個(gè)由淺黑色到透明的漸變疊加圖層樣式。右擊“Nav Background”圖層,從菜單中選擇混合選項(xiàng),然后設(shè)置如下漸變疊加圖層樣式。

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

步驟二十四

就這樣,你的導(dǎo)航欄完成了。希望你能在這個(gè)實(shí)例中有所收獲!

Photoshop制作立體效果的網(wǎng)站導(dǎo)航教程,PS教程,16xx8.com教程網(wǎng)

標(biāo)簽(TAG) 網(wǎng)頁(yè)圖片 Blanche