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

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

最終效果圖：

步驟一

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

步驟二

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

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

步驟三

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

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

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

步驟四

現(xiàn)在點(diǎn)擊M鍵選擇矩形選框工具進(jìn)行選擇。我們?cè)诓襟E一中知道，導(dǎo)航欄背景高50像素。我習(xí)慣將信息面板打開(kāi)，方便查看選區(qū)的詳細(xì)信息(“窗口—>信息”)，這樣，當(dāng)我點(diǎn)擊或者移動(dòng)選區(qū)時(shí)，有一定的標(biāo)準(zhǔn)，可以一次得到選區(qū)。

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

步驟五

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

步驟六

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

步驟七

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

(注意：有一個(gè)創(chuàng)建剪切蒙版的簡(jiǎn)單方法，按住Alt鍵，移動(dòng)光標(biāo)到圖層面板上兩個(gè)圖層之間，當(dāng)光標(biāo)變?yōu)榭雌饋?lái)是兩個(gè)重疊的圓時(shí)，單擊鼠標(biāo)左鍵，創(chuàng)建剪切蒙版。)

步驟八

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

(注意：當(dāng)點(diǎn)擊并拖動(dòng)漸變工具時(shí)要按住Shift鍵，這樣會(huì)保證它是一條垂直線。)