首页  »  网页设计教程  »  FW简单绘制banner广告

FW简单绘制banner广告

浏览数:共 751 次     评论:共 0 条     发布日期:2011-02-08     分类:fireworks

banner,一般翻译为旗帜广告、横幅广告等。banner是网站用来作为盈利或者是发布一些重要的信息的工具。banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。

本文中我们用来制作一个变色的banner,从中我们可以掌握符号(symbol)的使用、补间实例动画(tween instance)的制作、层(layers)和帧(frames)的基本用法,结尾进行精彩的技巧总结。

完成效果如下:

banner制作具体过程


图1 新建一个文件


图2 导入位图


(3)选中该幅图像按ctrl+shift+d两次,克隆图像两次。然后选中其中的一幅图像,点击“filters”,选择“adjust color”>>“hue/saturation”,这时在弹出对话框中调整色调的值,如图3所示。同样方式调整另外一幅图像的颜色,最终得到图4所示的图像效果。


图3 调整色调


图4 对克隆对象实行变色效果后的图像


(4)选中其中的一个图片如左边的紫色图片,按快捷键f8或者右键在弹出菜单中选择convert to symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(animation),如图5所示。


图5 将图像转换为符号

(5)点击“ok”之后会弹出动画设置的对话框,如图6所示。我们暂时对它不做设置。


图6 动画设置对话框


(6)单击“ok”,这时回到工作区中,我们在画布上会看到带箭头的虚线边框的符号,如图7所示。使用同样方式将另外两幅图像转换为符号,并分别命名为symbol 2和symbol 3,然后将三个符号都删除掉。


图7 位图转换为动画符号的效果


图8 在banner左边添加图片

(8)接着我们点击“window”菜单,分别把“layers”、“frames”和“library”三个面板打开,为了我们将来创建动画服务。在layers(层)面板中选中layer 1图层双击鼠标给图层命名为background,并选中“share across frames”复选框即共享这个图层,如图9所示。

上一篇:FW制作片头文字渐显渐隐动画
下一篇:FW网页切片应用详解