How to Make an Animated Gif

Let’s face it—animated gifs are all the rage. Wondering how to create one? Here’s how we animated our old pal Bob Ross.

To follow our instructions, you will need:

  • Adobe Photoshop (I used the 64 bit version, which cannot export animated GIFs, so instead I used Flash for export)
  • Adobe Flash (for the animated GIF export)

To start, create a folder for your project—you’ll be keeping all of your video and photo files there.

Now you’ll need to find a decent video clip, nothing too huge; we’re going low-fi here. You can also use pencil sketches, basically anything, as long as the animation is tight. Place your video clip in a subfolder of your folder.

Note: An animated gif is essentially just a collection of still images, shown consecutively, so we’ll be breaking down your video file into still photos.

Now open Photoshop and head up to the top menu bar.

Select File -> Export -> Render Video

 You should see a screen like the one below:

Click on “select folder…” and navigate to the working folder you created.

Make sure that Image Sequence is selected.

Change any other settings that apply.

Select Render to start the process (Warning! This will produce an insane amount of jpgs if you have a long clip, or keep the Frame Rate high.)

Once you have your rendered frames of the video, now it is time to tweak them, what I typically do is select the range of photos and open them in Preview like the image below.

Next, use the up and down arrows to scroll through the images until you find a sequence you like.

Be sure to take note of the image numbers at the top of the window (in this case “Tribute to Bob Ross2440.jpg”) for your stop and start points as you will use this in the next step.

Now in a finder window select the range of images you want and drag them into a new folder. (Note: you can create loops by taking the images and copying them, and reversing the order, sometimes to hilarious effect.)

Once you have all of your images arranged, and in the sequence you want, rename the files so they are arranged in a sequence. (Image1.jpg, Image2.jpg, Image3.jpg, Image4.jpg, etc). This will pay off later, and is quite painful. There are tools out there that can help, but with something this customized it is usually better to do it by hand. Once you have your images renamed in the correct order, it’s time to bring them into Flash. I am sure there are much easier tools to do this with; I simply used what I had available. So if you find a new shiny tool that does this well, feel free to share it and use that tool instead.

Open up Flash, and start a new document.

Next, go to the main menu and select Modify -> Document.

Enter in the width and height of your image sequence.

Next, select File -> Import -> Import to Library.

Navigate to the folder containing your image sequence and import the files.

Place the first of your images onto the stage in flash.

Highlight your first frame on the timeline.

Hit F6 until you have the amount of frames in your image sequence.

What you have done is simply used your first image as a placeholder for the frames of your animated GIF.

Now, replace the frames on the timeline with your desired images until you have constructed the sequence you want.

Here is how this is done:

  • Click the frame on the timeline you wish to change. Make sure the red marker in on the frame you want.
  • Next, right click on the image and select “Swap Bitmap…
  • Select the new image you wish to replace it with and click ok.
  • Repeat until the entire sequence is on the timeline. (You can move the play head back and forth on the timeline with the comma and period keys to check your work.)
  • Once your sequence is completed, select File->Export->Export Movie and select Animated GIF as the file type.

And you’re done!

To view your new masterpiece, navigate to the folder where you exported the gif, and drag and drop it into an open browser widow. Voila!