Photoshop, Tutorials

How to Create an Animated GIF in Adobe Photoshop

The web feels so static unless there’s some vibrancy to it. When talking about vibrant contents on the web, we’re talking about dynamic contents. Say about an image, or a button, what’s so exciting about a button that looks like the same all the time? Especially, if you want to catch reader’s eyes on to a specific picture, you have to make it dynamic. How do you do that?

One of the popular ways to promote websites and products is to buy space on popular websites and blogs and put banner there. These banners have variety of sizes. However, for sidebar space, the most common size is 125×125 pixels. Most people today create a Flash banner for those sites so that the ad draws readers’ attention.

However, imagine what if the reader is visiting your site from an iPad that doesn’t support Flash? Or what if the client’s browser does not have a Flash plugin installed? It’s nothing impossible. It can happen, and this way you’re losing possible clients. That’s why animated gif, despite being an old way, is still so popular when it comes to advertising on other websites.

Creating an animated gif is extremely easy. There are many web-based applications that you can use to do so. However, they all lose quality of your original work. So, the best way to do it is through Adobe Photoshop CS5. In today’s tutorial, we’ll show you how to create an animated gif using Photoshop CS5.

Prerequisites

You must have Photoshop CS5 installed on your computer; because that’s the software we’re going to be using to create the animated banner.

You must have a couple of photos to animate. You can create these photos out of Photoshop or any other photo manipulation software. Basically, we’ll be animated a couple of images one by one. It’s more like stitching images together and showing them after a preset delay. That’s the basic idea of an animated gif.

Once you have the images ready, fire up Photoshop on your computer and follow along.

Adding Images

At first, you need to create a blank canvas. Make sure you set the size of the canvas according to the size of the previous images given that the previous images are all of the same size. For our purpose, we’re giving it 125 pixels width and 125 pixels height because we’re going to create an animated gif of 125×125 pixels.

Now, navigate to the folder where you have all the images that need to be animated. For your convenience, it’s a good idea to number them as you want them to show. For example, the first slide’s file name should be 1; the second should be 2 and so on. When they are in correct order, simply select all and drag them over to Photoshop. Upon release of your mouse button, you’ll notice that there’s a big X in the middle of the image. Don’t worry, keep pressing enter key until it disappears.

Animating

Before you animate, make sure your images are in correct order. Look into the Layers panel to make sure the order is correct. Also remember to remove/delete the ‘background’ layer because you won’t need it. It might even cause difficulties. When everything is ready, go to Window > Animation.

The animation palette will show up at the bottom of the image. From the far right of the palette, click the arrow icon and select “Make Frames from Layers”. It will take all of your frames and turn them into a frame for each. See why I wanted you to delete the background layer? It was just a blank canvas.

Now you should change the delay for each frame. Basically, it’s preferable to set a delay between 0.5 to 1.0 (seconds) if the images contain a text. However, if you’re working on graphics, then you might consider even faster frame. For our purpose, we’ll go with 1 second delay.

When all is set, it should look like the image below. Make sure the forever is selected in order for the image to loop endlessly.

Process Animated GIF

Now that the animated image is ready, it needs to be exported as a gif image. Otherwise it won’t animate. Simply hit Ctrl + Alt + Shift + S or go to File > Save for Web and Devices. From the box that opens, select gif from the drop-down menu. Look up the Save button at the bottom and click to save.

Guess what, you’re all done. To preview your animated gif, simply open up the gif file using a web browser and you’ll be surprised at what you’ve just created.

I admit I suck at designing, but this was just a basic idea of how to animate image. If you do extensive editing with your photos, like creating clean web 2.0 buttons, you might come up with something really cool. Check my personal blog‘s header image for an example of what animated gif is capable of.