1.新建一个 600X70 pixel 的文件。新建一个图层，在新图层上做出如下的图形。

2.按住ctrl,用鼠标点击新建的图层.这时你可以看到刚才做的也就是如上的黑色区
域外出现了流通动的虚线。 这是表示该层的非空区域被选定了。

3.选取前景色为一较浅色。我选的是稍浅的绿色。背景色设为深色，我用的是黑色。

4.在工具栏上选取渐变工具,将其选项设为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(确定)。
这时你的图形应该是像下图这样的。

12.现在我们为按纽加上我们的导航文字。在这之前先将前景色设为白色。
然后点击进入文字的输入状态。最好将所有的文字一次性写上，这样可以省去很多工作。

13.在菜单上操作：layer(图层)$#@62;effect(效果)$#@62;shadow(投影)$#@62;next(点击按纽下一步)$#@62;在“apply(应用)”前打上勾。

然 咛迳柚茫航?style(样式)设为:embass(浮雕效果)

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

调整highlight(高亮)的选项：

model(模式)设为：color burn（颜色加深）；opacity(不透明度)：100%

调整shadow选项：

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

然后点击ok(好)。这时应该是下图的效果。

14.菜单操作：view(视图)$#@62;ruler(显示标尺)

15.这时你将鼠标移到标尺上按住左键然后向图像拖去，会发现能托出一条蓝线。
这不是真正的实线，而只是辅助线，所以你不必担心它影响了你的图像。

16.从上到下，从左到右，拉出如下的辅助线，来将这个按纽栏分成各个单个的按纽。

17.在菜单上操作：layer(图层)，flatten(合并图层).

18.用选中"photoshop"的这一块，如下图。

19.按ctrl+c复制，然后ctrl+n新建一个文件，再按ctrl+v粘贴。
接下来你可以重复这个步骤，将这个按纽依次分块，保存为单个的按纽图形。

20.上面这步骤完成了按纽的普通状态的图像制作。接下来继续完成当鼠标移到按纽上后按纽的陷入图形的制作。

21.点击history(历史记录)面板，将操作回到flatten(合并图层)前一步的状态。

22.点击图层面板，这时的面板应该是如下的。

23.用右键点击最上面的一层，在弹出的菜单里选effect(效果)。

这时我们要改变它的图层效果：

将shadow(投影)这一项的apply(应用)前的勾去掉。

而embass(浮雕效果)的值则是改变一些：

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

将角度改为“-120”

然后点击ok(好)。这时就做好原来的文字层的效果变成了下陷。

24.在菜单上操作：layer(图层)，flatten(合并图层).

25.然后用步骤18,19的方法再将图像分开保存成几个按纽的图像。

26.如果你dreamweaver用得比较熟，再接下来的工作就很简单了。

27.只要插入Rolloverimage,就可以将刚才的那些分割后的图形插

入我们的网页里， 看看作品吧，也许你会做得更好。

另：先画参考线再拼合图层分割图片是为了保证相对的两个按纽大小相同。