How to Create an Animated GIF in Photoshop

Written by ava fails
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an Animated GIF in Photoshop
(Computer Graphic image by Clark Duffy from

Animated GIFs are animated images created without coding or using Flash. Using layers in Photoshop for each frame in the animation makes the animated GIF easier to understand and manipulate. Photoshop is a simple way to animate and has powerful tools for editing your images as well. You can use animated GIFs on your website, blog or any online profile to enhance the look of your pages.

Skill level:

Things you need

  • Computer
  • Photoshop
  • Images

Show MoreHide


  1. 1

    Open Photoshop on your computer.

  2. 2

    Make a new document by left-clicking "File" and selecting "New" from the drop down menu.

  3. 3

    Type the width and height desired for your animated GIF. Set the resolution to 72 pixles/inch. 72 pixels per inch is the standard for images created for use on the Internet. Left-click "OK." Photoshop will open your new document.

  4. 4

    Left-click "File" and select "Open" from the drop down menu. Navigate to the image files you want to use in your animation on your computer. Left-click the file to highlight it. To select more than one file, press and hold the Ctrl key. Left-click "Open" once all of your files are selected. Photoshop will open the files in the work area.

  5. 5

    Left-click the Move Tool in the Tools Palette. The Move Tool is the first icon in the left column of the Tools Palette.

  6. 6

    Left-click, hold and drag each open image into the new document you created. Photoshop will make each image you drag in a new layer. All layers are viewable in the Layers Palette. Think of each layer as a frame in your animation.

  7. 7

    Once all of your images are in the Photoshop document that you created, left-click "File" and select "Edit in ImageReady" from the drop down menu. The file is opened in ImageReady.

  8. 8

    If the Animation Palette is not opened by default, click "Window" and select "Animation" from the drop down menu. The Animation Palette will appear at the bottom of your work area with a thumbnail of your image.

  9. 9

    Left-click the "Duplicates current frame" icon on the Animation Palette. This icon is located at the bottom of the Animation Palette next to the dustbin icon. Your current frame is now duplicated and appears as the next frame in the Animation Palette.

  10. 10

    Left-click the first frame in the Animation Palette to highlight it. Left-click the eye icon in the Layers Palette next to each layer until only the image you want in the first frame of your animation is visible. You have just created the first frame of your animation.

  11. 11

    Left-click the second frame in the Animation Palette to highlight it. Left-click the eye icons next to each layer in the Layers Palette until only the second image is visible in the thumbnail. You have created the second frame of your animation.

  12. 12

    Left-click the "Duplicates current frame" icon again. A third thumbnail is visible in your Animation Palette.

  13. 13

    Left-click the third frame to highlight it in the Animation Palette. Left-click the eye icon next to the third image you want to appear in your animation in the Layers Palette. This eye icon will be invisible since you clicked it to remove it from previous frames. In reality, you are left-clicking inside a blank square to make the icon appear. This in turn makes the image appear.

  14. 14

    Continue adding frames and left-clicking the eye icon to create your frames until all of your images are shown as thumbnails in the Animation Palette.

  15. 15

    When you are done adding frames, left-click the Play button to see a preview of your animated GIF. The play button is located on the bottom of the Animation Palette and looks like a right facing arrow. Your preview will animate very quickly because you haven't adjusted the transition times yet. Left-click the Stop button to stop the preview. The Stop button replaces the Play button during playback.

  16. 16

    Left-click the black arrow directly under the first frame in the Animations Palette. Select "Forever" or "Once" from the drop down menu. Forever makes your animation loop indefinitely while Once makes it cycle through each frame once and stop.

  17. 17

    Adjust the time that each frame is shown by left-clicking the small black arrow on the bottom right corner of each frame. Select a time interval from the drop down menu on each frame. Play with these settings until the animation plays at the speed you desire. Check a preview of the animation by left-clicking the Play button.

  18. 18

    Once you are happy with the look and speed of your animation, save it by left-clicking "File" and selecting "Save Optimized As" from the drop down menu.

  19. 19

    Type a name for your animation and left-click the black arrow next to "Save as type". Select "Images only (.gif)" from the drop down menu. Left-click "Save." The file is now saved to your computer and ready to upload to the Internet.

Tips and warnings

  • Resize all of your images to the size you want your animated GIF to be prior to creating your GIF.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.