This document provides instructions for an ARTDM 170 Week 2 homework assignment on creating GIF animations. Students are asked to: 1) Create two GIF animations - one artistic/creative animation and one looping loading animation. 2) Save their animations and other files in a folder with their last name and initial and submit it through a Dropbox link. 3) The document reviews basics of GIF format and provides tips on creating animations using layers in Photoshop.

1. ARTDM 170 Week 2:
GIF Animation
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/

2. Turn in Your Homework
Meta Refresh Slideshow Files

3. Your Folder
• Put everything in a folder with your lastname
and first initial.
• Drag and drop your folder onto my dropbox
• Example:
smith-h
slideshow
slide1.html
slide1stop.html
slide2.html

4. General Folder Organization
• Click to add content

5. General Folder Organization

6. Volunteers?
Meta Tag "Refresh" Animations

7. GIF Animation

8. GIF Basics
• Pronounced "JIF" like the peanut butter (but it
depends on who youʼre talking to.)
• GIF is a format for images on the Web
‣ Transparency
‣ Small Images
‣ Limited to 256 color palette
• Good for line drawings, large blocks of color,
computer generated graphics
• Ability to animate a series of images

9. Where are they on the Web?
• Banner ads!
• Spinning 3D logos!
• "Under Construction" pages
• Mailbox icons
• Talking or Blinking Cats
• MySpace comments

10. Where else are they?
• Loading animations
‣ Orbitz
‣ Expedia
‣ Common AJAX

11. Where else are they?
• Animated headers and Flash
alternates

12. Where else?
• ART
‣ Katie Bush

13. Letʼs make a GIF
Animation

14. Photoshop for GIF Animation
• In Photoshop, open the Animation
window.
• Make frames from layers
• Turn layers on and off for each frame
• Adjust duration and looping
• Use Save for Web and Devices...

15. Tips
• Turn off layers before duplicating
• Duplicate any elements that need to
rotate or change in size
• Use the same layer for changes in
position

16. Homework, due Feb 9
• Create two GIF animations
‣ Artistic, creative animation using
photography, drawings, or some
other artwork
‣ Create a loading animation that
loops forever
• Watch this tutorial on creating
loading animations