本篇教程是教大家如何用photoshop制作出如下的3D效果很强的三D效果导航条动态按纽。

查查 · 发表于 2007-6-23 10:16:12

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

x

<IMG height=40 src="http://design.emato.com/2/063216394991483.gif" width=96 border=0 name=Image2><IMG height=40 src="http://design.emato.com/2/063216394984842.gif" width=43 border=0 name=Image1><IMG height=40 src="http://design.emato.com/2/063216394967670.gif" width=77 border=0 name=Image3><IMG height=40 src="http://design.emato.com/2/06321639492582.gif" width=40 border=0 name=Image4><IMG height=40 src="http://design.emato.com/2/063216394988392.gif" width=47 border=0 name=Image5><IMG height=40 src="http://design.emato.com/2/063216394999509.gif" width=36 border=0 name=Image6><IMG height=40 src="http://design.emato.com/2/063216394932029.gif" width=94 border=0 name=Image7>
1.新建一个 600X70 pixel 的文件。新建一个图层，在新图层上做出如下的图形。
<IMG height=70 src="http://design.emato.com/2/063216394941288.gif" width=454> 2.按住ctrl,用鼠标点击新建的图层.这时你可以看到刚才做的也就是如上的黑色区 域外出现了流通动的虚线。这是表示该层的非空区域被选定了。 
3.选取前景色为一较浅色。我选的是稍浅的绿色。背景色设为深色，我用的是黑色。
4.在工具栏上选取渐变工具<IMG height=21 src="http://design.emato.com/2/063216394999509.gif" width=24>,将其选项设为from foreground to background（从前景色到背景色)。
5.从选区的顶部向选区的底部拉出一条渐变。
6.新建一个图层。
7.在菜单上操作：seclect(选择)$#@62;modify(修改)$#@62;contact(收缩)$#@62;填入 5 .
8.从收缩后的选区的底部向选区的顶部拉一条渐变。
9.再新建一个层,在菜单上操作：seclect(选择)$#@62;modify(修改)$#@62;contact(收缩)$#@62;填入 3
10..从收缩后的选区的顶部向选区的底部拉一条渐变。
11.在菜单上操作：layer(图层)$#@62;effect(效果)$#@62;投影,然后在弹出的对话框中点击ok(确定)。 这时你的图形应该是像下图这样的。
<IMG height=70 src="http://design.emato.com/2/063216394965976.jpg" width=454>
12.现在我们为按纽加上我们的导航文字。在这之前先将前景色设为白色。 然后点击<IMG height=20 src="http://design.emato.com/2/063216395047143.gif" width=25>进入文字的输入状态。最好将所有的文字一次性写上，这样可以省去很多工作。
13.在菜单上操作：layer(图层)$#@62;effect(效果)$#@62;shadow(投影)$#@62;next(点击按纽下一步)$#@62;在“apply(应用)”前打上勾。
然咛迳柚茫航玸tyle(样式)设为:embass(浮雕效果)
depth(深度):3 ; blur(模糊)：1;
调整highlight(高亮)的选项：
model(模式)设为：color burn（颜色加深）；opacity(不透明度)：100%
调整shadow选项：
model(模式)：darken(变暗)；opcity(不透明度)：100%
然后点击ok(好)。这时应该是下图的效果。
<IMG height=70 src="http://design.emato.com/2/063216395048565.jpg" width=454>
14.菜单操作：view(视图)$#@62;ruler(显示标尺)
15.这时你将鼠标移到标尺上按住左键然后向图像拖去，会发现能托出一条蓝线。 这不是真正的实线，而只是辅助线，所以你不必担心它影响了你的图像。
16.从上到下，从左到右，拉出如下的辅助线，来将这个按纽栏分成各个单个的按纽。 
<IMG height=72 src="http://design.emato.com/2/063216395177507.jpg" width=454>

<IMG height=236 src="http://design.emato.com/2/063216395165088.jpg" width=210>
17.在菜单上操作：layer(图层)，flatten(合并图层).
18.用<IMG height=20 src="http://design.emato.com/2/063216395163030.gif" width=24>选中"photoshop"的这一块，如下图。
<IMG height=57 src="http://design.emato.com/2/063216395276720.gif" width=112>
19.按ctrl+c复制，然后ctrl+n新建一个文件，再按ctrl+v粘贴。 接下来你可以重复这个步骤，将这个按纽依次分块，保存为单个的按纽图形。
20.上面这步骤完成了按纽的普通状态的图像制作。接下来继续完成当鼠标移到按纽上后按纽的陷入图形的制作。
21.点击history(历史记录)面板，将操作回到flatten(合并图层)前一步的状态。
22.点击图层面板，这时的面板应该是如下的。
<IMG height=236 src="http://design.emato.com/2/063216395165088.jpg" width=210>
23.用右键点击最上面的一层，在弹出的菜单里选effect(效果)。
这时我们要改变它的图层效果：
将shadow(投影)这一项的apply(应用)前的勾去掉。
而embass(浮雕效果)的值则是改变一些：
depth(深度):2 ; blur(模糊)：1;
将角度改为“-120”
然后点击ok(好)。这时就做好原来的文字层的效果变成了下陷。
24.在菜单上操作：layer(图层)，flatten(合并图层).
25.然后用步骤18,19的方法再将图像分开保存成几个按纽的图像。
26.如果你dreamweaver用得比较熟，再接下来的工作就很简单了。
27.只要插入Rolloverimage,就可以将刚才的那些分割后的图形插
 <script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script>

账号		自动登录	找回密码
密码			注册

[网页图片] 本篇教程是教大家如何用photoshop制作出如下的3D效果很强的三D效果导航条动态按纽。

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。