13 leyva street, mabayuan
+63 9988517769

How to create Animated GIF


While this is an example of stop motion, the same technique can be used with ad banners or whatever you want to animate.


That selects all of the images and then I’ll choose tools and then Photoshop and then load files into Photoshop layers. This tells Bridge to hand off each one of those individual images into a single Photoshop document.

In order to create the animation, from the window menu, I’ll show my timeline. I’ll make that a little bit larger, and then I’ll switch and then I’ll click the downward pointing arrow in order to create a frame animation. Then I’ll click on frame animation. In the layers panel, I’ll scroll down and then select all of the layers and from the right side of the timeline, I’ll use the fly out menu and choose make frame from layers. Then in the timeline, I’ll want to select all of the different frames so that I can change their duration. The first frame is selected. I’ll hold down the shift key and then select the last frame. I’ll use the duration option on any of the frames. I’ll click that downward-pointing arrow and then choose 0.2 seconds. Then when I click on the playback, we can watch as the plums are animated in the image, but they’re moving in the wrong direction, so I’ll click stop and then I’ll use the fly out menu again and use to reverse the frames. Now when I click play, they’re going to be moving in the right direction, or at least in the direction that I had intended. I also want to choose the number of times that this is going to repeat, and I’ll switch from forever to just three times. Then I’ll select file, export, and then save for web. For the file format, I’ll want to be sure to select the GIF file format, but if we look at the size, this is going to be a 4.158 meg file and I really need to get that file size down.

There are a number of ways that I could do this. The easiest way would be to reduce the image size here from 800 pixels down to something lower, so I’ll choose 400 and tap the tab key. Photoshop will automatically recalculate that, so now I’m down to 1.4 meg. Probably still not low enough, so I can start reducing the number of colors in the image. Let’s take this down to 64. We’re still over a meg. Let’s go ahead and see how long that would take to download. By clicking on this icon right here, it will show us the size and then the download times so that we can estimate how long it would take. Well, let’s go ahead and preview this. I’ll click the preview icon and that will launch a browser and we can see this in the browser. All right, let’s close that and return to save for web. If I know the maximum size that’s going to be allowed for this file, in the upper right hand corner, I can choose to optimize to a specific file size. So if I knew that this had to be 800 k or lower, I could enter that in and then select okay. We can see that save for web has had to reduce the numbers down to 34 in order to fit it under that size. When we’re happy with the results, we can click save. I’ll give this a name, and then save it into the animating images folder and click save. Now if I wanted to save the work that I’d done in the timeline, as well as this multi-layered document, I would also want to save it, so I’ll choose save as. We’ll call this one plum layers and save it to that same folder as a layered Photoshop document. When I return to Bridge, and we look in the animating images, sure enough, there’s our animated gif and we can play that using the preview to the right.

So next time you need to create an animation in Photoshop, be sure to use the timeline and the save for web options.

Leave a reply