fireworks制作网页按钮两篇
fireworks有专门制作动态按钮。主要通过矩形工具、线性填充、添加投影等手绘来完成最终效果。那么下面小编给大家整理了关于Fireworks制作网页按钮的方法,希望大家喜欢。
fireworks制作网页按钮的方法步骤
制作按钮步骤1:首先启动Fireworks ,新建一个大小为80×30像素的文件,背景选择透明。执行菜单 InsertNew Button命令,弹出Button对话框,我们可以看到五个分别为Up、Over、Down、Over While Down及Active Area的选项卡,前四个这就是上述的四个动作,Active Area是为按钮设置链接的(如图1)。快捷键“Shift+F12”打开帧面板,我们会看到为其四个状态而设置的四帧,下面我们分别设置四帧来实现动态变化。
步骤2:未经过时状态(Up状态)的制作:选取Up选项卡,于工具栏中选取Ellipse Tool工具,在画布中画一个大小合适的椭圆形,将漆桶的颜色设置为天蓝色,并将其添充。快捷键“Alt+F7”打开Effect面板为其添加合适效果,选中图片,点击Effect面板下拉框,弹出菜单中执行Bevel and EmbossInner Bevel命令,按图2设置好各项参数:对比度为58%,柔和度为7,角度为151,宽度为33,并使其平滑。
步骤3:经过时状态(Over状态)的制作:切换至Over选项卡,此时是空的,需要将Up选项卡中图片复制到其中,单击编辑区下方的Copy Up Graphic按钮即可保证两个选项卡中图片位置一致,这里再给该图片添充一些亮色,使图片处于未被选中状态,并设置线条颜色为白色,漆桶颜色为蓝色,快捷键“Shift+F7”开启Fill面板,并在下拉框中选择Rectangle,然后使用漆桶工具填充图片颜色,同时拖动填充手柄进行调整,并设置亮度参数(如图3)使其达到合适效果。
制作按钮步骤步骤4:按下时状态(Down状态)的制作:同样将Up选项卡中的图片复制到Down选项卡中,设置Effect面板inner bevel中Sloped和Inverted的倾斜和反转效果;设置Fill面板的填充方式为Web Dither,即网页混色效果,这里可以选择两种颜色混合成一个新颜色,其设置如图4所示。为了使单击按钮时到Down状态,一定要勾选Down选项卡上的Include Nav Bar Down State复选框,否则按钮会停留在Up状态。
步骤5:单击后经过的状态(Over While Down状态)的制作:该状态和未经过时状态Up状态)稍有不同,表现出该连接被点击即可,所以可以将Up状态图片复制过来,将Effect面板中的Inner bevel属性更改为highlighted即可。
在fireworks中制作按钮步骤步骤6:Active Area设置:选取Active Area选项卡,我们会看到已经设置好的热区,单击Link Wizard按钮,于弹出Link Wizard对话框中选取Link选项卡,这里可以键入URL连接,在<alt>栏中输入链接的说明文字,并在Status BarText中输入浏览器状态栏中的说明文字
看过“fireworks制作网页按钮 “的认还看了:
如图我们来看看怎么操作的:
用过Flash的人一定知道,一个按钮应该有四种状态:未经过时状态、经过时状态、按下时状态和单击后经过的状态。实现动态按钮就是将这四个状态的按钮效果图片合成,使其产生动态的视觉效果。