From Wired How-To Wiki

GIF images (short for Graphics Interchange Format), introduced by CompuServe in 1987, were one of the first two image formats used on Websites — they were even around before the JPEG. While people's terrible judgment and poor site-building skills gave animated GIFs a bad name during the home computer boom of the late '90s, they are still used en masse on the Web. And when it’s time to bring the lulz, knowing the way of the GIF is key. Not only can GIFs do the work of a thousand words in self-expression, but they can also serve as funny mini-videos, showing the user a short clip without having to go through the trouble of buffering a video.

Here’s a crash course on manufacturing GIF web gems using Adobe Photoshop or the Web.

This article is part of a wiki anyone can edit. If you live for the lulz, please log in and contribute.

Making Animated GIFs in Photoshop

Before You Begin

This tutorial is for Adobe Photoshop CS3 and CS4. Procedures may vary for CS5, but are likely exactly the same.

There are two types of GIFs that can be made in Photoshop. One essentially mimics a video in its dynamics; each frame is a total replacement of the previous, all frames an individual photo. The next uses photoshop’s “Tween” feature (don’t worry, you’re allowed to do this even if you’re not a raving Justin Beiber fan with a crackly voice). This feature allows you to indicate the starting and ending point of an object or image and photoshop will then create the illusion of motion by creating multiple frames between those two points.

Frame-by-frame animation

This method is best when using a set of pictures taken in rapid succession. I’ll use this GIF I made of the Google+ pwning Facebook meme as an example. You can use whatever series of images you’d like though.

First, open all of the images in Photoshop. If they’re not all the same size, resize them so that they are. Note:it’s usually best to resize to the width of the smallest photo in the set, that way there’s no image distortion or pixelation.

Once all the images are open in Photoshop, select which image you want to put first in your animation. Now click and drag all of the other images into this one. Different versions of photoshop do this differently, but if you click and drag an image onto the tab/window for another image, it should create a new layer for the image you just dropped on. Line up the images so they are perfectly overlayed. Do this for all of your images (only once) and you should end up with something like this:

Select “Window” > “Animation”, and you should see something like this:

This is where you’ll create the individual frames for your GIF. Click on the first one (it should be there as soon as the Animation panel opens and turn off visibility on all layers except the one you want to appear first in your GIF by clicking the eye icon next to the layer.

Next, click the “new frame” button at the bottom of the Animation panel. This should create a second frame to the right of the first. With the new frame selected, turn off visibility on all layers except the one you want to appear second. This is also where you would move any overlayed images such as the logos in the example image above. Keep repeating this process for each frame you’d like to have in your GIF.

When you’re done, you’ll have a line of frames like this:

Tween animation

For this kind of animation with Photoshop, you don’t need any starting image. You can create a layer (I’ll use a poorly drawn arrow) and mimic motion within the layer. Here’s how:

Import or draw something (it shouldn’t take up the whole canvas, because it will be moving along) onto a Photoshop layer (not the background layer). Place the item in the spot on the background image where you’d like it to start. Open the animation panel and add a new frame as you did in the beginning of the previous section. In this frame, place the item in its final position. In my example, the arrow shoots off the edge of the image. To do this, simply drag it off the canvas (it will no longer be visible) to its final position.

Next, select “Tween...” from the dropdown on the top right corner of the animation panel (location may vary, but it should always be on the animation panel). You’ll have various options here, but the two to pay attention to are “Tween with:” and “Frames to add:.” For “Tween with,” select “Previous frame.” For “Frames to add,” you can choose the number. Higher numbers will create smoother motions.

Once this is finished, press “OK.” You should now have more than your original two frames. Photoshop has used the start and end points you gave and placed the object on various points along the path between them.

Some GIFs combine both layer visibility changes and motion using Tween. You can alter any existing frame of your GIF by clicking on it and then making any desired changes.

The final step is to add the timing. At the bottom of each frame is a dropdown menu that allows you to select how long you want each frame to show. If you want them all to have the same amount of time, you can select multiple frames using the shift key. Once your times are set, you’re ready to export!

Select “File” > “Save for Web & Devices.” Make sure to export it as a “GIF,” and then press “Save.” You can mess with other settings here as well, but you’ve done all you need to do to make an animated GIF. (

Once you’ve saved, open the GIF in your browser and marvel over your creation!

Making Animated GIFs on the Web

Picasion

Picasion is a website where you can upload multiple image files and have them all compiled into one animated GIF, or use a webcam and take three consecutive shots of yourself and put them into motion. This gives you less control than Photoshop, but it’s much less work and it’s free.

3fram.es

3fram.es is also a website where you can create a GIF after being prompted to take 3 consecutive webcam pics. Here you can also view the GIF creations of others and share your own.

Animated GIF libraries

There are tons of GIFs already online to choose from (just make sure you don’t break any copyright laws). If you need to make a quick retort on Twitter where a rage face simply won't do, head to our favorite catalog of celebrity GIF emotes on Jezebel.com and find the ones that matches your sass.

Original article, screenshots, and GIF by Taylor Dobbs.