Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Photoshop
Design

How to Make a Stop-Motion-Inspired Text Animation in Adobe Photoshop

by
Length:ShortLanguages:
What You'll Be Creating

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.

Blur the background photo in photoshop

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.

Straighten the letters

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.

Even out the top of the letters

Blend all the colors together with a New Adjustment Layer of Curves, adjusting the curves for the RGB and Blue Channels like so.

Blend colors with curves adjustment

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.

Duplicate the layers

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.

Rotate the letters

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).

Rotate the letters 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:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.