Gif Animation

Project Goal: Create a Gif animation that demonstrates, (1) tweening, (2) variations in speed and direction, (3) use of animated graphic or photographic imagery, (4) use of animated text, (4) color cycling, & (5) size transformation.  Gif Animation will be used to supplement the current masthead that is being used within your web site template.

Directions: 

1. Launch Photoshop.  Create a new document that coincides with dimension of your templates masthead. Target the documents resolution at 72dpi.
2. Go to the top of the screen in Photoshop and go Window > Animation.  Be sure to select Frames rather than timeline.
3. Create or import graphics / photographs into document for animation. Create gif transparencies when needed.
4. Consider a variety of "Pans" or movements (left, right, up, down, ). Consider the pace or speed of movement, color cycling, size transformation. 
5. See class demo for animation instructions.
6. When animation is complete, preserve your work as a .psd file.  Save one additional copy as a Gif file.  Go File > Save for Web & Devices > Gif.
7. Once animation is completed, import Gif file into your Root Asset folder.  Update CSS code by swapping out the background image for the new Gif animation file.  Animation can be seen once previewed on a web browser.