Animated Pow! Text in Illustrator

    ●  Create Text in Ilustrator and make it Blink in Photoshop.

Learn About:

Duplicating Text Downloading FontsShear Transform Filter Selection Tools Pathfinder

  •   This tutorial is part of the We Can Be Heroes!Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open a New Document in Illustrator ~

Open a new document in Illustrator.

Step #2: Type Your Text ~

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

type tool

… draw a box and type something you can use:

For Instance:

Something you can use in your project!



Step #3: Download and Install an Appropriate Font ~

Download An Interesting Font you could use in your work.

  •   Go to: and download a font that fits your theme.
  •   Look for big Bold fonts appropriate to your project.

When you find a font that matches your project, Right-Click and save the file to your desktop, or somewhere you can find it …

download font

… then go to your Downloads (probably Window > Downloads), open it, and double-click on the .tff file(s) …

ttf file

… when Font Book opens, click Install Font.

font book install

Select your Font in the Character panel …

… select Size here …

… and Colo r in the menu bar - something loud and obnoxious like Red, Yellow or Orange …

orange color text

Step #4: Create Outlines ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

… go to: Type > Create Outlines



… or hit the keyboard shortcut:

shift key+ +



… but however you do it, be sure to ALWAYS create outlines of your text.


Step #5: Duplicate the Text ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

Selecton Tool

… hold down the Alt (⌥)/Optionalt option key and make a duplicate of the text.

Step #6: Color and Arrange ~

Change the color of the text to something darker …

darker color

  … also, Right-Click, click Arrange and hit "Send Backward."

sorr send to back

  Lastly, move the duplicated text so it is off-center just a little.

Step #7: Transform > Shear ~

 Select both texts with the Selection Tool …

 … then Right-Click and hit:  Transform > Shear.

transform shear

 Set the Shear to anything you like, start with this:


Step #3: Create 2 Star Shapes ~

 Lock your Text Layer …

 … create another New Layer below your text layer and get the Star Tool which is behind the Rectangle Tool …

… click somewhere on the Artbord with the Star Tool

… and set the number of points for your star - Try 9 or 10 to start with.

star points

Then do it again! That's right! Make 2 stars.

star shape text

Step #10: Adjust the Shapes ~

 Now get the Selection Tool or hit the keyboard shortcut letter (v) and adjust the shapes to overlap each other …

Step #11: Combine Both Shapes ~

 While holding Shift, select both shapes …

 … then go to: Window > Pathfinder or hit the keyboard shortcut shift key+ cmd key+ o key and select Unite.

unite pathfinder

Now they're together!

Step #12: Direct Selection Tool ~

Get the Direct Selection Tool or hit the keyboard shortcut letter (a) …

direct selection tool

… adjust the anchor points and add color.

Steps #15 - Crop the Image~

Get the Artboard Tool or hit the keyboard shortcut Shift+O

… and shrink the artboard size as small as possible.

Step #16: Save for Web ~

Go to: File > Save for Web … and save your document as a png-24.

Step #17: Open your .ai document in Photoshop~

If you want to make your shape blink, open the image in Photoshop

open in Photoshop

… and create a new BLANK layer above your other one.

Step #18: Window > Animation ~

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

… hit Duplicate selected frames

duplicate frame

… and with the Duplicate Frame selected …

duplicate frame

… turn OFF the visibility of the layer with the shape in it by clicking on the - Frame 2 should now be blank.

frame 2 blank

Step #19: Select Both Frames ~

Select both frames by holding shift-key and clicking on them …

Step #20: Frame Delay ~

Then click the seconds at the bottom of a frame …

frame delay

… and set the frame delay to .1 or .2 seconds.

Step #21: 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 …


Step #22: Play ~

Now hit Play to see what you have made …

Last Step: Save for Web …

When you are done with all your layers, go to: File > Save for Web … and save your work as a .gif …


Check the file size in the lower left hand corner. Try to keep below 2 megabytes if you can.

Animated gifs are supposed to be small - that's their purpose. To make your file smaller, shrink the pixel size …

Save the file as YOUR NAME! so we know whose it is.

Attach it to your project.

Other Resources: and or