用Fireworks制作精致的圆角按钮

1 ?: ~' U. ^/ p2 Z( r, `

　请大家再次跟我们一起去showgood转转，看见那上面的圆角按钮了吗？今天，我们就一起来看看它的制作方法。
　　步骤1：打开Fireworks 4.0，新建一个文件，文件的大小、背景色自定义。在具体制作之前，先执行菜单命令“View\"Guides\"Edit Guides”，在弹出的对话框中进行设定：将Show Guides(显示辅助线)和Snap to Guides(吸附到辅助线)前面的对钩选中，点击“OK”即
. {2 U3 O) [- ~1 ?0 H可。注意：辅助线对后面的操作起着很大的作用，要认真设置。设置方法如图1。
5 K/ \# |( Y0 \2 Y

2 c. D; {: m4 O# X9 g* b图1
　　步骤2：从上侧标尺栏拖出两条水平的辅助线，两条辅助线之间的距离大小就是我们要制作的圆角按钮的高度大小，选取工具箱的椭圆绘制工具，配合Shift键，在两条辅助线中间绘制出一个圆形，圆形的直径大小和两条辅助线之间的距离大小要相等。选定绘制的圆形，执行快捷键操作“Ctrl+Shift+D”，这样就复制了一个圆形对象。选定克隆对象，向右拖动它，或者使用键盘上向右的方向键向右拖动该对象，调整后的两个圆形对象如图2所示。
$ ^7 H. k0 q6 a8 L7 S8 J
. D7 a& j2 d9 }: y8 f
图2
- T1 e9 g2 w4 m7 n& Y- q　　步骤3：选定左侧的圆形对象，这样圆形的路径节点就会体现出来，从左侧标尺栏拖出一条垂直方向的辅助线，该辅助线要恰恰通过圆形对象的垂直方向的那条直径。这里有一个小技巧：如果不能确定辅助线是否恰恰经过直径的话，可以放大编辑视图来仔细观看，当然，你也可以先拖出辅助线，然后移动圆形对象进行调整。
- j+ K1 X. {7 U6 [9 z　　步骤4：重复第3步骤的操作，在右侧圆形对象垂直直径处也拖出一条辅助线。这样，辅助线在编辑区的中心就恰恰围成了一个矩形框。选取工具箱的矩形绘制工具，以辅助线左上角的交点处为起点，向右拖动矩形工具绘制出一个矩形，矩形的大小和辅助线在编辑区的中心形成的矩形框的大小相符(如图3)。


图3
) j4 m& l+ R% X% A0 X  u　　步骤5：将辅助线移除掉，选定编辑区的所有对象，执行菜单命令“Mofify～Combine\"～Union”。这样就将三个路径对象联合成一个路径对象了。
) k1 E, ?7 Y+ a# q7 c- _　　步骤6：选定编辑区的联合对象，打开Fill填充面板，对其填充色进行编辑，这里采用的填充方式是Linear(线性渐变)，填充的方案采用“Black，White”，填充的方向是由下向上填充，并且在按钮上添加相关文字。这样我们的一个圆角按钮就制作成功了，最终效果如图4。

& E, h& a: \1 y2 b
图4