用Fireworks制作精致的圆角按钮

[复制链接]
查看: 251|回复: 0
gggds 发表于 2009-12-27 03:19:03 | 显示全部楼层 |阅读模式

% h7 f3 C9 Z6 r# }7 T" Y$ Q# u
 请大家再次跟我们一起去showgood转转,看见那上面的圆角按钮了吗?今天,我们就一起来看看它的制作方法。
2 S  L" [8 i. B. v3 m  步骤1:打开Fireworks 4.0,新建一个文件,文件的大小、背景色自定义。在具体制作之前,先执行菜单命令“View\"Guides\"Edit Guides”,在弹出的对话框中进行设定:将Show Guides(显示辅助线)和Snap to Guides(吸附到辅助线)前面的对钩选中,点击“OK”即
4 s% o) `5 J0 ?) X, G2 i
: P, C8 z0 k- V8 n& y

: M& Q: w+ W0 a$ r7 s( c6 g
0 t  Z6 S$ a6 |$ `4 |: T7 a  R
% e  ^' H! U! G" K! N+ s  M( \- D% O. T) |" ?
  h5 K# i6 G. I7 ^1 ?, x1 l' U
可。注意:辅助线对后面的操作起着很大的作用,要认真设置。设置方法如图1。
6 P& V$ F& V4 ~1 H' [; K, O& ^
9 U: W6 ^( I) V0 F/ q/ c
8 J0 x: ]& N5 c# V- ]6 m7 x图1
6 A/ [) L% M$ P6 w. x2 R0 |  步骤2:从上侧标尺栏拖出两条水平的辅助线,两条辅助线之间的距离大小就是我们要制作的圆角按钮的高度大小,选取工具箱的椭圆绘制工具,配合Shift键,在两条辅助线中间绘制出一个圆形,圆形的直径大小和两条辅助线之间的距离大小要相等。选定绘制的圆形,执行快捷键操作“Ctrl+Shift+D”,这样就复制了一个圆形对象。选定克隆对象,向右拖动它,或者使用键盘上向右的方向键向右拖动该对象,调整后的两个圆形对象如图2所示。
; U- s+ t5 S$ G  c
4 X* D) y2 Z0 W9 @1 v0 X0 I' m6 {; B$ J' g" n2 N2 w
图2
* V9 B" A/ P7 O* r9 j  步骤3:选定左侧的圆形对象,这样圆形的路径节点就会体现出来,从左侧标尺栏拖出一条垂直方向的辅助线,该辅助线要恰恰通过圆形对象的垂直方向的那条直径。这里有一个小技巧:如果不能确定辅助线是否恰恰经过直径的话,可以放大编辑视图来仔细观看,当然,你也可以先拖出辅助线,然后移动圆形对象进行调整。
4 Y* Q" r4 ~9 K  v$ O, d  [# O  步骤4:重复第3步骤的操作,在右侧圆形对象垂直直径处也拖出一条辅助线。这样,辅助线在编辑区的中心就恰恰围成了一个矩形框。选取工具箱的矩形绘制工具,以辅助线左上角的交点处为起点,向右拖动矩形工具绘制出一个矩形,矩形的大小和辅助线在编辑区的中心形成的矩形框的大小相符(如图3)。
- b0 h2 a% O3 r, g# U
5 o- O! a, w1 _4 h! z8 v$ V: d- C+ u
图3& D7 U, G; |, W1 p& l
  步骤5:将辅助线移除掉,选定编辑区的所有对象,执行菜单命令“Mofify~Combine\"~Union”。这样就将三个路径对象联合成一个路径对象了。) p" x6 y: L) O8 X# Z. c* [
  步骤6:选定编辑区的联合对象,打开Fill填充面板,对其填充色进行编辑,这里采用的填充方式是Linear(线性渐变),填充的方案采用“Black,White”,填充的方向是由下向上填充,并且在按钮上添加相关文字。这样我们的一个圆角按钮就制作成功了,最终效果如图4。
# S' v- g& [+ {1 o" [. n
0 }# e2 z1 @7 B3 J
8 g% T% k% Y5 E) P  g: Y' t; `图4

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )