Objective

To be introduced to Photoshop's animation techniques 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 Flash 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

creating the animation

1. download starter files
2. open "hula.psd" in Photoshop
3. explore layers floating panel
4. window > animation
5. add 11 frames (total of 12)
6. reveal and hide layers for each frame
7. play the animation
8. adjust timing
9. file > save for web "hula.gif" (preset=GIF 64 no dither)
10. view GIF file in a browser

add a new background

1. search Google for other backgrounds (tip: look for images with few colors)
2. download and test several different backgrounds to above file
   (tip: scale, rotate, crop; alter color, contrast if desired)
3. image > canvas size (optional)
4. file > print with preview
5. also publish to your process page