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

學好Photoshop最好的方法之一是解構(gòu)、再現(xiàn)設(shè)計，以此來激發(fā)自己的靈感。懷著這樣的心情，讓我們走近 LittleLines.com 導航，去看一下，從他們最初是如何設(shè)計出這么精致的導航欄中，我們能學到什么。

最終效果圖：

步驟一

注意下面放大圖像中所有的細節(jié)，邊框、漸變、尺寸、顏色。在這種情況下，放大鏡將是你最好的朋友。

步驟二

新建一個Photoshop文件，出于圖解的目的，我將文件大小設(shè)置為540*200像素，分辨率72像素，但如果你要設(shè)計一個網(wǎng)頁，你就要將文件大小設(shè)置得足夠大，而不是現(xiàn)在的尺寸。

我們暫且忽視木質(zhì)紋理背景，為導航欄設(shè)計一個純色背景。點擊工具欄底部的調(diào)色板的前景色，打開拾色器，然后為背景選擇一個比較好的顏色。我選擇橙色#e07814。

步驟三

點擊圖層面板底部的“創(chuàng)建新圖層”圖標新建一個圖層。在新圖層名稱上雙擊，將圖層重命名為“Nav Background”。

從現(xiàn)在起，當我告訴你新建一個圖層，給它命名時，這就是你要做的。

(注意：如果你的圖層面板不可見，執(zhí)行主菜單中的“窗口—>圖層”將它打開。)

步驟四

現(xiàn)在點擊M鍵選擇矩形選框工具進行選擇。我們在步驟一中知道，導航欄背景高50像素。我習慣將信息面板打開，方便查看選區(qū)的詳細信息(“窗口—>信息”)，這樣，當我點擊或者移動選區(qū)時，有一定的標準，可以一次得到選區(qū)。

得到選區(qū)后，按“Ctrl-Backspace”為選區(qū)填充背景色，然后按“Ctrl-D”取消選區(qū)。

步驟五

現(xiàn)在為按鈕設(shè)計背景。新建一個圖層，并命名為“Button Background”，設(shè)置前景色為#47361f，在Nav Background 圖層上新建選區(qū)，高38像素，按照自己的需要設(shè)置足夠的寬度。按“Alt-Delete”為選區(qū)填充新的前景色，按“Ctrl-D”取消選區(qū)。

步驟六

現(xiàn)在為“Button Background”圖層增加發(fā)光漸變。新建圖層并命名為“White Gradient”，根據(jù)之前的方法用拾色器設(shè)置前景色為白色，或者點擊D鍵重置前景色為黑色、背景色為白色，然后點擊X鍵將前景色轉(zhuǎn)換為白色。

步驟七

在我們應(yīng)用漸變之前，在“White Gradient”圖層上右擊，從菜單中選擇“創(chuàng)建剪切蒙版”，從“White Gradient”圖層到“Button Background”圖層創(chuàng)建剪切蒙版，這樣就使得“White Gradient”圖層上的像素只有與“Button Background”圖層上像素重疊的地方可見。當你看到一個箭頭指向所剪掉的圖層時，那么剪切蒙版創(chuàng)建成功了。

(注意：有一個創(chuàng)建剪切蒙版的簡單方法，按住Alt鍵，移動光標到圖層面板上兩個圖層之間，當光標變?yōu)榭雌饋硎莾蓚�重疊的圓時，單擊鼠標左鍵，創(chuàng)建剪切蒙版。)

步驟八

當圖層重疊在一起后，我們可以繼續(xù)往下進行，添加漸變了。 點擊并拖動漸變工具，從棕色按鈕頂部到大約中間部分。

(注意：當點擊并拖動漸變工具時要按住Shift鍵，這樣會保證它是一條垂直線。)

步驟九

很顯然，我們創(chuàng)建的漸變太強，所以設(shè)置“White Gradient”圖層“填充”20%，“混合模式”為“顏色減淡”。

步驟十

接下來，在棕色按鈕頂部創(chuàng)建雙邊框。新建一個圖層，命名為“Double Border”，設(shè)置前景色和背景色分別為#644239和#866d53 。

找到工具面板頂部的矩形選框工具，點擊并按住使其顯示彈出菜單。從列表中選擇“單行選框工具”，在棕色按鈕背景頂部點擊，在畫布上新建一個一像素高的水平選區(qū)。不要擔心定位不準確，你的邊框創(chuàng)建后可以上下移動。

步驟十一

建立單行選區(qū)后，點擊“ Alt-Backspace”，用上一步設(shè)置的前景色為其填充。按鍵盤上的向下鍵，使選區(qū)向下移動1像素，按Ctrl-Backspace用新的背景色為其填充，然后按“Ctrl-D”取消選區(qū)。

如果你的線位置不合適，按V鍵選擇移動工具，用鼠標或者上下鍵上下移動它，直到它覆蓋棕色按鈕背景上部2像素。我已將下面的圖片放大，以便你看清楚。

步驟十二

最后我們需要做的是將雙邊框添加到我們已經(jīng)在“Button Background”圖層上創(chuàng)建的剪切蒙版，像我們之前做的，在圖層面板中右擊“Double Border”，從菜單中選擇“創(chuàng)建剪切蒙版”。

步驟十三

在我們現(xiàn)在完成的背景基礎(chǔ)上，按T鍵選擇文字工具，準備好字體和樣式。LittleLines用的是Lucida Grande字體，這種字體是從OSX操作系統(tǒng)上找到的一種Apple系統(tǒng)字體，但是Windows Users不用擔心，只管往下讀。我們可以在字符面板上設(shè)置字體樣式。(如果字符面板不可見，在主菜單中選擇“窗口”—>“字符”打開)。

Lucida Grande是Apple獨有的一種字體，直到Safari 瀏覽器在含有Lucida Grande和Grande Bold字體的PC機上發(fā)布。因為這是一種Apple字體，我不能在我的教程里提供下載。如果你需要這種字體，你可以登錄到Windows version of the Safari browser from the Apple’s website ，然后瀏覽Program Files > Safari > Safari.resources folder，在這里你可以找到標準和加粗版本的字體來下載安裝。然后將這些文件拖動到控制面板中的字體文件夾中安裝。(注意：你需要重啟Photoshop更新字體列表。)

在字符面板的左上角的字體下拉菜單中找到Lucida Grande字體并選中它，如果由于某些原因你的Lucida Grande字體沒有安裝成功，你可以用一種相似的sans-serif字體，比如Verdana, Arial 或者 Helvetica來達到相似的效果。設(shè)置字體樣式為Bold，字號11像素，顏色為#bcb19b，在字符面板底部選擇“平滑”。

步驟十四

在畫布上點擊，新建一個新的文本實例，輸入你的文字鏈接。像這樣來模擬一個網(wǎng)站，我利用空白來將鏈接分開，現(xiàn)在，我在鏈接項之間用了9處空白。當輸入完文本之后，點擊Photoshop頂部字體文字工具選項卡上的復選標記圖標。你會看到，在你的圖層面板中新生成了一個文字圖層。

步驟十五

在文字圖層仍在選中狀態(tài)下，按住Ctrl鍵，點擊圖層面板底部的“創(chuàng)建新圖層”圖標，這樣會在當前圖層下面新建一個圖層，將新圖層命名為“Button Current”。

按M鍵選擇矩形選框工具(如果之前我們用來創(chuàng)建水平線的單行選框工具仍在當前，要確保從彈出菜單中返回到矩形選框工具)，如下所示，從左上角到前兩個按鈕中間創(chuàng)建一個矩形選區(qū)。

步驟十六

按D鍵重置你的前景色和背景色分別為黑、白，按“Ctrl-Backspace”鍵用白色填充選區(qū)。先不要按“Ctrl-D”鍵取消選區(qū)。

步驟十七

下面我們要用“圖層樣式”為“Button Current”圖層添加漸變和描邊，但是，首先，點擊工具面板中的前景色板，將前景色設(shè)置為#c8a282。

在“Button Current”圖層上右擊，從菜單中選擇“混合選項”，打開“圖層樣式”對話窗口，然后設(shè)置如下圖層樣式，根據(jù)下面仔細檢查你的設(shè)置。我們可以注意到，在“漸變疊加”選項區(qū)中，當我們點擊“漸變選擇器”時，到透明色板的前景色用了你剛才設(shè)置的前景色。用這種方法，我們避免了用當前顏色創(chuàng)建自定義漸變。

(注意：如果你的漸變定位不合適，可以在畫布上點擊并拖動它到合適的位置。)

步驟十八

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

步驟十九

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

步驟二十

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

步驟二十一

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

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

步驟二十二

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

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

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

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

步驟二十三

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

步驟二十四

就這樣，你的導航欄完成了。希望你能在這個實例中有所收獲!