Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 10


CIS 152 WEB DESIGN I
Lesson 10: Animated GIFs
Instructor: Paul Young

 

 
 

Objectives

 

  

To become introduced to simple GIF animation for the webby recreating this page.

 

 
 

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

 

  

Overview: Create layers with key art. Assign layers to keyframes. Adjust timing, optimize. Test, publish to server.

Creating the animating

  1. copy files from "cis152/upload/"lesson9_html"" to "lesson10_html"
  2. open "lesson10_html/images/home-logo.gif" in ImageReady
  3. save as "home-logo-animated.psd" (in prep/lesson10)
  4. duplicate "layer1" 3x, rename "small", "medium" "extreme"
  5. reveal only "small" layer
  6. filter > distort shear (add anchor points, move small amount)
  7. repeat with "medium" and "extreme" layer
  8. window > animation: add 4 new frames (total of 5 frames)
  9. reveal layers on each frame: frame 2=small, frame 3=medium, frame 5=extreme
  10. adjust timing (f1=1 sec, f2=.1 sec, f3=.1 sec, f4=2 sec, f5-0 sec)
  11. play animation
  12. window > optimize (GIF 32 no dither)
  13. file > preview in browser
  14. file > save optimized as "home-logo-animated.gif"

Publishing the animation

  1. launch Dreamweaver
  2. define a new site (site > new site): name=lesson10,
    local root folder=cis152/upload/lesson10_html
  3. open "index.html"
  4. swap "home-logo.gif" for "home-logo-animated.gif" (double-click)
  5. file > preview in browser (F12)
  6. grading: publish and make links from your personal web site to this lesson

 

 

BACK TO TOP

______________________________

Last updated: 11/4/06 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts