我们使用Fireworks 4制作这样的效果，Fwmx只要在工具与属性面板中找到相应参数设置就行了。
　　1、新建画布，大小100*100，背景为白色。
　　2、用圆角矩形工具画一个矩形，大小随意，在OBJECT面板中设置矩形的圆角度。

　　3、设置圆角矩形边框色如下（色系#B6B6B6）：

　　4、对圆角矩形进行线形填充，参数设置如下：

　　5、现在把你设置好的这个矩形克隆一个（键盘快捷键CTRL+SHIFT+D）,再绘制一个矩形框，利用菜单命令“切割>>>打洞”进行切割：

　　6、现在，你是不是已经得到了以下的这个效果呢？

　　7、选中你切割好的这半截图形，将边框设置为无，再进行线形填充，参数如下：

　　8、再在图层面板里将这半截圆角的透明度设为70%或80%，看看，是不是有点意思了。不行，还差一点高光的效果。如果用特效或是滤镜来做，无疑是太麻烦了，我们就用一种笨办法吧。
　　将画布显示的比例调到800%，然后用钢笔绘制如图所示的线条：

　　9、设置我们刚绘制的线条颜色为白色，透明度调整为90%，切换回100%的显示比例看看：

　　10、添加按钮文字：

　　将添加好的文字克隆一下，向上和向左各移动一个像素（用键盘上的方向键来移动），然后再到图层面板中选中下面一层的文字，设置填充颜色为白色。这样使得文字有凹下去的感觉。
　　11、现在来绘制一个简单的放大镜，将画布显示比例放到到800%，用圆形工具和钢笔绘制如下的图形，线条颜色为白色，无填充：

　　12、做最后的位置调整，并且为最下面的底层圆角矩形设置阴影：

　　OK，大功告成了。你可以调整填充的各种颜色，来做出多样的按钮，希望大家从这个教程学到FW里最基本的一些东西。
　　Png源文件：

后记：附moonjeep另一源文件参考，这个图片使用了些不同的效果实现方法。
比如右侧白色部分用了遮罩，左侧红色部分的高光用了Inner Shadow内阴影，字体凹陷用的是投影等。

原文是讲关于 fireworks 4的操作的，我用 fireworks 2004 重做了一次。以方便新的 fireworks 2004用户换到位置。

步骤一、制作圆角渐变方形
选择在工具面板的方形工具，在页面中间画一个圆角的长方形。

选择方形，在属性面板的填充选项中选择线性渐变，设置好渐变的颜色是从灰色到白色，并调整到以下显示的样子。

步骤二、增加内投影，在属性面板的特效一域，点加号，选择内部投影 (Inner Shadow) 参数和效果如下图。

步骤三、增加下拉阴影，在属性面板的特效一域，点加号，选择下拉阴影。参数和效果显示如下

步骤四、增加高光显示，用同样的方法，增加一个圆角渐变方形在其之上。只是颜色渐变对调，另外调整填充的样式，使之中间和下面的方形衔接自然

步骤五、加上有下拉阴影效果的文字，大功告成。

最后提供源文件下载：

图片上右键另存就能打开编辑。

创建一个图形，不必很大

创建矢量图形，水平对齐

并集

差集

在新的Patch创建中间按钮Patch

图层填充

最后效果：

个人感觉虽然很像，但还是有很大差距。应linx、紫色耳坠的要求，在这里出一篇教程，相信可以对初学者带来一定帮助。第一次写教程，希望大家不要笑我噢！

制作方面还是非常简单的，运用的工具是photoshop7.0，主要运用了渐变：

新建一文件，用圆角矩形工具画一个80X30、半径为8的圆角矩形，然后在图层面板里双击该图层（默认的命名为“形状1”），打开图层样式，按照以下设置：

1、设置渐变叠加：

具体的颜色值为：#66CC33、#3BA51F、#20920E、#177E09，请参照以下设置：

2、描边：

颜色值为：#006600

做完以上几步，就生成了以下效果：

接下来我们来完成它的高光部份，高光部份与前面同样，也是用渐变来完成，首先我们在图层面板建立一个新图层，重命名为“高光”，然后按Ctrl+形状1，建立按纽的选区，点击选择菜单－＞修改－＞收缩，设置收缩量为1。点击选框工具（或按M键），在选择区域上右键－＞描边（或者编辑菜单－＞描边），做以下设置：

选中“高光”图层，设置填充的透明度为0：

然后双击“高光”图层，打开图层样式，做一个白色从透明到实底的渐变：

然后在上面加上我们想要的字就可以啦！再加以形状的变化，我们就做出了圆形按纽，以及标题栏等，手法基本相同，只是渐变的颜色值不同而已。

到底可以做成怎样的效果?看看吧～

怎样?Cool吧～下面偶讲详细讲解一下到底怎样才能灵活运用PS的样式功能，并且告诉一些使用技巧给大家参考。

在开始前，首先要弄清楚，你到底想要用样式做什么。这个很重要，会影响整个作品的效果的。象现在的例子，偶是想做个按钮，对，是一个按钮。

但，这是一个怎样的按钮呢？玻璃质感？金属质感？塑料的？还是其它材质的。我选择了玻璃质感的，现在流行嘛～好像有点泛滥了，不过，给他多加点东西让他有个性点，不如加个金属边吧～哈哈，那样肯定很Cool呢。

有了构思，我们可以开始动手拉！

首先，填充一个浅灰的底，目的是为了突出按钮的高光位置，有其是边缘的。我现在把文字和高光的图层给去掉了，只留下最重要的部分。这个图层，就只有样式，你看到的效果，全都是样式做出来的。看到了吗？都用了那几种样式？

有了基本认识，接下来，新建一个图层，偶先画了一个倒角的方形，偶比较喜欢倒角的，如果你喜欢其它形状，随便画好了。如果你不知道怎么画，请看之前的教程。画好后，随便填个颜色，什么颜色都没关系。双图层，调出图层样式窗口。为了让按钮更明显一些，偶先加了个描边。一个像素就够了，颜色选择黑色，透明一点。为什么不直接用灰色呢？那是因为考虑到以后应用的时候，透明的黑色会更容易融入其它环境的。灰色会显得很生硬，记住拉，用半透明的黑色，更容易融入背景的。

有了描边，再加个渐变，好增加立体感，看看，怎么是正片叠加的？其实，你也可以用正常模式的，但为什么偶要选择正片叠加？先买个关子，等一下再告诉你吧～现在先选择好你喜欢的颜色先拉！加了颜色后，先不急着调整， 留待其它效果添加了再调整会容易很多的。

现在还差点什么呢？阿，对了，还欠个阴影。那么，我们给他加个阴影吧～看偶的！夷？为什么不用阴影，而用外发光呢？怎么混和模式又不是正常的呢？呵，别急，下一步告诉你为什么。 先选好黑色的发光，表示阴影吧～

为了增加一个金属质感的包边，让按钮有一种嵌进去的感觉，偶觉得现在还差点东西，差了点什么呢？还少了个高光阿！因为嵌进去了，外面必然会有一条小缝的，为了要表现这条小缝，偶再加了一个阴影，但这个阴影是白色的，不是黑色的，大小不要了，把距离拉开一点。夷？？？？奇怪，怎么什么都看不到的？嘿，那是因为之前那个外发光的缘故。于是偶试着一个一个的混和模式来试，也就只有实色混合效果最好，就用那个吧～

现在，你们明白到 样式也有图层混合模式的吧～而且，是互相影响着的。所以，要想有好的效果，必须有耐心的，慢慢去调整才行哦！

好拉，现在看看效果怎样？在一个阴影的基础上，就仅仅是多了一条白色的线，但就因为这条小线，令按钮突出来了，细节的东西，可不要忽略了阿。当你发觉你做的东西不对劲的时候，要考虑一下，是否有某些细节给忽略了。

但现在的按钮好像光的质感还不够，我再加一个内发光！让他在边缘发光，这个也就只是一些细节，当然，你可能不会一下子发现，你可以在到制作到后期的时候添加和修改也行的。

加了个发光，效果好了点，但现在虽然有了金属包边的感觉，但还是觉得平凡了点。哈，加个斜线也是个流行的做法阿！关于斜线的制作，看这里dispbbs.asp?BoardID=3&ID=188958不要再问偶了。但你加了斜纹后，可能会看不到？为什么？？？？尝试修改混合模式吧～然后调整透明度，让斜线更自然的融入按钮

哈，现在基本的东西已经完成了，再加上一个玻璃质感的高光。用钢笔扣一下，然后填个渐变透明，那就不错了。

嘿，现在是否象模象样呢～高兴吧？但是，这跟普通的玻璃质感按钮好不了多少。有点平凡了，恩，让偶想想。。。。。。。。。

不如就加些高光的高光吧～～就像用射灯照着的一样，泛着点点灯光，那个才叫Cool！

最后，加上文字，就成了我们今天要说的超Cool的玻璃按钮按钮拉，如果简单的放上去，不就很单调了？加个阴影哦，让文字也突出来！

小结，基本上，这个按钮就主要用了样式去表现出效果来，再加上一些高光，就是那么简单。当中，想让大家对图层样式有更多了解，细心的调整，最终会调出自己喜欢的，有个性的样式。但样式最吸引的地方，不仅仅是效果好，而且，即使，图层内容改变了，它还是一样跟着改变，还可以保存留着下次再用呢！

有兴趣的朋友试试哦

类水晶的按钮，在很多地方都能用道，那么有没有快速的方法制作出逼真的水晶按钮呢？呵呵，我在这里介绍一下我的制作方法，（是在观察了很多类水晶按钮之后）发现如下方法最为简单，而且制作的效果尚可。所以介绍给大家，不知道有没有更简单，效果更好的制作方法J 或者有人已经介绍过了，那我在这里写的东西算是多此一举了。总之希望大家多交流，共同进步是我们的愿望!!!!!!!

1．打开phtoshop，在新建的画布上用形状画一个圆角矩形为了操作方便可可以将矩形栅格化，并填充上您喜欢的颜色。如图1所示。

图1

2．按住”Ctrl“键单击圆角矩形所在的图层，获得选区。然后单击“选择――>>修改――>>收缩”在弹出的对话框中输入“2”（具体值可以根据需要来调整）于是便得到如下效果

图2

3．从“工具面板中选择“渐变工具”然后选择“透明渐变”并将渐变颜色调为白色。如图3所示。

图3

4．新建一个图层『名称为图层1』(这点很重要，方便以后得修改),然后用“透明渐变”工具拉个渐变，效果如图4所示，然后在新建一个图层2，拉个反相得渐变，效果如图4

图4

5．选中图层1，删除图层1的部分渐变效果，从按钮上方1/3处，再调节一个各图层的透明度，加上点文字最终得到如下效果(附按钮的效果图解说明,按钮最终效果可以按自己的需要调节

图5

这个教程将讲述网页上常见的一种导航栏的按纽制作过程。教程的部分图片大小被放大了200%。记住，在得到最终结果之前，你随时可以用Ctrl+Z来撤消你上一步的操作。

创建新文档，File>New(快捷键Ctrl+N)。文档大小：150*150 pixels.如果图片用于网络发布，保持默认分辨率为72不变。

选择矩形工具，绘制矩形长为40 pixels，高为11 pixels。可以通过Info面板精确控制矩形大小。

保持矩形为选择状态，在Effects面板里选择Bevel and Emboss>Inner Bevel,参数设置如图，完成后，矩形按纽的形状应该如下图所示。

保持矩形为选中状态，继续添加Effect,选择Shadown and Glow >Drop Shadown ,参数设置如下：

现在我们需要在按钮上添加文字。这里我使用的是一种04系列的字体。选择文字工具，在字体下拉列表里选择04b_21，大小为8 px。这里我打下了QUIT，如下图所示。

原文链接
字体下载链接