Objective

To be introduced to Photoshop's animation techniques by recreating the
following GIF animation:

Procedure

styling the type

1. download starter file
2. turn on "Lithos" using Font Agent Pro
3. open "hula.psd" in Photoshop
4. practice Adobe navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+cmd+opt=zoom out; cmd+zero=fit in window
5. choose default colors (d)
6. add layer style "color overlay" (color=green)
7. add layer styel "stroke" (size=4, color=purple)
8. add layer style "bevel & emboss" (style=stroke emboss, technique=chisel hard, direction=down, size=5, soften=3)
9. add layer style "inner shadow" (distance=3)
10. duplicate "hula" layer; go to "hula copy" layer
11. edit > transform > flip vertical; adjust position
12. layer opacity=20%
13. new layer "white"
14. set foreground color=white
15. gradient tool: paint gradient to fade reflection (foreground to transparent)
16. save

animating the type

1. go to "hula" layer
2. window > animation
3. add new frame (frame 2 is selected)
4. layer > type > warp text (style=flag, bend=20% horizontal)
5. repeat with "hula copy" layer (use negative number)
6. tween (layers=all layers, tween with=previous frame, frames to add=5)
7. play 7 frames
8. select frame 7, add new frame (frame 8 is selected)
9. layer > type > warp text (reverse bend percentage on each layer)
10. tween (frames to add=11)
11. play 19 frames
12. select frame 19
13. tween (tween with=first frame, frames to add=5)
14. play 24 frames
15. select all frames (flyout)
16. change timing to 0.1 sec
17. optimize animation (flyout menu)
18. file > save for web "hula.gif" (setting=GIF 64 no dither, images only)
19. drag "hula.gif" into a browser
20. publish GIF as a link from your projects page