Tutorial > Animated GIFs in Adobe Photoshop CS and Adobe Imageready
Animated GIFs are simply short animations in .gif format (because it would not work for .jpg). Before you go on with this tutorial, please keep in mind that this might be a long and boring process, depending on the length of your video clip. Although this tutorial was written specifically for Adobe Photoshop CS, it should work for other versions of it, too.

1. Open Adobe Photoshop CS and have your screencaps (find out how to take them here.) ready. I recommend that you take your screencaps in regular intervals, the same number of frames between each cap. Or just take caps of the parts with the most action. Anyway, for simplicity's sake, let's do a simple three-frame animation for this tutorial. We'll be using these three:

2. Place each of your screencaps in a different order, with the last one at the top and the first one at the bottom, like so. Let's say I wanted the yellow one to be the first frame, and then the blue, and then the purple. The layer palette should then look like this:

3. Go to File > Edit in Imageready. Now Adobe Imageready will be opened.

4. Go to Window and make sure "Animations" and "Layers" are both checked.

5. On your animation window, you should see only one frame right now.

6. Now click this button twice to create two additional frames (for this example).

7. This is how your animation window looks like now.

8. On the animation window, click on the first frame so it is highlighted in blue. Now go to your layers palette. Holding your ALT button on your keyboard, click on the eye next to your first layer.

9. That hides all the other layers. But as you will see, on your animation window, you now have the yellow icon in all the frames. To change this, select the second frame in your animation window so it is highlighted in blue. Now go to your Layers Palette and click on the empty space where the eye should have been.

10. Now an eye pops up in that empty space and you see the blue icon on your animation window, in the second frame. We continue to do this for however many frames you have (this is the annoying part if you're dealing with a lot of frames). So for the third frame, once again, you select the third frame in your animation window so it highlights in blue. Then you go to the Layers Palette and click on the empty space where the eye should've been, this time next to the third layer.

11. Once again, an eye pops up and you now see the purple icon on your animation window as the third frame. You're done! Now, to save it, just go to File > Save Optimized As and save it. Make sure it is saved as a gif file.

12. To play the animation, click on the play button at the bottom of your animation window (I think you can figure this one out).

13. Optional: For this animation, the frame speed is too fast so I adjust the frame speed. To do this, click the button circled in red and go to Select All Frames. Now that all frames are highlighted, you see the part that says 0 sec below each frame? Click on that to change the speed between the frames. I chose 0.5 sec for this example.

Here's my final animation!