Fireworks轻松绘制banner广告

2024-09-11 13:32:06

字体：大中小

来源：转载

供稿：网友

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 将图像转换为符号

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

图6 动画设置对话框

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

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

　　（7）我们再在banner的左边加些图片并做适当调整使banner更加生动，如图8所示。

图8 在banner左边添加图片

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

图9 命名并共享图层