Fireworks轻松绘制banner广告(一)

　　Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。　　本文中我们用Fireworks来制作一个变色的Banner，从中我们可以掌握符号（symbol）的使用、补间实例动画（tween instance）的制作、层(Layers)和帧(Frames)的基本用法，结尾进行精彩的技巧总结。文章末尾提供原文件供大家下载参考。
  O7 G* l$ I) G, t* f+ K7 ]
' x, J* @1 R& v4 [/ u　　完成效果如下：
, y3 b0 b: V& {# I$ r
$ e5 s$ l* X- K9 C3 X
; p  ?  W4 P' Z　　Banner制作具体过程
　　（1）首先我们新建一个大小为468×60的文件，并设置画布颜色为黑色，如图1所示。
: x* u6 F- J4 {, ~; L

$ L( ^7 p& ~( q( M  {
图1 新建一个文件
　　（2）然后我们导入一个要进行变色效果的位图文件，如图2所示。当然我们同样可以使用绘图工具绘制这个图像，这里是为了方便讲解选用外部图像的。
, y. [& f# D7 q; l
0 u0 W2 y: a: c# e8 j: F! [
- _: Q$ Z0 h9 n" M- D+ J& a3 K' |
图2 导入位图　　 （3）选中该幅图像按Ctrl＋Shift＋D两次，克隆图像两次。然后选中其中的一幅图像，点击“Filters”，选择“Adjust Color”>>“Hue/Saturation”，这时在弹出对话框中调整色调的值，如图3所示。同样方式调整另外一幅图像的颜色，最终得到图4所示的图像效果。
9 k9 d, r9 V% A! D3 M. U7 E
! t2 W4 }; v, e! W5 {: P( L' j8 T
( Z+ T* {8 e% A: ]: o  ~- D
9 J* N* w. }( |6 n; F6 q) R图3 调整色调
" f0 {4 e  M7 h( [& U+ e

# q8 P( _  C, d9 Z图4 对克隆对象实行变色效果后的图像　　 （4）选中其中的一个图片如左边的紫色图片，按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(Animation)，如图5所示。
2 M9 }2 V+ i7 f: f; c3 Q0 y8 v; w
9 ]- R2 R0 ^; h+ _. k
  M/ c  H( n' C图5 将图像转换为符号　　 （5）点击“OK”之后会弹出动画设置的对话框，如图6所示。我们暂时对它不做设置。
; F* N' ?: [2 B$ i2 @
' M" ]8 K' g3 J+ N/ F  o
7 L5 \% k5 J7 W4 w# Y5 A图6 动画设置对话框　　 （6）单击“OK”，这时回到工作区中，我们在画布上会看到带箭头的虚线边框的符号，如图7所示。使用同样方式将另外两幅图像转换为符号，并分别命名为Symbol 2和Symbol 3，然后将三个符号都删除掉。
0 H& p6 y! ~$ g: ?. s: w  O
. j0 i9 N7 K$ H" D, D4 Z
图7 位图转换为动画符号的效果
　　（7）我们再在Banner的左边加些图片并做适当调整使Banner更加生动，如图8所示。

2 W4 l& `8 G. \! w
8 Y  |6 Q! q5 }& d4 B% b0 R; V2 @5 X图8 在Banner左边添加图片　　 （8）接着我们点击“Window”菜单，分别把“Layers”、“Frames”和“Library”三个面板打开，为了我们将来创建动画服务。在Layers（层）面板中选中Layer 1图层双击鼠标给图层命名为Background，并选中“Share across frames”复选框即共享这个图层，如图9所示。
* U. V& F8 j6 a2 z/ L" I  e
/ z2 O/ H6 w2 B* a! P3 z; \, ~
图9 命名并共享图层