Creating an animated Gif in Photoshop CS5
There are many different ways and programs you can use to go about creating a fun and interesting animated gif for the web. For this tutorial I will show you one quick and easy way to create an animated gif using Photoshop CS5. I am working on a Mac, but a PC will do just the same.
You can check out a preview of what the completed animated gif can look like by visiting this link. Keep in mind, this is a web page I designed to showcase the animated gif created for this specific tutorial. Uploading your completed animated gif directly to the web will not result in the animation being centered on the web page.
To begin with, I used Photoshop to create a series of images of which I kept in one folder. These images will act as the states for my animated gif. It is not necessary to use Photoshop to do this. You can create an animated gif with a series of photographs or a group of illustrations created in Illustrator in much the same way. Really, as long as you can open your files with Photoshop, you can create an animated gif out of virtually anything. The important thing to note is that each layer, or state, should be the same dimensions and resolution and will need to have something different, whether that change is slight or dramatic.
To start, we will open the first image in Photoshop.
Then, drag the other images over top the open Photoshop file and release. You can select all the images at once using the Shift command (holding down Shift while selecting individual images).
Once released, an “X” will appear over top the image. This is a short cut way to use the Place command. Use the Enter key to accept the position of each image (essentially, just press Enter until every layer is placed).
You can also use the Place command located under File on the Menu bar to place each image one at a time if you feel more comfortable doing so.
You will notice the Layers panel is now full with every image acting as a new layer. Be sure to unlock the Background layer (the original image we first opened) by double clicking it and selecting OK. We can now open the Animation pane and get started.
The Animation pane is located under Window on the Menu bar.
The Animation pane will appear below the canvas window and will fill up with a series of icons representing whatever layer you had selected at the time of opening the pane. This is okay. This is the Frame Animation view. We will need to turn on the Timeline view for just a moment so that we can automatically create our frames from our layers.
To switch to Timeline view, click the button located in the lower right hand corner of the Animation pane.
Your Animation pane should change views. Notice the original button clicked to change views also has a new look. We will click this button again in a moment to change back to Frame view.
The reason for changing views was for the Make Frames from Layers command that is only accessible in Timeline view. It is located in the Animation pane fly out menu. To select the command, press on the fly out menu button (upper right hand corner of the pane window) and choose Make Frames from Layers.
Notice the canvas view has changed. Change the Animation pane view back to Frame view by clicking the button located in the lower right hand corner of the pane window.
Now the Animation pane makes a little more sense where each layer is represented by an icon in Frame view giving us a better idea of how our animation will work.
To test the animation, click the Play button on the bottom of the Animation pane. The animation moves extremely fast. We’ll want to slow that down somewhat and also add a few more frames by duplicating existing frames. To stop the animation, click the stop button.
To duplicate an existing frame, select the frame and click the Duplicate frame button located on the bottom of the Animation pane.
To move the new frame into a different location in the timeline, press and drag it and drop it where you want the new frame to sit.
You can also duplicate a series of frames at the same time by selecting all the frames using the Shift command and clicking Duplicate. Play around with the order of the frames and how many frames of each image your animated gif will contain. Frequently test the animated gif using the play function.
There are a couple of different ways to set the time for each frame. You can set the time for all frames at once or each frame individually. Notice that at the bottom of each frame there is an option to set a time delay. To change the time delay, press the drop down arrow and choose a time that you feel comfortable with. Use the Play command to determine if it is too fast or too slow.
To change the time delay for all frames at once, select all the frames using the Shift command or by choosing Select All Frames in the Animation Pane’s fly out menu. Then, on any one frame, use the Time Delay drop down to choose a time.
Once you have your frames in the order that you want and your time delays to where you are satisfied, there is only one more step before exporting as an animated gif. On the bottom of the Animation pane, be sure to choose Forever under looping options. By default, Once will be chosen. To change that, press the drop down arrow and choose Forever.
To save the animated gif, choose Save for Web and Devices under File on the Menu bar. In the Save for Web and Devices window, be sure that GIF is selected and click Save.
Locate your animated gif and press and drag it into a browser window for full effect.
January 7th, 2012 at 5:43 pm
This is gonna sound silly coming from someone who’s been using Photoshop for years and is supposed to know that kind of stuff, but you actually taught me something and saved me quite some time here, so a BIG THANKS !!
Marie, from France
April 6th, 2012 at 5:12 pm
I’m having a problem animating the gif, as the text from the first frame remains on the rest of the frames. Do you know why?
April 26th, 2012 at 4:50 pm
That was a very helpful post. I had no idea one could do this on photoshop!
April 26th, 2012 at 4:50 pm
thank you!
May 1st, 2012 at 10:27 am
AnneMarie, My guess is that your subsequent layers have a transparent background. You’ll need to select the layer content, invert the selection, and fill.