WikiHow | How to Create Animated GIFs Using PS CS3

http://www.wikihow.com/Create-Animated-GIFs-Using-Photoshop-CS3

What I Learned

The tutorial was extremely helpful to me as it was just what I was looking for. It was short, easy to understand, and simple to replicate. The authors also did an excellent job on keeping it to general steps that you could apply to any project you needed. The strongest help for me was the visual screen shots along with the video.

I had a few insights going through the tutorial (and while I was working on my own GIF creation):

  • Animation tools are built right into Photoshop (so much for years of looking around forImage Ready from good old CS).
  • Photoshop layers can be made directly into frames ordered according in relation to the layer stack.
  • The time delay feature at the bottom of each frame is amazing (there is no need to bloat your file size with hundreds of the same static frame just for a slight pause).
  • The "Save for Web" option not only nicely optimizes your animation for the web, but it is the only way I have found to save it into a GIF format.

How I Applied it to the Site

I decided it would be nice to have a sublte, yet noticeable effect on the site; something that would not be distracting, but rather like an afterthought. From this tutorial, I decided that I would make a simple GIF animation that would shift the green header color to blue and back again. I followed along, and after some trail and error, I created a GIF that effectively accomplished the task. As you will see, every 30 seconds, the color will change.