How to Make a GIF in Photoshop

Sure, spending hours looking at hilarious GIFs on the internet can be a valuable way to spend your morning. Better yet, you can choose to spend your time including an animated GIF into your latest design. It’s an awesome way to add some flair that will encourage users to interact with your site. Plus, using a GIF often conveys more emotion and helps give your site the flow it needs.

In this tutorial, we want to show you how to make a GIF in Photoshop. It’s surprisingly easy – you’ll be able to add a GIF to your web designs in no time. Leave us a note in the comment with a link to your finished products!

If you’re interested in awesome GIFs – be sure to take a look at our posts on beautiful cinemagraph examples.

Here’s a quick run-down how to make a GIF in Photoshop:

Step 1: Upload images or create your own image.
Step 2: Turn on Timeline Window and set it to “Create Frame Animation”.
Step 3: Copy and paste your images, transforming if necessary, into new layers for each one.
Step 4: Make frames from layers.
Step 5: Determine the time/delay per frame.
Step 6: Change your GIF loop setting to “Forever”.
Step 7: Play back your GIF.
Step 8: Save for Web as GIF.


How To Make A GIF in Photoshop:

Step 1: 

Photoshop can create animated GIFs by using layers – add layers by clicking the “note” shaped button on the bottom right side of Photoshop

Step 1 Create New Layer

These layers can be turned on/off and these various layers will create the various frames for our animation.

Step 1 Layer VisibilityCreate new layers by pasting the images you are wanting to animate. In this example, we’re going to use the Rectangle Tool to create a purple square that we are going to make look like it is rotating.

Step 2 Rectangle Tool

Step 2:

Turn Timeline Window on – Window – Timeline – You’ll want to have it set to Create Frame Animation – and click the Create Frame Animation button

Step 2 Timline Window
<img class=”alignnone wp-image-28564″ src=”” alt=”Step 2 Create Frame Animation” width=”251″ height=”100″ /><

Step 3:

Paste another square and create another layer – Highlight over layer you want to edit and Command + t on Mac to bring up the Transform option to Rotate the square however much you’d like. Quick Tip: To rotate your image exactly 15 degrees, hold down shift while you’re in Transform mode. 

Step 3 Transform

Duplicate that layer you just rotated to rotate the square even more – repeat as many times you’d like.

Step 3 - 2

Step 4:

Once your layers have been made, it’s time to make the frames. In the Timeline Window at the top right corner, click on the drop-down menu and select “Make Frames From Layers”. This should make each of your layers into its own frame. (Note: If you have a background, it will also make a layer from that. So, you’ll have to go through each frame and turn on the background and delete its frame.)

Step 4 Make Frmaes

Step 5:

The drop-down menu under each frame in the Timeline Window will determine the length of time/delay between the frames. For this example, we selected .2 seconds

Step 5 - Frame Time

Step 6:

Before playing back the GIF, be sure to change the setting from Once to Forever in your Timeline Window so that the GIF will loop continuously, or select another option that better suits your GIF.

Step 6

Step 7:

Use the controls in the Timeline Window to play back your GIF.

Step 7 - Playback

Step 8:

To save your GIF, go to File > Save for Web. Make sure the File Type is “GIF”.

Step 8 or something - Save For Web

And here is our final product!


You can browse through some already created GIFs & even a few sites that help you make your own:

Featured Image Credit: Chris Piascik

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.