Pinterest Stumbleupon Whatsapp

create gif animationsIf a picture paints a thousand words, then a picture animation would paint millions of words. One of the first things that people did in the early days of the Internet was to try to put moving images on the web, and long before the era of Flash, the only way to put animations on the web was to use GIF images.

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 How to Make an Animated GIF Image with GIMP How to Make an Animated GIF Image with GIMP Read More , 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.

create gif animations


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

make gif animation

You can also choose the speed of the animation.

make gif 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.

make gif animation

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.

create animated gif

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“.

create animated gif

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

create animated gif

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.

01e advanced option

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

03a share result

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.

03b result link

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

gif animator

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.

04a playgif

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.

create gif animations

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

Leave a Reply

Your email address will not be published. Required fields are marked *