首页 新闻 搜索 短信 分类 聊天 导航
上移动梦网
赢手机大奖

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 正文
用Fireworks制作精致的圆角按钮

http://www.sina.com.cn 2002/03/22 17:03 大众网络报

  文/作者:天津 OSCAR   

  请大家再次跟我们一起去showgood转转,看见那上面的圆角按钮了吗?今天,我们就一起来看看它的制作方法。

  步骤1:打开Fireworks 4.0,新建一个文件,文件的大小、背景色自定义。在具体制作之前,先执行菜单命令“View~Guides~Edit Guides”,在弹出的对话框中进行设定:将Show Guides(显示辅助线)和Snap to Guides(吸附到辅助线)前面的对钩选中,点击“OK”即
可。注意:辅助线对后面的操作起着很大的作用,要认真设置。设置方法如图1。


图1

  步骤2:从上侧标尺栏拖出两条水平的辅助线,两条辅助线之间的距离大小就是我们要制作的圆角按钮的高度大小,选取工具箱的椭圆绘制工具,配合Shift键,在两条辅助线中间绘制出一个圆形,圆形的直径大小和两条辅助线之间的距离大小要相等。选定绘制的圆形,执行快捷键操作“Ctrl+Shift+D”,这样就复制了一个圆形对象。选定克隆对象,向右拖动它,或者使用键盘上向右的方向键向右拖动该对象,调整后的两个圆形对象如图2所示。


图2

  步骤3:选定左侧的圆形对象,这样圆形的路径节点就会体现出来,从左侧标尺栏拖出一条垂直方向的辅助线,该辅助线要恰恰通过圆形对象的垂直方向的那条直径。这里有一个小技巧:如果不能确定辅助线是否恰恰经过直径的话,可以放大编辑视图来仔细观看,当然,你也可以先拖出辅助线,然后移动圆形对象进行调整。

  步骤4:重复第3步骤的操作,在右侧圆形对象垂直直径处也拖出一条辅助线。这样,辅助线在编辑区的中心就恰恰围成了一个矩形框。选取工具箱的矩形绘制工具,以辅助线左上角的交点处为起点,向右拖动矩形工具绘制出一个矩形,矩形的大小和辅助线在编辑区的中心形成的矩形框的大小相符(如图3)。


图3

  步骤5:将辅助线移除掉,选定编辑区的所有对象,执行菜单命令“Mofify~Combine~~Union”。这样就将三个路径对象联合成一个路径对象了。

  步骤6:选定编辑区的联合对象,打开Fill填充面板,对其填充色进行编辑,这里采用的填充方式是Linear(线性渐变),填充的方案采用“Black,White”,填充的方向是由下向上填充,并且在按钮上添加相关文字。这样我们的一个圆角按钮就制作成功了,最终效果如图4。


图4

  责任编辑:晓曦


  


发表评论】【初学者园地】【科技聊天】【关闭窗口

新 闻 查 询

 相关链接
【学园专题】网页图象制作新锐-FireWork轻松入门
轻松解决Fireworks弹出菜单的位置偏差(2002/03/07 13:58)
使用Fireworks轻松制作“缠绕曲线”(2002/03/04 14:56)
资源整合展拳脚:Macromedia Fireworks(2002/03/01 10:24)
用Fireworks制作网页动态按钮(2002/02/22 14:55)
吕布的汗珠—汗滴效果的制作一例(2002/02/07 14:11)
Fireworks 4.0精彩插件全面接触(2002/01/29 15:26)


科技时代意见反馈留言板 电话:010-82612286 或 010-82628888-3488   欢迎批评指正

网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息

Copyright © 1996 - 2002 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网