So, you want to make your own GIF? While it may seem intimidating, building your own GIF is easier than you think. 

Your first step is to think about what you want your GIF to be. What part do you want to animate? Where will you use it? Today, we’re animating a blinking cartoon figure, but you can create anything you’d like.

Now, we’ll walk through the necessary steps to create an animated GIF in Photoshop CC, geared towards first-timers. Let’s get started!

gif-in-photoshop
The final GIF

1. Set Up Your File

First, create a new document (pick whatever size you want) with 300 DPI. Then, make sure you’re in “Motion Mode.” Change Photoshop's mode in the top right-hand corner.

Now your Timeline appears, which you’ll use later to put your animation in order. Access your Timeline by going to Window > Timeline. On older versions of Photoshop, it’s Window > Animation. When your Timeline shows up, hit “Create Frame Animation.” 

Before you move on, make sure your layers are visible. If you can't see them, hit F7. 

file-setup-photoshop
How to set up your file in Photoshop, with labels for the various tools you’ll be using.

2. Create Your Drawings

Ignore the Timeline for now. Go to your Layers panel, hit the “Create a New Layer” button, and draw the first frame of your animation. To stay organized, label each layer as you create it. 

Once you've drawn the first frame, click the eye button beside it to make it invisible for the time being. If you're making minor edits to one static drawing, you can duplicate your original layer by clicking on it and hitting CTRL > Duplicate Layer.  

Create another layer and draw your next image. Repeat this until you have all of the layers you need for your final animation.

3. Organize Your Timeline

Now, let’s put your drawings in order in the Timeline. In the first frame, go to the Layers panel and turn the eye on for your first layer so it’s visible. Make sure everything else is off.

Create another frame in the Timeline by hitting the “Create a New Frame” button. Then turn on the next layer for your animation. Again, everything else should be invisible.

Continue this process until your animation is complete. If you plan on looping it, remember that your animation will go back to the first frame. 

4. Tweak

Decide how many times you want your animation to play by changing where it says “Once” on the Timeline to your desired number of repeats. Test your animation by hitting the “Play” button on the Timeline. 

Choosing “Forever” means your animation will loop infinitely, which is what most people want when they create a GIF. You can also alter the delay time between the frames where it says “Sec.” This makes your animation run slower or faster.

5. Save Correctly

In order to function correctly, GIFs need to be saved in a certain way. First, make sure to bring down the resolution to 72 DPI so it’s compatible with web viewing. To do this, go to Image > Image Size. Next, go to File > Save For Web and make sure the upper right corner is set to GIF. Now you can save and upload!

Save-gif-web-compatible
How to save your GIF correctly for web compatibility.

And there you have it! Your very own GIF. 

Written By

Guest Author

  • Click here to share on Twitter
  • Click here to share on Facebook
  • Click here to share on LinkedIn
  • Click here to share on Pinterest