How to make a simple animated gif banner using frames in Photoshop

By Jim on November 16th, 2008 | Posted in Photoshop Tutorials | 5 Comments
Tags: animated gifs in Photoshop, animated skyscraper, Elizabeth Dole, Elizabeth Dole Sucks, Kay Hagan, tweens

Back some time ago, someone recommended that I make a tutorial on animating gif’s using Photoshop. Well, after much procrastinating, I give you the Photoshopper’s guide to making animated gif banners in Photoshop, at the expense of other people.

What the frig are we gonna animate?

Before we can make something animate, we need to figure out what it is we want to animate. Lucky for you, I’ve taken the liberty to come up with a fun idea, and actually have all the imagery premade for your convenience. You can download everything for this tutorial here.

In honor of sexy Sunday school teacher Kay Hagan’s recent defeat of the incumbent senator from NC, we’re gonna pick on Elizabeth Dole. I was extremely happy (like most people in the state) to see Hagan win, especially after her wonderfully offensive godless ad campaign. I even jerked off (like most people in the state) during her victory speech. But, since Dole is such an easy target, we’ll use her.

I'm not picky, but I'd pick Kay Hagan any day.

Animated gif file size: when bigger, longer or girthier ain’t better

File size is one thing you always need to consider when making animated gifs. Gifs are always better suited to buttons and simple graphics. It’s best to use JPG for images like photos and things of that nature, that need more than 32 or 64 colors to display. The file size of your animated gif will be determined by the complexity of the gif and how many frames its gonna be. A 2-frame animated gif will be much smaller than the same gif animated over 6 frames. As an example, let’s look at two simple animated gifs, and how they differ in size:

This animated banner is 28K, and uses 2 frames.

This second banner is 44K and uses 6 frames.

As you can see, the first ELIZABETH DOLE SUCKS HER OWN HOLE banner is is only 28K, while the second ELIZABETH DOLE SUCKS HER OWN HOLE is 44K. Because it’s got more frames, it be bigger size. Make sense?

To get started, we need to create a new document. For the hell of it, we’ll make a skyscraper banner with a size of 160×600 pixels at 72dpi. We’ll also need a good picture of Dole’s asshole face. You can grab yours from the Elizabeth Dole Wiki page, or use my pre-made Dole head as shown below. If you didn’t already download it, here’s the Psd. If you’re not a punk, you already know how to cut out someone’s head for further butchering.

Our official Elizabeth Dole base face.

Drag the Dole head layer group into your new canvas and fill the background layer with #909090. Here’s what we should have:

Here's what we should have after filling the background and dragging in her head.

Next, we’ll resize her down a little ways so most of her head shows up. I’m going with just a little bit of buffer outside her ears. Now, we could show her entire head, but since banner space is limited, I’d rather give them enough of her face to get the picture and balance out our banner. Here’s a little secret of the pro’s… when reducing the size of photos, lots of times you’ll notice them soften up a little bit. I almost always go back and sharpen them up just a tad. Doing this gives us a much sharper and more polished end product. To sharpen mine, I choose filter > sharpen > smart sharpen and use something close to the following:

Here's what I used for my smart sharpen settings. Make sure your Dole head layer is selected!

Anyways, let’s dig right into some basic animating. Move Dole’s head up toward the top of the banner, and select the text tool. I chose Futura Extra Bold as my font, and added some text to my banner. Here’s what I’ve got, hopefully, you’ll be able to use the basics of the text tool to get the following:

You should be able to get your text layers looking similar.

Now you should have two separate text layers, one for DOLE and one for SUCKS. Select both of these layers in your layer palette and Command or Control + G to create a new layer group using those two layers. Rename this layer group to FRAME 1. Now, duplicate this layer group and rename the copy to FRAME 2. This leaves us with two different layer groups. One layer group will be visible for one frame of our animation, and the other layer group will be visible for the second frame of our animation. Pretty easy stuff.

Now we’ll start with the FRAME 1 layer group. Turn the FRAME 2 layer group off (click the eyeball in the layers palette) for now, and select the DOLE text layer within FRAME 1. Fill the DOLE layer white, and fill the SUCKS layer black. This will make them opposite to the 2nd frame colors. Now we can go to Window > Animation to show the animation palette. You should be looking at something close to this:

Here's a quick overview of Photoshop's animation palette.

Take a peek at the animation palette real quick. You’ll notice that each frame has a time selector, and beneath that we can control if the animation will loop for all eternity or only animate once. To the right of that, you’ll see some basic play controls, a stack of squares that looks like a waning dick, and a new frame button and a trash can. We’ll use the waning dick here in a few. For now though, let’s animate. Click the new frame button to create a new frame. Turn off the visibility of your FRAME 1 layer, and now turn on FRAME 2. If you toggle back to the first frame in the animation palette, you should see the corresponding layers showing on your canvas like so:

Here we see frame 1 in the animation palette selected.

Here's frame 2 selected in the animation palette.

Cool! If we go to File > Save for Web & Devices… > we can get a browser preview of our new animation. When the Save for Web & Devices shows up, use the following settings:

When the Save for Web thing pops up, choose gif, and 128 colors.

If you click the preview in browser button down in the bottom, it should pop up your animated gif in a new browser window. If this tutorial has been worth a shit so far, you should have something similar to this:

Our animated banner.

Hell yes, we now have a super basic, 2-frame animated gif using Photoshop. Now let’s play with that waning dong tool that we talked about before. This thing lets us tween animation frames, and thats some cool shit. With frame 1 of your animation selected, click on the tween button. The Tween dialog box should come up and give you several options:

Use tweens with care, they can add lots of file size to your banners, potentially rendering them useless!

Lets focus on the Frames to Add: field for a sec. You need to be a little careful when it comes to using tweens. Remember from above when we talked about how more frames equals more file size. While adding 6 frames between your tween might make your animation smooth, all its really gonna do is take longer to load. Also, too many frames in your tweens will make your animation take longer. Gifs are weird in that they seem to animate more quickly on faster computers and animate more slowly on slower machines. Personally, I seldom use tweens.

Plug in the same settings I used, adding 2 frames for our tween. Hitting the play button in the animation palette allows you to preview your results, however I generally always save for web and preview in the browser to see a more accurate representation of the banner. Here’s what you should have so far:

Here's our tweened banner. Notice the differences, and notice the increase in file size.

So that gets you animating some basic stuff in Photoshop. Try dicking around with movement like making text bounce. Whether you use tweens or not, creating easy animations is easy as long as you setup the corresponding layers in advance. By keeping our layers organized we were able to apply it in no time to separate frames in the animation palette. Here’s a few variations I came up with:

As always, comments and questions are welcome and I’m glad to help you if you’re stuck. Good luck!