Fireworks轻松绘制banner广告
Banner,一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。本文中我们用Fireworks来制作一个变色的Banner,从中我们可以掌握符号(symbol)的使用、补间实例动画(tween instance)的制作、层(Layers)和帧(Frames)的基本用法,结尾进行精彩的技巧总结。文章末尾提供原文件供大家下载参考。
完成效果如下:
Banner制作具体过程(1)首先我们新建一个大小为468×60的文件,并设置画布颜色为黑色,如图1所示。
图1 新建一个文件
(2)然后我们导入一个要进行变色效果的位图文件,如图2所示。当然我们同样可以使用绘图工具绘制这个图像,这里是为了方便讲解选用外部图像的。
图2 导入位图
(3)选中该幅图像按Ctrl+Shift+D两次,克隆图像两次。然后选中其中的一幅图像,点击“Filters”,选择“Adjust Color”>>“Hue/Saturation”,这时在弹出对话框中调整色调的值,如图3所示。同样方式调整另外一幅图像的颜色,最终得到图4所示的图像效果。
图3 调整色调
图4 对克隆对象实行变色效果后的图像
(4)选中其中的一个图片如左边的紫色图片,按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(Animation),如图5所示。
图5 将图像转换为符号
图6 动画设置对话框
(6)单击“OK”,这时回到工作区中,我们在画布上会看到带箭头的虚线边框的符号,如图7所示。使用同样方式将另外两幅图像转换为符号,并分别命名为Symbol 2和Symbol 3,然后将三个符号都删除掉。
图7 位图转换为动画符号的效果
(7)我们再在Banner的左边加些图片并做适当调整使Banner更加生动,如图8所示。
图8 在Banner左边添加图片
图9 命名并共享图层
(9)单击层面板右下角的按钮新建一个图层。然后将如图10所示的Library(库)面板中的Symbol 1拖到画布中去,并放置到Banner的最右角,如图11所示。同时记住它属性面板中的位置信息(X:282,Y:0)。
图10 Library面板
图11 将符号拖到画布上
(10)选中这个符号,然后点击 “Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的动画对话框设置帧数为10,如图12所示。
图12 设置动画参数
图13 提示是否自动添加帧的对话框
(12)选择OK这时候我们发现帧面板中出现了10个帧,如图14所示。
图14 帧面板中出现了新帧
图15 设置动画属性
(14)点击“OK”即可。我们这时候发现第一帧的层面板如图16所示。图像效果如图17所示,一种渐变效果已经形成了。
图16 第一帧层面板
图17 第一帧的效果
(15)下面我们就来制作第二个渐变效果了。也就是由红色变成绿色的了。在帧面板中选择第10帧,这时我们发现画布右边的图像是红色的,如图18所示。
图18 第10帧图像
(16)单击帧面板右上角的按钮,在弹出菜单中选择“Duplicate Frame”,这时弹出了复制帧对话框,我们在其中选择After current frame单选框将复制的帧放置到当前帧之后,如图19所示。
图19 复制帧对话框
(17)选择“OK”回到画布,出现第11帧的图像,这时后我们发现画布变为背景图了,如图20所示。
图20 第11帧图像
(18)此时在层面板中选中Layer 2,将绿色的Symbol 3拖到画布中,在属性面板中设置与前面相同的XY坐标。点击“Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,这时同样会弹出图25所示的提示对话框。选择“OK”这样新的帧就被添加到了帧面板之上了,如图21所示。
图21 新帧被添加到了帧面板之上
(19)接着选择Layer 3,将红色的Symbol 2拖到画布中,在属性面板中设置与前面相同的XY坐标。点击“Modify”菜单,选择“Animation”>>“Settings... ”,设置其不透明度由100到0,帧数为10,如图22所示,使得红色逐渐淡去,绿色显示出来。
图22 设置动画属性
(20)接着便是由绿色再变回紫色的了。同上,在帧面板中选中20帧,再添加一帧,选中Layer 3,将紫色符号拖到画布中,设置透明由0到100,选中Layer 2,拖入绿色符号,透明度不变,帧数也是10帧。点击播放按钮浏览,发现速度快了一些,按住Shift键选择帧面板上的所有帧,双击鼠标,设置帧延时为15/100 sec即可。下面来为Banner添加文字效果。
(21)在帧面板中选择第1帧,然后在层面板中选择Layer 3,接着新建一个Layer 4,选择工具箱上的文本工具为图像添加“天极软件网”文字,如图23所示。
图23 添加文本
(22)选中文本然后按F8键将文本转换为符号,在符号属性中为其命名为nuoli,选择转换为动画符号,如图24所示。由于要将文本保持静止状态5帧,所以在设置动画时和前面不变色的图片符号一样,只输入帧数就可以了,其他的设置不变,如图25。
上一个:Fireworks文本路径结合操作
下一个:用FW插件轻松创建透明按钮