本篇教程是教大家如何用photoshop制作出如下的3D效果很強(qiáng)的三D效果導(dǎo)航條動(dòng)態(tài)按紐。

1.新建一個(gè) 600X70 pixel 的文件。新建一個(gè)圖層，在新圖層上做出如下的圖形。

2.按住ctrl,用鼠標(biāo)點(diǎn)擊新建的圖層.這時(shí)你可以看到剛才做的也就是如上的黑色區(qū)
域外出現(xiàn)了流通動(dòng)的虛線。 這是表示該層的非空區(qū)域被選定了。

3.選取前景色為一較淺色。我選的是稍淺的綠色。背景色設(shè)為深色，我用的是黑色。

4.在工具欄上選取漸變工具,將其選項(xiàng)設(shè)為from foreground to background（從前景色到背景色)。

5.從選區(qū)的頂部向選區(qū)的底部拉出一條漸變。

6.新建一個(gè)圖層。

7.在菜單上操作：seclect(選擇)$#@62;modify(修改)$#@62;contact(收縮)$#@62;填入 5 .

8.從收縮后的選區(qū)的底部向選區(qū)的頂部拉一條漸變。

9.再新建一個(gè)層,在菜單上操作：seclect(選擇)$#@62;modify(修改)$#@62;contact(收縮)$#@62;填入 3

10..從收縮后的選區(qū)的頂部向選區(qū)的底部拉一條漸變。

11.在菜單上操作：layer(圖層)$#@62;effect(效果)$#@62;投影,然后在彈出的對話框中點(diǎn)擊ok(確定)。
這時(shí)你的圖形應(yīng)該是像下圖這樣的。

12.現(xiàn)在我們?yōu)榘醇~加上我們的導(dǎo)航文字。在這之前先將前景色設(shè)為白色。
然后點(diǎn)擊進(jìn)入文字的輸入狀態(tài)。最好將所有的文字一次性寫上，這樣可以省去很多工作。

13.在菜單上操作：layer(圖層)$#@62;effect(效果)$#@62;shadow(投影)$#@62;next(點(diǎn)擊按紐下一步)$#@62;在“apply(應(yīng)用)”前打上勾。

然 嚀逕柚茫航玸tyle(樣式)設(shè)為:embass(浮雕效果)

depth(深度):3 ; blur(模糊)：1;

調(diào)整highlight(高亮)的選項(xiàng)：

model(模式)設(shè)為：color burn（顏色加深）；opacity(不透明度)：100%

調(diào)整shadow選項(xiàng)：

model(模式)：darken(變暗)；opcity(不透明度)：100%

然后點(diǎn)擊ok(好)。這時(shí)應(yīng)該是下圖的效果。

14.菜單操作：view(視圖)$#@62;ruler(顯示標(biāo)尺)

15.這時(shí)你將鼠標(biāo)移到標(biāo)尺上按住左鍵然后向圖像拖去，會發(fā)現(xiàn)能托出一條藍(lán)線。
這不是真正的實(shí)線，而只是輔助線，所以你不必?fù)?dān)心它影響了你的圖像。

16.從上到下，從左到右，拉出如下的輔助線，來將這個(gè)按紐欄分成各個(gè)單個(gè)的按紐。

17.在菜單上操作：layer(圖層)，flatten(合并圖層).

18.用選中"photoshop"的這一塊，如下圖。

19.按ctrl c復(fù)制，然后ctrl n新建一個(gè)文件，再按ctrl v粘貼。
接下來你可以重復(fù)這個(gè)步驟，將這個(gè)按紐依次分塊，保存為單個(gè)的按紐圖形。

20.上面這步驟完成了按紐的普通狀態(tài)的圖像制作。接下來繼續(xù)完成當(dāng)鼠標(biāo)移到按紐上后按紐的陷入圖形的制作。

21.點(diǎn)擊history(歷史記錄)面板，將操作回到flatten(合并圖層)前一步的狀態(tài)。

22.點(diǎn)擊圖層面板，這時(shí)的面板應(yīng)該是如下的。

23.用右鍵點(diǎn)擊最上面的一層，在彈出的菜單里選effect(效果)。

這時(shí)我們要改變它的圖層效果：

將shadow(投影)這一項(xiàng)的apply(應(yīng)用)前的勾去掉。

而embass(浮雕效果)的值則是改變一些：

depth(深度):2 ; blur(模糊)：1;

將角度改為“-120”

然后點(diǎn)擊ok(好)。這時(shí)就做好原來的文字層的效果變成了下陷。

24.在菜單上操作：layer(圖層)，flatten(合并圖層).

25.然后用步驟18,19的方法再將圖像分開保存成幾個(gè)按紐的圖像。

26.如果你dreamweaver用得比較熟，再接下來的工作就很簡單了。

27.只要插入Rolloverimage,就可以將剛才的那些分割后的圖形插