使用Fireworks制作itgao动态banner全过程

itgao老总是我朋友，前几天要我帮忙做个Banner，拖到今天终于有点不好意思了，动手！好久没有用fw做动画了，有些生疏。有不合适的地方希望大家不要扔鸡蛋砸我，要扔就扔石头，一把砸死我得了，我这人脸皮薄，呼呼。好，废话不多说，咱们开始吧：
3 R( d6 n, q2 E) }: y" _( C效果图：
/ Y9 q: N6 s7 r9 P" C' j
7 c  L& V" h- h* W+ V4 M, R

" G, ]& e0 _" l/ c3 o本文涉及知识点：1、fw创建gif动画的基本过程；2、fw帧动画中共享层的使用；3、fw形状渐变动画的制作；4、fw缩放动画的制作；5、fw帧帧动画的制作；...
0 Z8 \: U1 n' y& f( a! n- U第一步：做背景层大家知道，大多动画的背景图片都是固定的，变化的只是动画里的文字阿、图标等等。我们可以事先将背景部分做好，然后将其设为共享层，其他帧里我们就不用再复制背景层了。新建468*60文档；
. p+ W. q8 ]. i


- t2 x/ K! B* B+ P用矩形工具画一个矩形，大小同画布；
2 Y, A. a" W( l4 s
6 T8 i) Z0 H4 u3 w2 l- `7 E9 `5 i

. ?) t9 F% {! ~" {3 q- w/ @1 `) ~6 z

  {7 R0 E% G' H3 f" z* W
' U* O; J( P! M( [2 O6 K$ n


将填充颜色改为线性渐变，调整颜色如下;
4 T- g5 F" ^# S$ ?! K6 c2 K& v2 ?
/ Z6 H8 _3 ~: W+ {3 L9 O) l  x
1 R3 q' _, p) F! m3 o

9 P+ M" y1 d) f* J/ _! {: z- x- A
6 x# A6 ]( H! y4 w
/ w& t) q: g( }& n
& o8 O( B2 ^4 z/ z' W
通过“文件”菜单里的“导入”功能，将修饰图片导入场景；

3 z1 g, c( R1 z
# W2 X& M. T7 V3 [
并调整布局及搭配，结果如下图：

! h2 p4 G% H0 u

将层面板中层1设置为共享层，并新建层2；


# \7 Y1 u+ O9 D




/ G& \) R' u# V" D" p& l
1 E8 n0 D: Y' O3 t& ~( T9 f
选择层2，场景中输入“海量”两个字，大小为120px，调整透明度为60%；调整颜色及倾斜角度；

3 ~+ @" E5 h) d( g; H! r6 }, k: q0 X; E


1 }3 e" t8 ^+ \) Q3 |3 E
( Y4 G5 T% U; n# V
& Y9 ?' W4 e+ l) S在帧面板中讲帧1鼠标拖拉之新建图标，复制创建帧2，并将文字大小设置为44；
! t; Z/ {! G$ u/ t



8 N, y/ O" ]6 z/ ~9 }
4 i0 `$ h0 z+ N; f6 K
1 g3 i+ w  j" S* ]: e6 V0 A. r# r

在画布中输入“免费”，在滤镜的“阴影和光晕”中选择“发光”；
8 i- W% S, r; @6 ~) |; v2 `

0 K8 U* R* n, ^5 a0 c8 y
调整参数如下：
) q  V& C1 @: X  L( d

+ L$ P: A, C3 v
再对“免费”两个字进行模糊处理：在滤镜的“模糊”中选择“缩放模糊”；



调整参数如下：

4 }2 U* J- K. X1 E- {* t

复制该帧，并将新帧中的“免费”的模糊参数修改如下：
' @% b" x; f3 l7 t0 p4 v3 }1 t
% H% v0 {- f9 |+ o: X$ U7 P( R- H
. D. \* Q" ]0 ~( H% B2 i9 b
再复制该帧，删除“免费”的模糊滤镜。
* g- P9 x4 k7 Z( r" \  u0 [
" l3 {/ r! e1 i+ y
" V6 U- |9 U" v+ l' x8 J& ^/ X
复制帧，添加输入“教”；复制帧，添加输入“程”；重复复制帧，添加输入“.”实现如下图的效果：

5 L1 w  J( y$ {

1 B4 R; \& G& e: j% I8 P7 w
3 Q, X/ R- W) E) e% K# ~9 t





7 g. F/ p8 c8 m( [9 u# z7 ^
* y, y; i' X. u. n' R
$ c( I% C  H- A6 }3 t9 h
...

  ]+ ]! A0 }- Q8 j7 y' e5 e: d

( y# y  J6 O4 C. p/ }新建帧（直接点新建帧图标，不用复制帧的操作），输入“尽在”，导入图片，调整位置、文字字体等，如下：

2 T9 h+ ?' T8 R( U$ U5 P% l# r
& t. {) k9 h2 ]1 Q0 N
重复复制帧，调整图片位置：
2 V- ~5 h& T, _# K6 e& f
/ l- o! q' x% j! Z) }4 ~
* a* b3 }* R/ Y/ v5 G
8 Z; o. M4 o7 A
& x' M( o" [' ?+ M
6 n6 D4 n$ ^9 E1 N6 u$ v3 J
' y- O! [* Z8 n( q) L4 g
, f9 \, S& f% o
* r# d, O. }0 L9 O' R% ]7 G输入“Www.ITGao.Com”，并使用发光滤镜:

1 g2 p/ C1 G* K% c



6 H0 ^4 R0 V! Q9 H/ T4 H4 l& o

双击各帧，在弹出的间隔时间：



; R( V. h4 q" m) D

" {3 p  R, r9 \$ n: n# z0 ~


7 M( V) N: m# h1 f1 N# ~3 e/ ?7 ]动画制作完毕，开始导出为gif图片：打开图像预览面板
! t; q7 `0 y$ {# u) L0 \4 p2 @7 C


( a6 ~3 x2 v  W$ _
) u# r# b: @+ S8 P* A# W
5 k' A% \1 Q2 n, x  w) Y: F

) [) r$ h* z1 H
8 K+ r. {/ ~% `, Y' P
设置如上图所示，最后点击“导出”按钮，保存。大功告成，效果如下：
/ u6 q4 n# X& b, _. q


' g! F8 K1 V) L! G动画总体过程比较麻烦，综合了fw的很多实用功能和技巧，但原理其实很简单，只要耐心调整和操作就可以领悟到fw的无穷魅力了。希望我的表达不是很烂，想扔鸡蛋的开始准备：）
PNG源文件：

: e2 p$ K- A+ ~4 ?