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

步驟九

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

步驟十

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

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

步驟十一

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

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

步驟十二

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

步驟十三

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

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來達到相似的效果。設置字體樣式為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”圖層添加漸變和描邊，但是，首先，點擊工具面板中的前景色板，將前景色設置為#c8a282。

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

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