Don’t be scared! Making a GIF is not nearly as complicated as you may think!
Well, okay, that’s not technically true. It can actually get complicated, but that’s completely dependant on what you want to GIF. Don’t worry though, because this is just a tutorial, I’ll be keeping things simple, and you can always practice and work your way up to complicated later.
In the interest in keeping things simple, I’ll just show you how to make the GIF I teased in the last tutorial.
Also, real quick, ‘GIF’ stands for Graphics Interchange Format. So, the proper pronunciation is to say it with a hard ‘g’ sound, not with a ‘j’ sound. Now that you know what it stands for, I hope you will start saying it correctly, because now you don’t have an excuse. (Unless you say ‘jraphics’, but I’m gonna go ahead and assume you don’t)
Okay, now that that’s out of the way, let’s get started!
Step 1.
First things first, set up a new document/work file in Photoshop, and make it whatever dimensions you want. Then, using the Type tool, type some words for us to GIF, and make sure you type them all on different layers. Since I’m showing you the GIF I teased last time, I typed out This is a GIF on 4 separate layers. But it can be any text you want. (Or it can even be a picture, but we’ll get to that later)
Step 2.
Next, go up to Window (in the top menu with File) and click on Timeline from the drop-down menu.
Once you click on that, you should see a banner come up on the bottom of the window, this is called the Timeline. There should be 1 ‘frame’ with your layers already in it that popped up as well.
Step 3.
Now that you have the Timeline open, you have to place each layer onto different frames. This is actually much simpler than it may sound. First step, is to take them off the first frame. To do this, simply go over to your Layers Panel, and hide the layers you don’t want visible in the first frame. (Click on the eye beside the layer to hide it)
The only thing visible in the first frame should be the word This.
Step 4.
Now we have to make more frames. To do this, click on the Duplicate Frame button in the timeline. It is the button that looks like the New Layers button.
To make this the 2nd frame, we are going to hide the This layer, and un-hide the is layer. You do this in the exact way you did to hide all the layers, but the hidden layer won’t have an eye next it. That’s okay, just click in the little square, and the eye and layer will appear, making the layer un-hidden.
Continue to duplicate, and hide/un-hide layers until you have 1 frame for each layer. If you get confused, look at the frames – you should be able to see in the frame preview that there is only 1 word in each frame.
Step 5.
Now that we have all the frames correct, we can check how the GIF looks. To do this, click on the 1st frame (to start the GIF from the beginning), and then click the Play button in the Timeline. Your frames should then ‘play’, and you can see if you need to fix/change anything.
Step 6.
If you think your GIF is moving too slowly (or too fast), you can change the speed by clicking on the arrow that’s under the frame, next to the time, and then select the time you think will work best for you. Keep playing with it until you find a speed you need, and to check the speed, just Play the frames again until it looks right for your needs. (For the most part, I’ve found the default of 0.5 seconds to be sufficient)
Now that you’ve got the timing right, you may want to change the Loop type as well, so that it continuously plays, instead of just playing once. In the Timeframe box, under the frames, there should be a Loop dropdown. Click on the drop-down menu, and select Forever from the list. This will make your GIF play in a continuous loop, well… forever. (If the default is already Forever, you can ignore this step)
Step 7.
Now that you’ve completed your GIF, it’s time to save. But wait!
You can not save a GIF in the same way you’ve been doing (Flattening then saving as a PNG/JPEG). Well, okay, actually you can save it like that, but then it won’t play.
If you want to save the GIF to actually play, you’ll have to go up to File, then find Save For Web in the drop-down.
In the dialogue box that comes up, make sure GIF is selected as the format, and leave everything else the default.
Then, click the Save button on the bottom of the box, and then from there you can give the file a name and save it to wherever you need to, like any other file.
And there you have it! You now know how to make a GIF! I told you it wasn’t that hard. And the cool thing is the steps are exactly the same no matter what you’re doing.
So, say you want to make a picture move. Let’s say you want to make a rocket ship take off.
The steps are exactly the same, except instead of using text, we’re moving a picture. And, it takes more frames. Also, because it’s just one picture (minus the booster flames), all I’m doing is moving the picture slightly between frames, so it appears to be flying.
Here’s what the PHSH work file looks like:
Each time I moved the rocket, I placed a Guideline where the nose was, so I’d know how much to move it in the next frame. You can see here that I also changed the play speed twice. In the first few frames, it’s set at 0.2 seconds, and then after the ‘booster’ (flames) comes out the bottom, I changed it to 0.1 second, so it appears like the rocket sped up.
Go ahead and play with this technique – it is one of the more fun ones. You guys have until October to keep yourselves busy with GIF making, after which, I’ll be showing you how to create:
Like this tutorial? Check out the rest of the series here!
Liking the site? Consider signing up for my Patreon, so I can continue bringing you the content you love!
