Welcome to Dagon Design. In addition to free scripts, WordPress plugins, and articles, we offer a variety of services including custom theme design, plugin creation, and PHP scripting. Contact me for more information.

This article describes my method of creating animated gif images from DVD movies. This technique is perhaps most useful when coming up with new avatars and signatures for forums. While animated gifs are not really useful for much else, they can be fun to make since you can learn a lot of new things as you experiment in Photoshop.

Requirements

Photoshop / ImageReady – CS2 is preferred.

PowerDVD – You can use any DVD playback software that can capture frames, but I find this one to be the best. The instructions below are for version 5.x.

A DVD-Rom Drive – To play the DVDs in your PC.

Instructions

Open up your DVD in PowerDVD.

In your configuration options, under “Player Settings“, click the “Advanced” button. Then select the “Snapshot” tab. Select the “Capture to file” radio button, and then choose the directory for your captures. Then exit the configuration. This is where the screen captures will be stored.

Now you can skip ahead in the movie to the scene you want to capture. Decide exactly which frame you want to start and end on. The shorter the better since animated gifs can get very large if you have a lot of frames.

Starting with the first frame, hit C to capture. Then hit T to move foward one frame. Repeat this process until you are at the end of the desired scene.

If you know ahead of time that you will end up with quite a few (several hundred) frames, you may want to only capture every other frame, or every third frame. You will just have to experiment to get the best results.

For this example, I am using a small scene from the SpongeBob SquarePants movie. I ended up capturing 27 frames. Now let’s open up ImageReady.

In the ImageReady menu, select “File” -> “Import” -> “Folder as Frames” and select the directory.

This will create a new file, where each frame is in it’s own layer. Now we need to transfer this to Photoshop. The best way is to simply click the bottom button on the main toolbar (shown in green in the image to the right). This transfers the currently active file directly to ImageReady (or back to Photoshop if you are already in ImageReady).

It is worth mentioning that you should save your files often, because you don’t want to have to start all over if you make a little mistake with the project.

Now you can crop and resize your frames. Since each frame is on its own layer, any resizing you do in photoshop will affect all the frames, which is much easier than repeating the same steps over and over, or setting up a macro. After resizing, here is my first frame (layer) from the PSD file:

If you like, you can add special effects, fonts, textures, brushes, etc. This must be done on a new layer (or layers) so that it can be applied to all of the frames in the following step. Be sure to put these new layers above the others. I created 2 new layers for this example. One for some text, and one for a border:

Now your layers list should look something like this:

There are of course several other frames down below that are not visible. Now that that’s done, click the toolbar option to transfer this back to ImageReady.

Take a look at the animation window near the bottom of ImageReady. If this is not already visible, select “Window” -> “Animation” from the menu to display it.

The far left frame is the first one in the animation. Highlight it. Now you must select (make visible) the layers you want shown on this frame. This means you want the first captured frame (the very bottom layer), and the special effects layers visible. Everything else should be hidden. (Click the little eye next to the layer to hide/unhide it).

Now move on to the second frame. The only thing you want visible for this one is the special effects stuff, and the second frame from the capture.

Just continue this process for each frame. This part can be time consuming, but depending on how everything was done, a lot of the frames will already be set properly.

Once you are through with this, you can click the play button near the bottom of the animation window. This will show you a preview of the animated gif. If you see any errors (like frames jumping in the middle), you probably did not set a frame correctly.

You can also adjust the time each frame is shown with the little drop down menus under the frame display. Or if you decide that you have too many frames, you can delete them directly from the animation window (the trash can icon).

Now go to “File” -> “Save Optimized As”, and give it a name. You now have an animated image. Here is mine:

As you can see, this is an extremely basic example and it does not look that great, but it is easy to imagine the possibilities.

Final Thoughts

To make smoother animations you can take the frames you have, duplicate them, and then reverse. For example, say your frames are numbered 1-2-3-4-5. Try using them like this: 1-2-3-4-5-4-3-2. Now there will be a smooth transition, with no big jumps each time the animation is looped. This of course depends on the specific animation in the file, but once again, you can experiment.

There are many other things you can do, but this guide is simply meant to get you started. Have fun!

This post is truly inspiring. I like your post and everything you share with us is current and very informative, I want to bookmark the page so I can return here from you that you have done a fantastic job …

Before you comment: If you are having an issue with a script, please make sure you have read the entire article. Also, please read through the comments because most common issues have already been discussed many times. Thanks.