當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁圖片>教程內(nèi)容

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

來源:Iconfans 作者:Blanche 學(xué)習(xí):1879人次

步驟十八

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

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

步驟十九

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

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

步驟二十

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

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

步驟二十一

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

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

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

步驟二十二

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

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

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

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

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

步驟二十三

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

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

步驟二十四

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

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

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
samewj2012-04-22 10:36
很不錯的資料,學(xué)習(xí)了,真是灰常感謝樓主的無私奉獻(xiàn)
jackzkm2012-04-21 08:08
來學(xué)習(xí)一下啊

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!