ps制作立體效果的網站導航教程

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

最終效果圖：

步驟一

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

步驟二

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

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

步驟三

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

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

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

步驟四

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

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

步驟五

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

步驟六

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

步驟七

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

(注意：有一個創建剪切蒙版的簡單方法，按住Alt鍵，移動光標到圖層面板上兩個圖層之間，當光標變為看起來是兩個重疊的圓時，單擊鼠標左鍵，創建剪切蒙版。)

步驟八

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

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