Skip to content

How to Create an Animated GIF

I know, who can resist the pull of the animated GIF and all its awesomeness?
Luckily these days you may not need Photoshop, although it’s my ol’ tried and true method. To create your very own, wondrous 8-bit color animated graphic you can try out these new and free online services.

The best way to think about animated GIFs, how they are created and how they work is to consider them to be digital photo flip books. Using a series of static images as frames, showing them rapidly in succession creates movement. The first flip books, called kineographs or “moving pictures”, were invented by a British printer in 1868!

Check out this Koko the Clown Flip Book to get an idea of what I’m talking about:

Koko the Clown Flip Book

Anyhow, now that you’ve had your history lesson, it’s time to create an animated GIF of your own.

Photoshop

  1. Open Photoshop. Then create a new image file measuring 300 by 300 pixels (could be any size though). Square is best or at least a good ratio to work in for these. Set the resolution to 72 pixels per inch and the mode to RGB color.
  2. Make sure your layers palette is visible
  3. Choose a series of images. Put each image on its own layer. If you want to animate, say, a stick man’s hand waving, you’ll need his body to be on one layer and his arm on another layer.
  4. Choose Show Animation from the Windowmenu

    Window menu in Photoshop

  5. Once the palette opens, click the icon in the lower-right corner that looks like a movie film strip. Your animation palette needs to look like this to be in Frames Mode. It’s much easier than the other modes to work in.

    Frames Mode for Animation

  6. Now, start to animate. Remember to keep in mind what you’ve learned about flip books and animation. Essentially, you want to make each frame a step in the animation. I have my stick man that I’m going to make wave. I have his limbs all on a separate layer, including a layer for each different position that his arm will need to be in to simulate a waving motion. I’m going to start frame one with him at a resting position. Then, each frame will be his arm moving upwards steadily.

    Play with the timing of each frame. It will make a huge difference in the speed, look and feel of your finished animation. You can change the duration of time that a frame is shown by clicking the down arrow in the lower right corner of each represented frame. See above how the first (blank) frame is highlighted with a zero-second label. That refers to the amount of time the frame will be shown.

    Also, Tween is a tool that is useful for smoothing and creating some effects, such as a fade, easily and quickly. You can select a couple of frames and click the Tween button in the lower strip of your animation palette. It’s the button to the left of the new layer button that contains four circles arranged diagonally.

    This will take some experimenting with the parameters, layers and how many frames to add. Have some fun with it and remember that there is always an undo button!

    Once you get a few frames in, you can test your animation by hitting the Play button (sideways triangle) in the lower strip of the animation palette. You can also stop and rewind, as you can see from the controls there. Lastly, you’ll most likely want your animation to loop forever (over and over). So, in the lower-left corner of your animation palette, click to change the looping from once to forever.

  7. Once you are happy with your animation, you’ll need to save it out as a GIF. Select File > Save for Web> GIF format from the menu list.
  8. Once you save out your file, you can preview it by dragging it into any open browser window.

Here is my, not so sophisticated, man waving GIF for your viewing pleasure. I used the tween fading effecting to show what it can do in a basic way here as well.

If you don’t own Photoshop, there are a few online tools that you can use to create your own animated GIF.

Gifninja

You can upload a video and it will chop your video up into a GIF file. Alternatively, you can upload a series of images and Gifninja will make frames out of each image to create a GIF that “flips” through them.

http://gifninja.com/

Other online GIF creation services

  • Picasion: Create an animated GIF file from of up to 10 images that you upload.
  • Gickr.com: Instantly create animated GIFs online by uploading your own pictures or grabbing them from your Flickr account.

Here’s what you’ll feel like after you create your own animated GIF!

Photo Credit: http://whatshouldwecallme.tumblr.com

 

Featured Image Credit: semwisdom.com

Comments

Tell us what you're thinking. Leave a comment.

There are no comments on this post.

Add a Comment

Fill in the form and submit it. Comments are moderated and may not appear to everyone immediately.

Bear