Today, GIF is not as popular as it used to be, but that doesn’t mean that it’s already useless. The format can still come in handy whenever you need small sized moving images, something like an animated avatar (for Twitter, for example), a revolving logo for your website, or even a photo slideshow.

There are several image editors that could help you build GIF images. But if you need a quick tool while you are away from your home computer, web tools would be easier to access. Recently, I stumbled upon two web tools that could help you create and manipulate simple GIF animations - Picasion and Playgif.

Creating GIF Animations

Basically, a GIF animation is a set of images merged into one and displayed one by one in a continuous loop. So, to create one GIF animation, you’ll need several base images.

Creating a GIF animation using Picasion is very easy. Prepare a set of images that you want to convert to GIF and add them one by one using the “Choose File” button. Even though there are only three buttons available by default, you can add more than three images if you need to by clicking on the “Add one more picture” link.

You can choose the image size you want from the “Size” drop down list.

You can also choose the speed of the animation.

In my experiment, I created five pictures to build the animation. I used an image editor to write a word while taking one screenshot of the window every time I added a letter. Then I added the screenshots to Picasion.

If you want to build the animation using web images, you can choose the “URL” link and write down the addresses in the field provided.

It’s also possible to add images from your computer’s built-in webcam shots. Choose the “Webcam” link, then allow Picasion to access the camera and microphone by clicking on the radio button next to “Allow“.

Then click the “Capture” button to take the shots. Set the timer if you need time to prepare before your picture is taken.

After you’ve put all of your images in place, scroll down to the lower part of the pane and click the “Create animation” button.

Picasion will then process the images and show you the result, along with the option to share it via MySpace, Facebook, and/or Twitter.

Picasion will also provide you with links related to the animation, including HTML code that you can put on your website. There’s also the link to download the animation to your computer.

I copied the HTML code from the GIF animation that I created and pasted it into this post. Here’s the result.

I know my example is very simple, but you can create more complex GIF animations by putting more images in one file. The possibilities of the kind of GIF animation you can create is limited only by your imagination.

Play With GIF

If you want to make your GIF animation more movie-like, you can try Playgif. This web tool will add a play/pause button to your GIF, along with options to adjust the speed, and to play the animation in reverse.

You need to provide Playgif with the weblink to the GIF and click “Start gif player“. You can put the direct link from Picasion here.

After generating the frames, Playgif will display your animation with all the playing options. Unfortunately, this modified GIF is only viewable on the Playgif site. You can’t download it or embed it to other locations.

Do you still use GIF animations? How do you build the GIFs and where do you use them? Please share your methods using the comments below.

Image credit: jrubinic

Creating your own animated .GIF from a movie can be a lot of fun. Animated .GIF images can be used as an avatar on a website or can be distributed among your friends. And while there are many animated .GIF images already made, creating your own will give you a distinct, unique image.

The weapon of choice in this tutorial is Windows Movie Maker. We won’t be using Windows Movie Maker to turn the file into a .GIF image, but we’ll be using it to edit the movie file so it can be easily turned into an animated movie .GIF image.

Step 1: Loading The Movie

First, we need to load the movie file. In this example I am going to use an episode of Top Gear, the famous British car show. In this episode Jeremy Clarkson tests the Ford Fiesta by driving it through a shopping mall with a Corvette in hot pursuit.

First we need to drop the movie file into Windows Movie Maker so that we can begin editing. You can do this by dragging and dropping the movie file into Windows Movie Maker. Alternative, you can go to File > Import Into Collections. Once you find the file you can select it to import the file. It will appear in the Collection area.

Now that we have the file in the Collection area, we also need to place it into the timeline below so that we can edit the file. Simpy drag-and-drop the file from the Collection area to the timeline at the bottom of the Windows Movie Maker window. This will allow us to begin editing the file down.

Step 2: Editing The Movie

An animated .GIF is only a tiny fraction of a movie. The loop on an animated .GIF usually lasts from a couple seconds to ten seconds. The reason for this is that animated movie .GIF files actually can become very large very quickly. Each frame is like a separate image. Animated .GIF images above twenty or thirty frames in size can exceed one megabyte in file size. This isn’t ideal, so you’ll need to trim down the movie to the specific part you want to make an animation of.

To do this you’ll need to crop the movie file. First, you’ll probably need to zoom out on the timeline. You can do this using the magnifying glass icons just above the timeline. Now, click on left edge of the timeline and drag to just before the part of the film you want to turn into an animated .GIF.

You will know that you are cropping the image when the cursor turn into a red double-sided arrow. Now go to the right side of the timeline and do the same thing, cropping the movie file until just after the part of the film you want to animate.

Now that we have this smaller clip, we’ll want to use the magnifying tool to zoom in. Now you simply need to start cropping the movie further until you’ve found the exact part of the movie that you want to animate. Remember, if you crop too much you can just undo your crop by pressing Ctrl+Z. Your finished, cropped video shouldn’t be much more than ten seconds in length in order to keep the file size down.

Step 3: Exporting The File & Making The Animated .GIF

Now that we have the video cropped down to a manageable size we need to export it.

On the left of Windows Movie Maker you will see the Save to my computer option under the Finish Movie section. Click on that option. You will be asked to name your file on the first screen – do so and click Next. Now you need to decide what type of movie you want to create.

In order to keep file size down our animated movie .GIF can’t be a very large image. To achieve this I recommend using the Video for Pocket PC setting. This creates a video file with a size of 208 x 160 pixels, which is small enough to work as an animated .GIF.

Now that we have the video, we need to convert the file into a .GIF. This is one thing which Windows Movie Maker doesn’t do for us, but there are websites which will. Using the instruction in the Makeuseof GIF Ninja tutorial, you’ll easily be able to convert the video file into an animated .GIF.

The results? Well, here is what I ended up with.

Cool? Now you can make your own animated .GIF from any movie you want! Share your productions in the comments.

However, there are not very many good GIF editing programs available for free. Those which are available for free usually have some pretty hefty strings attached, such automatically placing a watermark on the image or requiring that the image size be below some ridiculous standard. Those animated .GIF programs which are truly free are usually web-based GIF maker apps, not tools which exist on your computer.

Luckily there is a powerful tool for creating animated .GIF images which doesn’t cost a dime. GIMP, the popular free image editing software, has the ability to create animated GIFs. Below are step-by-step instructions on how to make animated GIF images on GIMP.

Step 1: Starting Your GIF

In this tutorial, we are going to create a simple .GIF image in which we’ll have the words “This is how you make a .GIF image” appear in succession one by one.

To start go to File and then click on New. Create an image which is 300 pixels wide and 100 pixels high.

Now, go to the Text Tool in the toolbox. It is represented by the large ‘A’ icon on the right side of the GIMP Toolbox.

Click in the upper-right corner of the image. This should open a small window called GIMP text editor. Type in the word “This.”

Now go to Layer and then click on Duplicate Layer. Use the text editor again to include the word “is” after “This.” Duplicate the layer again and then type the new word, “how.” Continue this process until you have the entire sentence “This is how you make a .GIF image.” Don’t worry about having the words perfectly aligned – this is just a test, after all.

Step 2: Creating the Animation

You now have a .GIF image with numerous layers. This is the basis of what you need to create an animated .GIF with GIMP, but you’re not quite there yet. Right now, you just have an image which will display the text all at once.

First, let’s view the basic animation of your .GIF by going to Filters > Animation > Playback. Click on Play in the upper left. The animated .GIF will play back fairly rapidly, looking something like this.

That’s way too fast for most .GIF images, so you will probably want to play with the timing a bit. There are two ways which you can do this.

Step 3: Manipulating Your .GIF

The easier way to change the timing is when you actually create your .GIF image. Go to File and then Save As. When you are prompted for a file name make sure you add .gif to the end of the file name. You will be prompted with a box which will ask if you’d like to flatten the layers in the image or convert them to animation. Click on the option to convert them to animation.

The next screen will have an option called Delay between frames where unspecified and then a number field. Change this field from 100 to 400 and then click Save. You will end up with something like this.

Much easier to read, isn’t it?

However, you may decide that you’d like to change the length of each frame of the .GIF individually. If you decide to do this you’ll need to edit the layers

Go to Windows > Dockable Dialogs > Layers. This will open the Layers window. Each individual layer in the .GIF file will be shown here. Right click on the first layer, which is called This, and click on Edit Layer Attributes. Type in the text (100ms) after the word ‘This’, then click Okay.

Do this for each layer after words, but increase the number by 100 each time. Now save the file as a .GIF, and make sure that the layers are saved as animation. You’ll end up with a .GIF where each word appears slower than the one prior, such as below.

These are the basics you need to know in order to create .GIF images with GIMP. By manipulating the timing of each layer, you can create very intricate .GIF images which are customized to fit your needs. Forget dedicated .GIF programs – GIMP can handle your animation needs without a problem.

Questions? As usual, let them loose in the comments.