Photoshop繪制個(gè)性化的網(wǎng)站導(dǎo)航(6)

今天為大家?guī)淼倪@個(gè)教程是教大家怎么用PHOTOSHOP制作一個(gè)像Web Designer Wall這個(gè)網(wǎng)站的水彩畫風(fēng)格的導(dǎo)航欄(菜單欄。首先我會(huì)教大家用PHOTOSHOP制作出導(dǎo)航所需要的圖片文件，然后再第2個(gè)部分教程中我會(huì)教你怎么樣用CSS把這個(gè)導(dǎo)航欄做出來。OK,廢話不多說，我們開始吧：

　　先看效果圖

　　1.筆記本紙張圖片

　　首先我們要找一張那種帶穿孔的筆記本紙張的圖片素材。eddie推薦一個(gè)找這種素材的網(wǎng)站是stock.xchng.當(dāng)然deviantart也是一個(gè)不錯(cuò)的選擇。在這個(gè)教程，你就先用我給你的這張圖片吧。

　　2.水彩畫效果

　　首先在photoshop中打開我們的素材圖片，按住Ctrl點(diǎn)擊紙張圖層載入選區(qū)，然后新建一個(gè)組，并點(diǎn)擊圖層面板下面的小按鈕創(chuàng)建圖層蒙版。這樣做使我們后面使用畫筆時(shí)顏色只會(huì)出現(xiàn)在蒙版區(qū)域內(nèi)。

　　新建一個(gè)圖層，選一個(gè)很淺的粉紅色(或者其他你喜歡的淺顏色)，選擇畫筆工具(B)，在上方面板把畫筆大小調(diào)為100px,不透明度為10%。然后在紙張上方隨意畫上一些粉紅色。！

　　重復(fù)這個(gè)步驟直到效果差不多

　　3.增加一些細(xì)節(jié)

　　找一些咖啡污漬的素材圖片，放在紙張圖層上面，在圖層面板把混合模式調(diào)為“整片疊底”。

　　接下來我們還可以用一些現(xiàn)成的筆刷來添加一些污漬與水跡的效果�？梢詮膕platter與watercolor這里下載到合適的筆刷。

　　接下來再添加一些素描的素材上去來豐富細(xì)節(jié)的部分。你可以從我提供的網(wǎng)站尋找素材，或是直接從vector illustration這里下載。

　　在紙張右上角做一個(gè)三角形的選區(qū)，然后選取灰色，選擇漸變工具在選區(qū)畫一個(gè)漸變。這樣使得右上角的紙好像被折過后的效果。

　　4.手寫字體

　　如果你沒有合適的手寫字體，我也推薦你去Dafont與 Urban Fonts去找。(這2個(gè)網(wǎng)站都是免費(fèi)并且資源相當(dāng)多。)接下來添加你想要的文字吧。如圖

　　5.一個(gè)在水里泡過的RSS圖標(biāo)

　　首先我們?nèi)フ乙粋�(gè)RSS圖標(biāo)。選擇橡皮擦工具，然后選擇一個(gè)上面你用過的筆刷，把不透明度調(diào)為10%后在圖標(biāo)邊緣輕輕擦。然后你還可以選擇灰色，在圖標(biāo)上加一些灰色讓RSS感覺有點(diǎn)臟。

　　6.鉛筆風(fēng)格的邊框

　　鉛筆風(fēng)格的邊框可以在Adobe Illustrator中很輕松的畫出來。先畫一個(gè)圖形或是路徑，然后打開畫筆面板。選擇木炭畫筆并把大小調(diào)為0.25pt.

　　7.結(jié)束

　　這就是最后的成果啦，你的呢?

　　如果你還想花更多時(shí)間在細(xì)節(jié)上面，你還可以增加一些紙屑，透明膠帶，小貼紙等等。

　　我看到這個(gè)效果很不錯(cuò)，所以也翻譯成漢語給需要的朋友看，意思有不對(duì)的也請(qǐng)?jiān)彙?/p>

　　雖然要做到與原作者一模一樣的效果不是那么簡(jiǎn)單(除了這里的高手)，但是我相信這篇教程還是有相當(dāng)多可以學(xué)習(xí)的要點(diǎn)。希望大家能從中獲益。