Jump to content

Tutorial: How to make animated-gifs


Recommended Posts

The purpose of this thread is to explain how to create animated gifs from a video. You can post the names of the softwares you usually use and how they work. I start with my method:

Softwares I use:

Quicktime 6.5 pro (pro version is not free, but I'm sure you can get free softwares to do the same thing)

Warning: Quicktime isn't able to extract a selection of an mpeg vid. And I don't know how it deals with divX files on PC

If you work with a PC, u can use BSplayer with Neo's method.

Adobe Photoshop (it's not a must)

Adobe ImageReady

Intro: An animated gif is a package in wich are stored several pictures. In other words it's a sequence of pictures. So, to convert a video to a gif we need first to convert it into a series of pictures. Each picture of this series correspond to a frame of the video.

First step: Video ---> a series of pictures

I use Quicktime pro on Mac OS X:

First, I select the part of the video that I want to convert into an animated gif. Whith Quicktime I select it and I copy-past to a new document. Then I export this new vid as "Image Sequence".



There are several options such as frames per seconds, file format for the pics. I use 25 fps and TIFF format.

There's another way to get a sequence of pics. You simply can make screen captures on each frame of the vid that interests you. It's a bit more boring and time consuming, but it works well and it's completely free. Neo uses BSplayer, and it seems to be quite easy to obtain your screencapts.

Second step: cleaning the pictures with photoshop

This step is optionnal. The work to do depends on what you want to obtain. Let me give you an example with my avatar:

Before post processing I had pictures that looked like:


And after I had that


I have recentered, resized and deinterlaced all the pictures previously obtained. This is what my pics needed, you have to find yourself what treatment your pics need (maybe they don't need any).

I've made a little photoshop-action to do that. Making actions is really easy. All you you need to do is to create a new action, press the record button, you do what you have to do on the first pic and then press the stop button. You have now a model of the tranformations to perform on each other pic.

Screen capt of the actions window in photoshop:


Photoshop allows to work on pictures in batch. The function is located in file->Automate -> Batch. The use of this function is quite easy: you choose the action to execute, the source folder (containing the source files) and the destination folder.

Now, we can create the animation.

It should be possible to do this step directly with imageready, but I don't know how.

Third step: creating the gif with Imageready.

This step is very easy. Just click as follows:

File -> Import -> Folder as images and choose the folder where are stored your pics. Your pics open in the same document: it's the model of your animation. At this point, it's a good idea to save this document and to keep it as rescue copy.

In the main window you have several tabs: one is named "optimized": it's the one we are going to work with. It shows the document as it will be after the export.

In the right top corner, you have a window that allow you to change the optimization parameters. You have several options. You have to select a gif format in order to obtain an animation. You can change the others at your own convenience. In the main window you can see the size of the optimized file (which is a preview of tour final file). An usefull parameter of gif files is the time between each frame. You can set it in the animation window (see the screen capt). To set the time of all frames in only once, select all the frame and set the time of one, the change will be applied to all.

The preview button allows you to preview your optimized pic in a web browser. It's very usefull.

Once you have set all your parameters, you can export your file: file -> "save an optimized copy" And that's all.

Screen Capture of Imageready:


Please feel free to make comments, remarks or to ask questions on this tutorial. If you know a faster/simplier method, please post it here.

This tutorial has been improved thanks to Neo52285, big THX Neo :yes:

Link to comment
Share on other sites

I don't think so. Photoshop and Imageready should work exactly similar. The matter is with QT, I don't know how the PC version work. But I'm sure it exists some others softwares to do the same thing it does.

Link to comment
Share on other sites

Yeah, if someone could give the name of PC softwares, that would be nice.

On the other hand, Adobe Imageready exists on both PC and Mac, you should be able to get a copy. I think the method I explain bellow is independent of the OS you are running. The trouble is to find a free software to perform the conversion from movie into sequence of pics. Some ideas anyone?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...