Objective

To learn motion design by example. To be introduced to Photoshop's animation tools by recreating the following GIF animation:

Procedure

prepping the art

1. download starter files
2. launch Photoshop
3. file > new: 468x60, 72 ppi, RGB, bg=white
4. file > save as "bug.psd"
5. choose a green foreground color
6. fill background layer with green (opt+DELETE)
7. type "Spring is here."; spec Arial Black; scale (cmd+T)
8. type "It's time for Prairie Gardens. 356-5558"; scale (cmd+T)
9. file > place "bug.ai"
10. position bug for the first frame (offstage top)
11. hide "bug" layer
12. window > animation

animating the bug

1. dupe frame #1 (you are now in frame 2)
2. reveal "bug" layer
3. dupe frame #2 (you are now in frame 3)
4. move bug to final position
5. add tween: 7 frames (flyout menu or click icon)
6. check your work (click on one frame at a time); play animation
7. select all frames, set delay to .2 seconds
8. adjust positio of bug randomly
9. in first 5 frames, reveal "it’s spring" layer
10. in second 5 frames, reveal "prairie gardens" layer
11. adjust animation; loop=forever
12. file > save for web "bug.gif" (GIF 32 no dither)
13. open animated GIF in a browser (drag and drop)
14. publish the animated GIF on your projects page