Animated GIF in Photoshop CS4 Tutorial

Inspired by the Noise Professor’s decision to make his animated GIF in Photoshop, I decided to play around with that tonight and ended up learning a good bit and with a much better process and product (fewer programs, higher quality).

I didn’t know you could do this all in just CS4.

Video to Images

Capture video frames as stills to layers – you can even select portions of the video right in the import window. You’ll now have all the frames as images in individual layers.

Animation Window

Open up the Animation Window1

Eternal Looping

I set it to loop eternally. It’s right there in the bottom left hand portion of the animation window. If you forget you have the option to set this again when you do the final export/polishing.

Frame Speed

Shift click to select all the frames and you can change the animation speed all at once.

Animate the GIF

I saw this was impossible in a number of places and if you go to the normal Save/Save As location, it is. There is actually an option below that on the menu that is “Save for Web & Devices.” Somehow I never saw that. You’ll have Animated GIF as an option here.

Polish It Up


1 Never opened this before

Comments on this post

  1. Noise Professor said on December 16, 2010 at 2:43 am

    Sweet. I knew that Photoshop would save GIFs, but I never thought to use it to save animated GIFs. Looks like it has pretty much the same tools as Fireworks, so it will definitely save a step.

  2. Jim Groom said on December 16, 2010 at 4:22 am

    This is very nice, and now I want to come up with a method that is free given I don’t have cs4. Why do the animated gifs get shrunk? How did you avoid that with your brilliant flavor flav animate gif? I have yet to try this, but amazingly now I have a number of tutorials to choose from. Your idea for throwing assignments out there early has obviously taken off, and the animated gif has been a sick hit—I love what has come through the wire. And I am looking in from the outside forlornly 🙂

    • Tom said on December 17, 2010 at 11:13 am

      I think the shrinking of the gif has to do in part with the original video resolution and whether you choose a hi-def download or not. None of that is based on facts, just guesses and trying to remember the key differences in what I did for each process.

  3. noise professor said on December 16, 2010 at 10:43 pm

    Stellar work product by the way. I was always amazed at the contempt shown by Christopher Walken in that scene. Doesn’t he spit on Dennis Hopper? Brutal.

    • Tom said on December 17, 2010 at 11:12 am

      Yeah, I love that movie. Hopper and Walken in that scene do such an amazing job. True Romance is one of those chronically underrated movies.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL