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

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

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.

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

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

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