Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Graphic Design Exercises
Photoshop: GIF Animation Demo

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 for other backgrounds from www.sxc.hu
    (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 Google Page Creator
    (tip: edit HTML and change image link to "hula.gif")

BACK TO TOP
Last updated: 3/2/17 ■ Webmaster: Paul Young