How to make animated GIFs in Photoshop

Do you use GIFs? I’m crazy about them and I often use them when I talk to friends online. I also love to use them in blog posts, and in this tutorial, I want to show you how easy it is to create animated GIFs in Photoshop.

I will show you how I made the featured image for this post using a font I love and a texture I made. You can make cute animations using your hand lettering or doodles.

If you aren’t using GIFs, you should. People love them, they look good in blog posts and on your social media, and they will help you emphasize or explain something.

Here’s how to make animated GIFs in Photoshop:

Watch on Youtube

Please subscribe to my channel if you want to see more Illustrator and design tutorials. I release a new tutorial every other week.

Watch on YouTube

How to make animated GIFs

Open Photoshop and create a new document. This document is for web use only so you should use the RGB color mode and a resolution of 72ppi.

I’m going to use the Paint Bucket tool to change the color of the background and then use the Type tool and the Just Awesome font family to add the title of this blog post. 

Next, I’m going to use the Type tool and make each letter of the word “GIFs” a different color.

The last step is to use the Brush tool and an ink texture I made. The texture will give the animation a vintage look and create the sensation of movement.

This image will be my first frame. Now I’m going to select all the layers, go to the bottom of the Layers panel and click on Create a new group.

You can also merge the layers, but you won’t be able to edit them after that.

Create a copy of the first group by dragging it to the New Layer button.

I’m going to create the second frame by changing the colors of the word “GIFs” and using a different texture.

I want to make 5 frames. I will continue to duplicate the groups and change the colors and texture until I have 5 groups.

Instead of using textures and changing colors, you can also play with font weight and size or you can slightly rotate the text.

Create animations using the Timeline menu

When you have all the frames you want, it’s time to create the animation. To make an animated GIF in Photoshop, go to Window > Timeline. This will open the Timeline menu at the bottom of the workspace.

Click on Create Frame Animation. If you can’t see it, click on the arrow to open the drop-down menu and select it.

When you open the animation menu, you will have one frame. The first frame is always the layer or group that’s on the top. 

To change the delay, click on the drop-down menu under the first frame. The default is usually 0.

Also, to create the looping effect, make sure the looping option is set to Forever.

To create the second frame, click on the Duplicate frame icon that’s at the bottom of the Timeline panel. Then go to the Layers panel and make the layer or group that’s on top invisible.

Do the same for all the frames.

When you have more than one frame, you can test the animation by selecting the Play button.

How to save animated GIFs in Photoshop

If you want to save your animation as a GIF, go to File > Export > Save for Web.

In the Save menu, go to Preset and change the file type to GIF 128 Dithered. Go to the bottom of the menu and make sure the Looping is set to Forever. You can also check the size of the GIF in the left corner.

If your file is too big, you should remove some of the frames or resize the image.

Important: If you want to use the GIF on your WordPress blog, you should resize it to the size of your blog post area or sidebar. If your image is bigger than the area you want to add it to, WordPress will resize it and it will only save the first frame. If that happens, the GIF won’t work.

Saving your animation as a video

If you want to use your animation on Instagram, you will have to save it as a video.

First, I’m going to resize it to 1050x1050px. To do that, go to Image > Canvas Size. This will resize the canvas, but it won’t distort the image.

Instagram videos should also be at least 5 seconds long. My animation is only one second, so I’m going to make a few copies of the frames.

To do that, select all the frames and drag them to the Duplicate frame icon. Duplicate them until your animation is at least 5 seconds long.

When your animation is ready, go to File > Export > Render Video.

Make sure the Range is set to All Frames and click Render to save it. If your video is large or you have an older computer, this might take a couple of minutes.

That’s it! Hope you enjoy making animated GIFs in Photoshop. If you share your animations on Instagram, tag me @elancreativeco. I’d love to see them!