How to Make a GIF in Photoshop

This page may contain links from our sponsors. Here’s how we make money.

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

Create New Layer

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

Layer Visibility

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

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

Timline Window
Create Frame Animation

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. 

Transform

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

Duplicate the Layer

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

Make Frames from Layers

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

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.

Forever

Step 7:

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

Playback

Step 8:

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

Save the GIF For the Web

And here is our final product!

How to Make a GIF in Photoshop

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

Get the Free Resources Bundle