Animated Star with Text in Photoshop

    ●   Make a Star, Type some Text, and Make them Glow.

Learn About:

Polygon ToolText Tool Animation .gif

This tutorial is part of the We Can Be Heroes! and What in the World? Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open a New Blank Document in PhotoShop ~

Go to: File > New and open a new document with these settings:

Step #2: Polygon Tool ~

Select the Polygon Tool = which is behind the Rectangle Tool …

… make sure Pixels is selected in "Pick tool mode" …


… and click on the drop down icon …

geometry options

Select Star. Also notice the other options available. You may want to come back here later and experiment.


Lastly, set the color of your star.

Step #3: Star Shape ~

Click and Drag the mouse across the screen:

You can change the number of star sides here:


Step #4: Make ANOTHER New Layer ~

Go to: Layer > New > Layer

… or hit the keyboard shortcut: Cmd (⌘)+ Shift +N

+ +

Then draw another NEW star above the old one with a different color.

Separate layers allows your stars to be different colors, different Layer Styles and rotated individually.


Step #5: Text Tool~

Get the Text Tool or hit the keyboard shortcut letter (t) …


… click the canvas and type SOMETHING YOU CAN USE IN YOUR PROJCT!



If you're working on the We Can Be Heroes! Project how about the word "Play" or "Start" or "Let's Go"…





OR ~ if you're working on the What in the World? Project type "Welcome" or "Florida!" or "Visit"…




OR ~ if you're creating a "Call to Action" pick one of these:


Click Here - Buy Now - Free Trial - While Supplies Last - Satisfaction Guaranteed - Money Back Guarantee - Get It Now! - Act Now! - Best Value - Top Rated - Easy to Buy - Offer Expires - Order Now - Risk Free - Order Now - Hassle Free - Trouble Free - Idiot Proof


Step #6: Select your Font ~

Select your text …

… click on Font Family in the menu bar …

… and set the size of the font here:

Step #7: OR - Go to dafont.com and Find a Font that Matches your Project ~

OR- go to http://www.dafont.com/ and search for a font that fits your project theme -

  •   For instance, if you want a text or font that looks Old, search for that at dafont.com.


  •   If you want something that looks like Money, search for that. Get it?

Step #8: Blending Options ~

Then go to: Layer > Layer Style > Blending Options …

Set your Outer Glow color to something that matches your color scheme …

leave your Outer Glow size to 5

Step #9: Duplicate the Layer ~

Right-Click the layer and hit "Duplicate Layer."

Step #10: Click on the Outer Glow Layer Style ~

Double-Click on the "Outer Glow" layer style on the duplicate layer …

… set the "Outer Glow" size on the duplicate layer to 10.

Step #11: Repeat ~

Repeat the process as many times as you can, each time increasing the size by a factor of 5 …

Step #12: Animation ~

Go to: Window > Timeline and the Timeline window appears and click "Create Frame Animation" (if necessary) …

Step #13: Layer Visibility ~

With Frame 1 of the animation selected, turn OFF the visibility of all your layers by clicking on the eye of each layer …

except the bottom 3 layers - leave them ON.

Step #14: .02 Seconds ~

Click the seconds at the bottom of the frame …

Step #15: Add New Frames ~

Click the little icon at the bottom to "Duplicate selected frames …"

… and with the Duplicate Frame selected …

… turn the visibility ON in the next layer up.

layer vis

Step #16: Keep Going ~

Create a new frame for each layer layer you made.





Keep going! Add frames for all your layers …


Step #17: Play ~

Play your animation by clicking on the Play button.

plays animation

The goal is to make the glow go up …

renaissance animation

Step #19: Forever ~

Set the number of times your animation plays, click here …

select looping options

… and set it to Forever.



To speed up or slow down your animation, select all the frames by holding shift-key and clicking on the first and last frames.


You probably want your animation to play quickly …

frame delay time


Step #20: Save for Web …

Go to: File > Save for Web … and save your work as a .gif …



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

and put the file in the root folder of your project …

Step #21: Insert the animation in your Project ~

Insert the animated gif on YOUR CURRENT PROJECT …



… if you're working on the Heroes! Project put it on your project …


… or the What in the World? Project use your animated .gif in your apDiv like this ...


Last Step: Save and Attach~

Save and attach your work and keep going.