1. Using Photoshop, make a new document: 800 x 400 pixels RGB. If you want it to be square, make it 800 x 800 pixels.
2. With your Type tool selected, type “How To”. Click the Move Tool and then Command J to duplicate text layer. Position your duplicated text under “How To” so you can see it
3. Type “Make An” using the duplicate text layer you just made from Step 2.
4. Click the Move Tool and hit Command J again to create a third text layer. Position your text under “Make An” so you can see it.
5. Type in “Animated GIF” into your third text layer.
Really you can type in whatever you want as long as you have 3 separate text layers. Don’t forget to save.
Now we are going to make our text into a GIF animation!
6. Go to your Window menu and choose Timeline if it’s not open yet. This is where you create your GIF animation, frame by frame.
7. Turn off all text layers by clicking the eyeballs next to each text layer, so you only have the background turned on.
8. Now in your timeline, click the button “Create Frame Animation”
A thumbnail with the caption “0 sec” appears in place.
9. Don’t forget to save.
10. In your timeline layer, click the icon that looks like a folder piece of paper. You will duplicate that first frame and so now you should have 2 thumbnails. In your Layers, go ahead & turn on the text layer “How To”
11. Repeat the previous step by creating a duplicate of that 2nd frame. You should now have 3 thumbnails. Now turn on your text layer “Make An”.
12. Repeat the previous step by creating a duplicate of that 3rd frame. You should now have 4 thumbnails. Now turn on your text layer “Animated GIF”.
13. In the animation timeline, if you click on the tab that says “Once” with an arrow next to it, choose the “Forever” option, hit your spacebar to start or stop the animation; you will see that your animated GIF will repeat at a very fast pace.
14. In order to slow this animation down and be able to read the text (which is important), select the first frame in your Timeline and shift click to select the others. All 4 frames should be selected. There’s a little down arrow next to the caption “0 sec.”, click on one and select 1.0. All 4 of your thumbnails should now say “1 sec” underneath.
Now your animation will play at a speed of 1 second per frame. Hit the spacebar to see it play.
So basically, you’re pretty much done!!
15. When you’re done, you can go to File menu > Export > Save for Web (Legacy) with GIF, Perceptual and No Dither as the settings.
Bonus steps:
16. Perhaps the first frame is a little boring since we left it blank, so I added a text bubble shape with “Photoshop Tutorial” in it.
Doing this will actually mess up your frame animation, so you will have to repeat the process of turning layers on and off on your Layers and Timeline panel to make it right again. This shouldn’t be too difficult since you only have 4 frames of animation.
So always make sure that in order to edit a frame in the animation timeline, make sure you have it selected first. Then go to your Layers and turn on or off the layer that you want to be visible. Repeat with each frame until you’re happy with the results.
Other times you might have to just delete the frame you’re trying to edit and start from scratch.
17. I snazzed it up by adding a yellow / lime green gradient. I also changed the last frame to 2 sec. so there’s a 1 sec pause before the animation repeats again.
You can animate photos, shapes, text, etc.
You can download the PSD I was working with and the final animated GIF here.
