This post contains affiliate links. If you make a purchase through one of the links I receive a commission (at no additional cost to you, of course). It helps me pay that Creative Cloud Subscription.
On the Pronunciation of GIF
Before we begin today’s Animated GIF Photoshop tutorial, we need to clear up something extremely important.
We need to have an important pronunciation conversation (say that five times fast) about the word GIF.
On this blog, we pronounce the “g” in gif as we pronounce the “g” in girl.
We NEVER (never-ever, under any circumstance, not even silently in our own heads, lest we embarrass our own selves) pronounce it as jif.
A GIF is an animation. JIF is my favorite peanut butter.
This has been a public service announcement. Thank you.
And now back to our regularly scheduled programming..
Today I’ll be showing you how to create an animated GIF in Photoshop.
What’s a GIF?
A GIF is simply an animation that plays on a loop (foooooreeeevver). It’s made from a video clip or a series of images.
And they are super duper fun, my friends. I’ve been obsessed with creating my own- and finding ways to incorporate them on my blogs– since, like, 2008. I bet you’ve seen some funny ones in your day. And I bet you love sharing them with your besties over iMessage.
When you think of GIFs, maybe the website Giphy comes to mind. Giphy has a huge database of existing GIFs, plus the ability to create your own by uploading a series of images or a video clip. It even supports Youtube and Vimeo, so you can rip your favorite clips right from the internet.
If you upload a series of images to Giphy, it will cycle through them continuously. If you upload a video clip, you’ll be able to trim it to the portion you want and have it repeat that segment forever. You can add text and stickers with Giphy as well.
It’s an awesome tool you can use absolutely FREE, so if you don’t have Photoshop, I highly recommend it. Hey- check out this beauty I made in about ten seconds.
But as with most FREE software, Giphy has its limits, so if you want to create a GIF that is 100% customized and on-brand, Photoshop is the answer!
For example, here’s a custom animated GIF I created for my twin sister, Brooke’s Beauty Bazaar in Photoshop that looks nothing like my Giphy GIF:
Follow the steps below to learn how you can easily create custom GIFs for your own blog or brand in Photoshop.
How to Create a GIF in Photoshop
Today I’m going to walk you through exactly how I created this simple frame animation GIF in Photoshop- which features 9 of my favorite things. It’s the sort of GIF I would include in a blog post.
When you look at the GIF, you’ll notice that the little stars move around the canvas, highlighting one item after another. This isn’t a highly technical GIF, but it’s simple to create, and it definitely adds some movement & visual interest!
After following this step-by-step tutorial, you should have a good grasp on the animation panel in Photoshop. From there, the sky’s the limit as to what you can create.
But one final word before I set you loose: resist the temptation to go overboard with .GIFs. They’re fun, but too many of them at too large a file size can really bog down your blog. And we don’t want slow blogs!
Don’t worry – I’ll cover the best practices for optimizing your GIF later in this tutorial.
Now – let’s begin!
How to Create an Animated GIF in Photoshop Step 1 –> Sketch Out a Composition on Paper and Decide What You want the Animation To Do
The #1 Rule of Graphic Design is to create thumbnails- aka– draw out all of your ideas on paper.
Technically I can’t force you to do this, but if you go into Photoshop with a plan, you’ll be better off. Especially if you’re new to Photoshop, that list of layers in the layers panel gets long lickety-split.
Best to sort it out before you get to the computer.
Here’s my idea:
As you can see, I’ve decided to create a visual representation of 9 of my favorite things to go along with a (made up) blog post. For the animation – I’m going to highlight each thing randomly one-by-one to give the image some interest and movement.
How to Create an Animated GIF in Photoshop Step 2 –> Create A New Optimized Document in Photoshop
Once you’re ready to begin, open Photoshop and create a New Document.
- Your document size is going to depend on how large you want your image to be. I’m making mine 800px width x 800 px height.
- Set the Resolution to 72 (which is standard for screens)
- Set the Color Mode to RGB (also standard for screens)
How to Create an Animated GIF in Photoshop Step 3 –> Start Adding the Elements of Your Composition, Layer by Layer
The next step is to start adding photos, text, and elements to your composition. Here’s my game plan for building my composition:
- Leave my background layer as white
- Type out the title “My Favorite Things” at the top & format the text
- Copy & Paste a picture of each item from the internet into my Photoshop document & remove the background (if necessary) from each
- Rearrange the items on the canvas until I like the layout
- Add more text – number my items 1-9 & format (change the size)
- Draw stars around each item with the brush tool to highlight it. For the animation portion, the stars will blink around the canvas, highlighting each item one at a time. To accomplish this, I need to put each set of stars ✨ (9 total) on a separate layer. I will also rename these layers — each one according to it’s corresponding item.
- Finally, I’ll clean up my layers to make sure they are labeled and organized before I start animating
Here’s what my composition looked like after following steps 1-6:
And here’s a closer look at my layers panel after I cleaned it up in step 7:
You’ll notice in the layers panel that I grouped some of my layers together. That means I put similar layers in a little folder together so the layers panel isn’t as cluttered. Each of my groups contains one of the item photos plus it’s corresponding number.
There’s no right or wrong way to group your layers – just do what makes sense to you.
To group layers together — hold down Shift on your keyboard, then select the layers you want to group together by clicking on them. Keep holding down shift, and now click the little file icon at the bottom of the layers panel.
Technically–since my layers are all going to stay where they are, I could merge or flatten them instead of grouping them, but leaving it this way means it’s 100% editable if I want to go back in and change something.
You’ll notice I left out the stars for each item, because I want easy access to those layers for the next step: animation!
Pro Tip: NOW would be a great time to save your PSD file so you don’t risk losing your hard work! That’s the #2 Rule of Graphic Design – save as you go!
How to Create an Animated GIF in Photoshop Step 4 –> Layer Visibility Is the Key!
We’re all ready to animate! But before we bring up our Timeline, do you notice how there’s a little eye next to each layer in the layers panel?
The eye represents layer visibility.
If you click on an eye it disappears and so do the contents of that layer. Click again and it all reappears.
Great, now that you understand layer visibility, onto the Timeline..
How to Create an Animated GIF in Photoshop Step 5 –> Window –> Timeline
If you’re using Photoshop Creative Cloud – you can access the animation timeline by choosing Window –> Timeline. If you’re using an older version of Photoshop- this may be called Animate.
A timeline should appear at the bottom of Photoshop. It looks like this:
How to Create an Animated GIF in Photoshop Step 6 –> Choose “Create Frame Animation”
In the Timeline panel, there’s an option for Video Animation or Frame Animation. You’ll want to click on Create Frame Animation.
Immediately, a frame appears labeled with the number 1. On the bottom of the frame, it reads “0 sec.” with a drop down arrow.
Right now all my layers are visible on Frame 1, but I need to change that.
I’m going to leave all my “groups” and my background layer turned on. They’ll remain on for each frame in my animation.
I’m going to turn off the visibility of all the “stars” layers except for the stars behind my fifth item, the Lindt chocolate. Remember- I turn the layers” off” or “on” by switching the eye next to each layer in the layers panel.
Then click the drop-down menu to the right of 0 sec. and change it to .5 sec — this means my frame will “play” for half a second before switching to the next frame.
From here I’m going to create another frame. Select the new frame icon on the Timeline, which is the icon next to the trashcan.
First, turn OFF the layer visibility of the stars behind the Lindt chocolate. Then, turn ON the stars behind your next item. I’m going with Item #9 – the dry shampoo.
I don’t have to adjust the time because when I created the new frame, the time automatically set to match the time of my previous frame: .5 sec.
Hit the Play button to preview your animation so far. When you look at your composition, the stars appear behind Item #5 and half a second later, the stars appear behind Item #9. They cycle back and forth infinitely. Press Stop.
Now that you see how the animation panel works, continue the animation by adding more new frames to your timeline, making just one set of stars visible on each frame..
How to Create an Animated GIF in Photoshop Step 7 –> Complete the Animation
- Keep repeating the same process in Step 6 until you’ve created a frame for each set of stars. And don’t forget that all the layers that have my images on them–plus my background & text layers– will remain ON for every frame. These are the repeatable steps I took –>
- Make a new frame in the timeline
- Turn off the star layer from the previous frame
- Turn on a new star layer in your layers panel
- Adjust the time of the frame if necessary
Eventually, your timeline will look something like this:
I now have all 9 of my star layers on a separate frame in my timeline. When I press the Play button, I can preview my animation. The stars move from one item to another in half-second intervals. Since the animation is set to Forever, it will play on a loop infinitely.
At the bottom of the Timeline, click the drop down menu next to Forever to change the amount of times the animation will play.
And that’s it! You can keep playing around until you get things just right, or you can move on to the next step: saving your GIF.
How to Create an Animated GIF in Photoshop Step 8 –> Save Your GIF Animation
When you’re ready to save your GIF, go up to File –> Export –> Save for Web
We need to save this GIF with web optimization in mind. That means we should keep the file size small in favor of faster load times..*much like you do with all your blog images*.
Notice in the photo above, GIF is selected in the drop down menu on the top right, as well as 64 colors. The more colors you add (up to 256) the more rich your image will appear, but your file size will be bigger.
In the lower left corner, you’ll see my GIF size is 108.8K with a load time of 21 seconds @ 56.5Kbps.
Considering 56Kbps is the speed of dial-up internet and most high-speed internet connections are moving ten times faster- or more — we should be good to go. You can view more load times according to varying internet speeds if you click the drop down menu.
To get a better look, you can also Preview your animated GIF at the selected settings in a web browser by clicking on Preview.
As I mentioned, it’s a good idea to keep your file size as low as possible – this might mean you sacrifice slightly on image quality, but it’s worth it in favor of faster load times on your blog or website.
Finally, hit save and then upload your GIF to your blog post! (Or Giphy – or wherever).
If you enjoyed this tutorial, be sure to share it with friends. Or, you can pin this image to come back to this tutorial later.
Don’t forget to drop your link in the comments below if you used this tutorial to create your own GIF in Photoshop! And tell me- was it easy?
Leave a Reply