Learn how to animate text and titles for your website or feed with this quick tutorial. Today we'll learn how to create a GIF text animation inspired by classic stop-motion videos.
Watch the steps unfold in this quick video lesson and get all the details you need in the written process below. Head on over to Envato Market for more amazing effects like Photoshop actions.
Follow along with this tutorial over on our Envato Tuts+ YouTube channel:
Tutorial Assets
The following assets were used in the production of this tutorial:
1. How to Add Text to Photos in Photoshop
Step 1
Open a New Document in Photoshop at 850 x 567 pixels.
Copy and Paste the
Fall Landscape Stock onto a New Layer.
Then go to Filter > Blur Gallery > Field Blur, and add a Field Blur of 2.3 pixels for more depth of field.
Use the Rectangular Marquee Tool (M) to select each letter for the word "REAL" from the Scrabble Letter Stock. Copy and Paste each letter onto its own New Layer and rename them when you're through.
Step 2
Some of these letters are a little lopsided. So let's adjust their shapes.
Shift-click to select all the letters, and Resize (Control-T) them for a smaller fit. If the letters are still uneven, select the Move Tool (M) and move each individual letter to the right spot by using the right-left and up-down arrow keys.
Adjust all the positions until they're much straighter.
Then cut off the excess by using the Rectangular Marquee Tool (M). To do this, make a large selection at the top, and then go through each layer and hit the Delete key until you have a clean result. Repeat this process for the bottom.
Blend all the colors together with a New Adjustment Layer of Curves, adjusting the curves for the RGB and Blue Channels like so.
2. How to Create a Text GIF Animation in Photoshop
Step 1
Let's set up the animation.
To create a GIF animation in Photoshop, go to Window > Timeline.
Hit Create Video Timeline, and then click the Frame Animation option.
Generally speaking, we're making two slides of rotating text letters for this animation. It's similar to what you might see for creative techniques for stop-motion videos.
So before we animate these wooden pieces, we'll need another set of letters. Select each letter in the Layers panel and hold Control-J to create a Duplicate. Do this until each letter has its very own copy.
Step 2
For the animation, set the Loop to Forever, and the initial Time Delay to .25 seconds.
Hide the visibility of all the copy layers. With the original layers still visible, use the Free Transform Tool (T) to Rotate each letter at opposing angles. If it gets crowded too, feel free to adjust their positions even more with the Move Tool (V).
Create two new Frames in the Timeline panel, and then select Frame #2.
On this frame, Hide all the original letter layers and then Unhide their copies.
Just like before, we'll need to Rotate (Control-T) each letter at opposing angles for a quick flip. This time, we'll start by rotating in the opposite direction (clockwise).
Make a copy of Frame #2 and drag it to the end. Preview your animation by going back to the start and hitting Play.
You can now save this animation as a GIF. Screen recording software can also help you turn it into a fun, animated video for Instagram!
Check out the final animation below.
Learn More With Our Tutorials!
What message will you write with this tutorial? I hope this quick tip has inspired you to learn more about Photoshop animation effects. Create quick GIFs to share online with friends and show us your results!
Get Amazing Design Resources
Want to create videos like this? Download the resources used in this video:
Check out these tutorials to learn more from our experts:
