本篇教程是教大家如何用photoshop制作出如下的3D效果很強的三D效果導(dǎo)航條動態(tài)按紐。
1.新建一個 600X70 pixel 的文件。新建一個圖層,在新圖層上做出如下的圖形。
2.按住ctrl,用鼠標(biāo)點擊新建的圖層.這時你可以看到剛才做的也就是如上的黑色區(qū)
域外出現(xiàn)了流通動的虛線。 這是表示該層的非空區(qū)域被選定了。
3.選取前景色為一較淺色。我選的是稍淺的綠色。背景色設(shè)為深色,我用的是黑色。
4.在工具欄上選取漸變工具,將其選項設(shè)為from foreground to background(從前景色到背景色)。
5.從選區(qū)的頂部向選區(qū)的底部拉出一條漸變。
6.新建一個圖層。
7.在菜單上操作:seclect(選擇)$#@62;modify(修改)$#@62;contact(收縮)$#@62;填入 5 .
8.從收縮后的選區(qū)的底部向選區(qū)的頂部拉一條漸變。
9.再新建一個層,在菜單上操作:seclect(選擇)$#@62;modify(修改)$#@62;contact(收縮)$#@62;填入 3
10..從收縮后的選區(qū)的頂部向選區(qū)的底部拉一條漸變。
11.在菜單上操作:layer(圖層)$#@62;effect(效果)$#@62;投影,然后在彈出的對話框中點擊ok(確定)。
這時你的圖形應(yīng)該是像下圖這樣的。
12.現(xiàn)在我們?yōu)榘醇~加上我們的導(dǎo)航文字。在這之前先將前景色設(shè)為白色。
然后點擊進(jìn)入文字的輸入狀態(tài)。最好將所有的文字一次性寫上,這樣可以省去很多工作。
13.在菜單上操作:layer(圖層)$#@62;effect(效果)$#@62;shadow(投影)$#@62;next(點擊按紐下一步)$#@62;在“apply(應(yīng)用)”前打上勾。
然 嚀逕柚茫航玸tyle(樣式)設(shè)為:embass(浮雕效果)
depth(深度):3 ; blur(模糊):1;
調(diào)整highlight(高亮)的選項:
model(模式)設(shè)為:color burn(顏色加深);opacity(不透明度):100%
調(diào)整shadow選項:
model(模式):darken(變暗);opcity(不透明度):100%
然后點擊ok(好)。這時應(yīng)該是下圖的效果。
14.菜單操作:view(視圖)$#@62;ruler(顯示標(biāo)尺)
15.這時你將鼠標(biāo)移到標(biāo)尺上按住左鍵然后向圖像拖去,會發(fā)現(xiàn)能托出一條藍(lán)線。
這不是真正的實線,而只是輔助線,所以你不必?fù)?dān)心它影響了你的圖像。
16.從上到下,從左到右,拉出如下的輔助線,來將這個按紐欄分成各個單個的按紐。
17.在菜單上操作:layer(圖層),flatten(合并圖層).
18.用選中"photoshop"的這一塊,如下圖。
19.按ctrl c復(fù)制,然后ctrl n新建一個文件,再按ctrl v粘貼。
接下來你可以重復(fù)這個步驟,將這個按紐依次分塊,保存為單個的按紐圖形。
20.上面這步驟完成了按紐的普通狀態(tài)的圖像制作。接下來繼續(xù)完成當(dāng)鼠標(biāo)移到按紐上后按紐的陷入圖形的制作。
21.點擊history(歷史記錄)面板,將操作回到flatten(合并圖層)前一步的狀態(tài)。
22.點擊圖層面板,這時的面板應(yīng)該是如下的。
23.用右鍵點擊最上面的一層,在彈出的菜單里選effect(效果)。
這時我們要改變它的圖層效果:
將shadow(投影)這一項的apply(應(yīng)用)前的勾去掉。
而embass(浮雕效果)的值則是改變一些:
depth(深度):2 ; blur(模糊):1;
將角度改為“-120”
然后點擊ok(好)。這時就做好原來的文字層的效果變成了下陷。
24.在菜單上操作:layer(圖層),flatten(合并圖層).
25.然后用步驟18,19的方法再將圖像分開保存成幾個按紐的圖像。
26.如果你dreamweaver用得比較熟,再接下來的工作就很簡單了。
27.只要插入Rolloverimage,就可以將剛才的那些分割后的圖形插
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- 陰影效果,教你制作各類陰影教程
- Photoshop制作網(wǎng)頁搜索條
- PS教程:設(shè)計導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- 用ps制作豎列導(dǎo)航
- 界面設(shè)計,設(shè)計音樂播放器界面圖片
- Photoshop教程:像素化細(xì)節(jié)設(shè)計技巧
- Photoshop制作網(wǎng)站導(dǎo)航圖
- Photoshop設(shè)計網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- banner教程,用ps制作960*90的廣告圖片