说明:在麻辣姐姐的教程中,她采用的是photoshop CS和ImageReady CS,而笔者使用的是photoshop CS3,所以在动画的制作方法上会略有不同。
, J3 J- E: R, ?' ~6 U' s+ V
" {( @# I- Q a9 _! q* I5 K3 V8 A0 |# `* d Y

两张素材图:
& {" Q9 j" T) N2 J+ ]& L
E( U. N5 T" x! i* \
2 `2 s8 g1 h4 ~% q2 i
( M' i, O$ X8 i* M1 t# {
! j/ H+ {. V$ e Q
3 I9 k) Z6 M; q% C
/ w: l! l/ z9 H/ v0 X$ N
* Z8 d8 q7 ]) h' E+ Z) e4 O( O z3 M
: ~) t1 O5 {, i首先,执行【文件】 【新建】命令,新建一个413376像素的文件(图像大小和素材文件一致即可),将名称命名为【麻辣姐姐签名】,如【图01】所示。
- y9 X2 R x3 o# ]
# X# }9 G6 _" y$ R5 m" ?
0 l( i5 u# R; X
1 F) \9 z( i% b ?' r( e, S7 p1 G. c6 X' ^
第二步:打开【素材1】,使用【移动工具】将【素材1】拖入【麻辣姐姐签名】中,系统自动为其命名为【图层1】,使用同样的方法将【素材2】也导入到【麻辣姐姐签名】中,如下图所示。
5 v+ l; G& L: L% V4 y
$ V& ]4 H8 ^4 B( z% p; j
- g' ~. M0 Z) t$ c' F' l% m
第三步:执行【图像】 【旋转画布】 【水平翻转画布】命令,将图像旋转以更适合做签名,效果如【图03】所示。
4 f& m$ h2 N4 B3 ?# \7 @
" H* ~1 k% ^& j/ J$ K
5 ]# ~9 y$ s7 k( ]" a% m# `% X ~, {
; l: k# Q2 ]2 X[/table]
. W. [" ^* w+ f0 ^; Y
! P% t8 d0 {3 Q2 z. a$ q
第四步:确认前景色为白色,选择工具箱中的【横排文字工具】(快捷键为T),输入欢迎来参加硅谷活动等文字,在【图层调板】中双击文字图层的缩略图,为其添加图层样式,参数设置如【图04】所示,效果如【图05】所示。
. u" C: S) M' N; L0 ?( ^, I* r: n6 H% Z
~" G* ^2 `/ O2 ]
% W1 T- r' I$ b+ {/ Y
% b- R" r& c3 V0 l
$ p2 a. k. {$ _- W" E* h
7 m/ e" [9 O2 E, h. D& u
第五步:仿照第四步的方法,添加其它文字,效果如【图06】所示。
8 K, @1 W* d% R) n) T( [+ _. t0 D
4 P8 l- j# n/ e0 P* Q
/ c& s+ @+ d4 d8 c
, U7 l' P3 J( R
7 T2 `. s, H4 E0 ?9 b! e3 ~第六步:选中【图层2】,使用【矩形选框】工具,绘制如【图07】所示的选区。
" d/ |. n- o- I3 \; w# z; c+ z3 G7 F2 T: L ]) g
8 G- z0 S9 Y; ?! w
5 J4 x( T) z% K# h# v, m4 B/ T
6 ~3 p- m3 u5 q# T" V0 l3 U# d8 H4 u9 I! F
第七步:按快捷键【Ctrl+J】复制选区内容,得到【图层3】。执行【编辑】 【变换】 【水平翻转】命令,将【图层3】反转,然后按【Ctrl+T】键调整【图层3】的大小及方向并将其移动到如【图08】位置。
, a1 a; D/ y7 o. F# I! p
/ N& C* y5 q4 f3 C+ M' @1 w( B+ t: @/ ?/ x
2 k2 r" |% @( P$ c, T) l9 M( o8 C1 e) _3 ^
第八步:将【图层3】复制一份,得到【图层3副本】。为【图层3副本】添加图层样式,设置如【图09】所示,效果如【图10】所示。
: L, |9 R9 r2 r0 a. |6 r
" n1 C6 l8 I. K' q4 z: y9 m* p! `) P. [
$ X; Z1 i6 j5 [
4 X( S" J. a/ e: c8 e
[table]
: g7 W' ~' D; U; Y% o
) g% f- L$ W7 x5 q8 p第九步:按住【Ctrl】键不放,点击【图层3】的缩略图,得到【图层3】的选区,将前景色设置为#787878,按【Alt+Del】键填充选区,并将【图层3】向下、向右移动,制作阴影,效果如【图11】所示。
2 R9 z$ p2 }+ R4 s! l5 B
6 L' J- J8 p1 }$ J9 w y) u5 A2 }2 u+ m6 P" j# e7 ]& p
, x0 y, S2 A0 ]
d+ R- `2 w2 H第十步:将【背景图层】删除,前期的准备工作到此结束,下面开始制作动画。执行【窗口】 【动画】命令,调出【动画调板】。新建4帧,并将【帧延长时间】设为0.5秒,如【图12】所示。
( w' I; p' E* O9 x: z/ o6 a0 R* N8 S2 u) k# }0 x
$ L0 Y2 o* w7 X0 g6 h
! f' w$ Y) C$ P _* Z. G
3 I! { m& F4 E7 B) [
第十一步:在【动画调板】中选择第一帧,隐藏【图层调板】中的部分图层,如【图13】所示;(第二帧和第一帧设置相同)在【动画调板】中选择第三帧,隐藏【图层调板】中的部分图层,如【图14】所示;在【动画调板】中选择第四帧,隐藏【图层调板】中的部分图层,如【图15】所示。
* a' A5 L1 A3 L2 h c# A8 J1 M/ L) d: C* e1 b& T
. x# G' g2 e/ ~) k0 s [( k) }
1 S* A+ V. r |+ U) I8 H! |. R
$ b3 Z' j3 @+ L
. A. i, M! W! |: S
& O- _( g$ a6 I
/ h& Q1 A/ m* r) ]2 s第十二步:执行【文件】 【存储为Web所用格式】命令,设置如【图16】,PS会生成一个HTML文档和一个【images】文件夹,打开文件夹,里面就是我们要的GIF动画了。
0 E9 \2 @9 O5 t2 e5 B5 [3 |1 B2 S9 F: J! L, ?: |! U u
) g3 l7 L! J( q
: V+ V, I$ J2 `6 h) J
最终效果:
4 ]& L" u# w; ^# e" [+ S
% {8 t5 O& r; X! I% k0 l
( j' e F3 O9 S9 l" m$ J. U
