How to Create an Animated GIF in Photoshop CS5.5

You can easily and quickly create an animated GIF in Photoshop CS5.5. This procedure is accomplished by creating a new image in Photoshop that is the same size as the images that you want to include in the animation, then dragging your existing files into the Photoshop canvas. Make a few adjustments to the animation, then your file is ready to share with the world.



Step 1: Group all of your images into the same file. Note that each image must have the same dimensions.

group all of your images into one folder


Step 2:  Launch Photoshop CS5.5, click “File” at the top of the window, click “New,” then set the size of the new image to the same dimensions as your existing image. Click “OK” to create a new image.

Create a new Photoshop image


Step 3: Open the folder containing your images, press “Ctrl + A” on your keyboard to select all of the files, then drag them to the Photoshop canvas.

Drag and drop your existing GIF images


Step 4: Press “Enter” on your keyboard to set each image as its’ own layer.

Press Enter to set each image as its' own layer


Step 5: Reorganize your layers in the “Layers” panel at the right side of the window. The layer that you want to show as the last animation frame should be on top.

Organize your layers into the correct order


Step 6:  Click “Window” at the top of the Photoshop window, then click “Animation” to display the Animation panel at the bottom of the Photoshop window.

Display the Animation panel


Step 7: Click the Animation panel menu at the top-right corner of the Animation panel, then click “Make Frames From Layers.”

Set each layer as an animation frame


Step 8: Click the Animation panle menu again, then click “Select All Frames.” This allows you to make universal changes to all of your frames at once. If you want to set a different duration for each frame, this step is not needed.

Select all of the frames


Step 9: Click the “0 sec” drop-down menu under one of the frames, then click the duration for which you want each frame to be displayed.

Set the duration for each frame


Step 10:Click the “Forever” drop-down menu, then click the amount of times that you want the animation to play. I selected “3” in my screen shot, but changed it to “Forever” when I realized that it would have stopped playing by the time you get to see it!

Specify how many times you want the animation to play


Step 11: Click “File” at the top of the window, then click “Save for Web & Devices.”

Choose to Save for Web and Devices


Step 12: Click the “Save” button on the “Save for Web & Devices” window, type a name for the animation into the “File Name” field, then click the “Save” button again.

Name your file, then save it


My final product –

1-2-3-4-5- Forever!

Join Our Free Newsletter

Featured guides and deals

You may opt out at any time.
Read our Privacy Policy

Newest Guides