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.
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
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
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
Editor's Notes
Reminder: August 29, 2008 – Last Day to Add and Last Day to Drop for a Refund of Fees