Skip to Main Content

go to Indiana University Indiana University


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.

a series of images

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.

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).

press and drag

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).

look at the big X

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.

layers panel
The Animation pane is located under Window on the Menu bar.

locate animation pane

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.

animation pane

To switch to Timeline view, click the button located in the lower right hand corner of the Animation pane.

timeline view
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.
timeline 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.
Make frames from layers command

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.

frmae view

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.
play button

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.

duplicate frame

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.

move the frame

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.

duplicating multiple frames

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.

set frame delay

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.

select all frames
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.

looping options

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.

save for web and devices

save for web and devices

Locate your animated gif and press and drag it into a browser window for full effect.


15 Responses to "Creating an animated Gif in Photoshop CS5" to “Creating an animated Gif in Photoshop CS5”

  1. Marie Alhomme Says:

    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 :)

  2. AnneMarie Says:

    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?

  3. Avani Says:

    That was a very helpful post. I had no idea one could do this on photoshop!

  4. Avani Says:

    thank you!

  5. Jeff Says:

    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.

  6. Janette Says:

    I’m doing this with jpeg photos, and they do not show up very smooth. What can I change for them to be smoother?

  7. Stephanie Says:

    You might need to adjust resolution.

  8. Steve Says:

    What would you suggest to make it seem like the ring is revolving around the T in this logo? (The image can be found at this link: http://www.wesellchemicals.com/) The shape would not change because the position is always the same. So the thinner end is always going to be behind the T as it is. Just that the ring itself should show some motion. Would I have to make some sort of marking on the circle and have it move from frame to frame? Or is there some other means without adding a blemish? Ideas would be most welcome!

  9. Monty Python to Augmented Reality: Animation Evolves | GL Stock Images Design Blog Says:

    [...] Creating an Animated Gif in Photoshop CS5 [...]

  10. Jeff in Miami Says:

    I went to 4 different training methods prior to this one and hands down this is the best. I’m finally able to understand how to do this. Thank you, Jeff

  11. Monty Python to Augmented Reality: Animation Evolves | kellyjays WordPress Says:

    [...] Creating an Animated Gif in Photoshop CS5 [...]

  12. Liz Says:

    When I make a GIF through CS5, save it, then try to play it on YouTube, it gives me an error message – sez it is an image not a video.

    What am I doing wrong?

  13. Stephanie Watters Flores Says:

    @ Liz — that’s because an animated gif IS an image. If you want to upload videos to YouTube, you need to upload a video format like a .wmv, .mov, .swf, etc. They have a list of file formats they use, but a gif (whether animated or not) is an image.

    @Steve, one suggestion would be to add a highlight to the ring, possibility giving it a 3D look or giving it minimal up and down movements it as if it were on a slighted axis.

  14. C.E Beamon Says:

    One of the best tutorials and simple enough for even me a novice to Photoshop. Thanks for your Help!

  15. steven Says:

    Hello.Thank for this!

    I have a question.I want to make a gif from a video but with different speed or time delay.For example lets say i want to make a gif from 15 second part of a video.Is it possible to make the first five second go faster ans the rest seconds go a lot slower?I am sorry if you didnt understand but my native language is not english!!!

    Thank you!

Leave a Reply

 

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.