Objective

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

Discussion

Of all the ways to create visual emphasis ("focal point"), movement is the most powerful way to catch the eye. Making things move on the web is easy and can be whole lot of fun. But, please learn to use animation with restraint.

Animation is defined as making inanimate objects come alive. In cartoons, this is done by sequencing drawings that are slightly different from each other (i.e. a "flipbook"). In movies, this is usually done 24 frames a second. In web animation, we can get away with fewer frames.

The GIF file format can handle simple animation (we'll need Adobe Animate or After Effects for more complex animation). Because GIF a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:

• keep the dimensions of the animation area small
• limit the number of colors (avoid photos, if possible)
• keep the number of frames to a minimum

Procedure

prepping the art

1. download starter files
2. launch Photoshop
3. file > new: 468x60px, 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 tool: Helvetica Black: "Spring is here."; scale (cmd+T)
8. type tool: "It's time for Prairie Gardens."; scale (cmd+T)
9. file > place "bug.ai"
10. position bug for the first frame (semi-offstage top)
11. window > layers: "bug": deselect unify properties (unify layer position, unify layer visibility, and unify layer style); propagate frame 1 = no
12. window > timeline: dropdown: make frame animation; click button

animating the bug

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