首页 > 工具 > Fireworks > 正文

FW快速制作动态按钮四状态

2020-09-19 13:47:42

字体：大中小

来源：转载

供稿：网友

　　按钮是网页的重要组成元素之一，在网页中发挥着十分重要的作用。它主要起着两个作用：第一是起到提示性的作用，有提示性的文本或者图形来告诉浏览者点击后会有什么作用，这样的按钮可以是静态的图片，主要是让浏览者了解点击它起到什么作用，甚至可能仅仅是一个小的较为美观的图片。第二是动态响应的作用，即是指浏览者在进行不同的操作时，按钮能够呈现出不同的效果，响应不同的鼠标时间。

　　这样的动态网页按钮一般有四个状态，即up（释放）、over（滑过）、down（按下）和over while down（按下时滑过），要编辑按钮的链接或行为还要设置按钮的active area（活动区域）。

　　今天我们就来介绍如何在中快速制作按钮四状态。文章末尾提供原文件供大家下载参考。

　　（1）在fireworks中新建一个大小为200×60的文件，使用工具箱上的圆角矩形工具绘制一个圆角矩形，在属性面板中设置圆角值为47，得到如图1所示的图像。

图1 绘制圆角矩形
　　（2）然后在属性面板中填充设置中选择"gradient">>"linear"，即选择线性填充，并在浮动颜色框中设置第一个颜色块值为#b6b6b6，第二个颜色块值为#ffffff，得到图2所示的图像。

图2 设置渐变填充
　　（3）由于现在是左右渐变，我们想实现上下渐变，其实只要调整渐变填充的控制杆就可以了，如图3所示。

图3 调整控制杆
　　（4）按住ctrl＋shift＋d克隆圆角矩形，然后使用工具箱上的矩形工具绘制一个矩形，并使用选择工具同时按住shift键选择矩形和克隆所得的圆角矩形，如图4所示。

图4 同时选中矩形和圆角矩形
　　（5）点击"modify"菜单，选择"combine paths"（组合路径）>>"punch"（打孔），将两个路径使用打孔效果，得到图5所示的图像。

图5 打孔后的图像效果
　　（6）选中打孔所得的图形，在属性面板中将其笔触设为无，线性填充的第一个颜色块设为#3399ff，第二个颜色块设为#d0f3fd，适当调整控制杆，并在属性面板中设置不透明度设为70%，得到如图6所示的图像。

图6 调整填充效果
　　（7）为了实现高光的效果，我们将画布显示的比例调到400%，然后点击工具箱上的钢笔工具，绘制图7所示的路径。

图7 绘制路径

　　（8）调整路径的不透明度为90％，切换到100％视图，并适当调整一些填充效果让其达到视觉上的最佳，得到图8所示的图像。

图8 添加路径后的效果
　　（9）添加文本，并为文本添加发光效果，设置发光颜色为白色，得到如图9所示的图像。

图9 添加文本
　　（10）将画布显示的比例调到400%，用圆形工具和钢笔绘制一个简单的放大镜图像，线条颜色为白色，无填充。如图10所示。

图10 绘制"放大镜"
　　（11）切换到100％视图，然后选中底下的圆角矩形，在其属性面板上为其添加阴影效果，最终我们得到图11所示的按钮图像。

图11按钮图像
　　（12）打开前面制作好的按钮图像，按住ctrl＋a全选对象，然后按ctrl＋g将所有对象组合，如图12所示。

图12 组合所有对象

上一篇：Fireworks常见问题解答

下一篇：FireWorks教程：绘制逼真大众甲壳虫

学习交流

windows wamp中配置安装xhprof步骤

windows wamp中配置安装xhprof步骤...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

谷歌为Chromebook应用商店推出优质游戏推荐新版块

2020-09-18 13:06:14

英伟达20GB显存的RTX3080即将发布

2020-09-18 13:04:04

索尼PS5价格公布：399美元起，11月12日开售

2020-09-17 13:37:27

阿里发布首款机器人“小蛮驴” 进军机器人赛道

2020-09-17 13:34:05

消息称快手寻求在香港进行IPO 估值500亿美元

2020-09-17 13:26:10

史玉柱：因游戏作弊陈天桥封了我《传奇》账号一气之下做了《

2020-09-16 13:09:34

疑难解答

图片精选

网友关注