Animated GIF Tutorial!

So you want to make an animated gif? Well look no further! For this tutorial, all you need is…

• Some awesome images that you want to make into an animation
• Photoshop (I used CS3)

Now I know that there are tons of other programs out there to make animated gifs, and if you do a Google search for “free animated gif creator” or something like that, you can find some free programs to do it. This is just a tutorial for le Photoshop, because, well, that’s what I used! You can download a trial of Photoshop CS4 for free. It lasts for 30 days.

STEP 1: Open the images that you want to use in Photoshop. I wanted to make an animated gif of me shoving JP over, so I opened the series of images (from our proofs from Matt Miller) that documented that awesomeness.

STEP 2: In Photoshop, create a new file that is the same size as the images that you’re going to make into the gif. In my case, they were 760 px by 507 px, so that’s the size I created.

STEP 3: Activate the image that you want to be the first frame in your animation. Make sure the Move Tool is selected, then click the image, then slide and drag it into your new and blank image. On your (now not blank anymore!) image, slide the image into place by dragging it around. You’ll notice that this image is now “Layer 1.”

Tutorial continued after the jump…

STEP 4: Now lather, rinse, repeat, and drag the rest of the images into the new file (from now on I’ll just refer to it as “animated gif”). You should notice that each new image that you drag into the animated gif creates a new layer. Cool, huh? If you don’t do it in the correct order, don’t worry, you can drag the layers into their correct positions afterwards.

STEP 5: In the layers palette, select all of the layers (not including the background). You can do this by clicking on the first one, holding down shift, and then clicking on the last one. Or (on a Mac) command-clicking on each one.

STEP 6: Now with those guys selected, go to the Window doo-dad at the top bar, click, and select “Animation.” An animation palette should pop up.

STEP 7: Next, on the menu clicky-thing on the animation palette(I use highly technical terms, mainly because I taught all of this to myself), select “Make Frames From Layers.”

STEP 8: Now, all of your layers will be turned into frames in the animation! Yay! We want to delete the white frame (from the background layer). Just highlight, and click on the trash can.

STEP 9:  Now, you’re going to change the amount of time each frame lasts, aka the “Frame Delay Time.” Click on the first frame, on the arrow by the “0 sec,” and a box will pop up. I set each frame to 0.2 seconds, just, well, because. You can play around with how long you want the frames to last. I did this to each frame. You can test it out by clicking on the “Play” arrow on the animation palette. (It’s a little more delayed than it will be when it’s actually gif-ified, but it just helps you to get an idea!)

STEP 10: These next steps may or may not apply to you. I wanted my animated gif to be in black and white, just to help with the filesize, not to mention the fact that they’re already essentially black and white anyway! I’ll show you two ways to do this, if you’d like to do that with your images.

B&W Option 1: In the Layers palette, select “Create a new fill or adjustment layer” by clicking on the the half black/half white circle. A box will pop up, and you should select “Hue/Saturation.” Drag the saturation slider all the way to the left, and click “OK.” Voila! Black and white.

B&W Option 2: If you have any great B&W actions, you can just run one of those. I ran “Boring Old B&W” by Totally Rad Actions. It bumps up the contrast, as well as making it B&W. You can, of course, do this with the adjustment layers as well.

STEP 11: Ok, now back to the good stuff. Go to File, then “Save for Web and Devices.”

STEP 12: Next, on the far right, after the Web & Devices jazz opens up, click on the drop-down with “JPEG” and instead select “GIF.”

STEP 13: Underneath that, select the next dropdown, and (if you want it in grayscale, that is), click on “Grayscale.” This will also help make your filesize smaller, so it doesn’t take 100 years to load.

STEP 14: I wanted to resize the image, so that it wasn’t still so huge. I wanted it as 590 px wide, well, because that’s the max width that I have my images on my bloggy blog set to. You can resize it to whatever size you want. To resize the image, click on the “Image Size” tab on the right side. Then, type in whatever width or height you want, and keep “Constrain Proportions” selected so that the proportions will stay as they are. Next, obviously, click “Apply.”

STEP 15: Underneath that, you can change how you would like it to loop. I like my animated gifs to loop indefinitely, so I keep it on “Forever,” but you can change that to your liking.

STEP 16: In order to help with the filesize some more, I like to bump down the number of colors. Since it’s grayscale, you can decrease it fairly significantly without noticing much of a quality difference. On the “Colors” drop-down, I selected 16. Choose however many you want, but know that the lower you go, the more quality you sacrifice. But then again, 16 usually seems pretty good for grayscale. Play around with it.

STEP 17: Yay! Now we’re done! Click “Save” and then make sure to save it as a GIF, and then, well, you have your animated gif!

Not too bad, eh? You can see that the animated gif I created for this tutorial is a smidge different than the one I did before. That’s because I did some extra lining up work so that the scenery didn’t really move around. That took for-evers, and just involved me shifting the images around on the layers and a lot o’ cropping. I can explain that later, if anybody wants me to! It’s not super complicated, but it takes awhile to do.

So now you have no excuse not to make animated gifs of your awesome photos! Go forth and animate, and then report back! Was this tutorial too complicated?