• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • About
  • Portfolio
  • Blog
    • Blogging
    • Business Tips
    • Design
    • Photoshop Tutorials
    • Illustrator Tutorials
    • Freebies
  • Shop
    • Creative Market
    • Spoonflower
    • Design Cuts
    • Patternbank
  • Resources
    • Resources
    • The Library
  • Contact
  • Nav Social Menu

    • Bloglovin
    • Facebook
    • Instagram
    • Pinterest
    • Twitter
    • YouTube

Elan Creative Co.

whimsical graphic design

How to make animated GIFs in Photoshop

June 8, 2018

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

animated GIFs in Photoshop

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

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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. 

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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.

animated GIFs in Photoshop

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

animated GIFs in Photoshop

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!

Tweet
Share1
Pin3K
Share

Photoshop Tutorials, Tutorials

You might also enjoy:

How to change Illustrator default settings
How to scale patterns in Illustrator
How to make image templates in Photoshop for Pinterest and social media
How to make image templates in Photoshop for Pinterest
Seamless honeycomb pattern in Photoshop
Create a seamless honeycomb pattern in Photoshop
How to make custom brushes in Photoshop
How to make custom brushes in Photoshop

About Cristina Silvia

Hey there! I’m Cristina, and I’m a self-taught graphic designer and illustrator. With an everlasting love of all creative endeavors, I found joy in sharing with others what I’ve learned over the years and helping bloggers and entrepreneurs bring their dreams to life through beautiful designs.

The Newsletter

Subscribe to our mailing list to get the latest posts in your inbox + news and special offers.

Reader Interactions

Comments

  1. Angela Vaz | Stray Curls says

    June 12, 2018 at 8:19 am

    Hi Cristina!

    I seriously love how detailed your tutorials are. You come up with the best type of posts everrrr! And I’m glad you made a YouTube video. 🙂

    Are you on Skillshare? I’d love to watch one of your courses there!

    Warm regards,
    Angela

    • Cristina Silvia says

      June 12, 2018 at 8:45 am

      Thank you so much, Angela! I’m only a Skillshare student for now, but I’m working on something 😉

Footer

Discover

  • Portfolio
  • Blog
  • Resources
  • The Library
  • Contact

Learn More

  • Policies
  • Terms
  • Licenses
  • F.A.Q.

Looking for something?

  • Bloglovin
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Copyright © 2022 · Elan Creative Co