Tuesday, March 22, 2011

How To Make an Animated Gif in Photoshop

Hello Students,

Making an animated Gif is super easy. You can make fun simple animations with ease, create one to add to your website. It could replace a banner, or just be a small animation on your home page.

How to make an animated Gif with Photoshop CS5:

  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation.






  • Go to the WINDOW / ANIMATION palette and set up your frames across the timeline. Drag the ends to begin and end a frame. Use the play button to watch the animation.






Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options.



Open your Gif file in a web browser to test it. Here's my result:





If you make an animated Gif file make sure to post it to your Blog as well as using it in your current website project. Have fun!

 - SW