Create eye-catching text straight from the 80s

Great text can be the centerpiece to your design, or an extra element to really make your work pop. Either way, this tutorial will show you how to create some retro-themed text of your own in illustrator.

Step 1

Lets start off by opening up Adobe Illustrator and creating a new 1200x600px document.

Using this nice retro font Minotaur, type out your name, company, whatever. The font size that I am using is 152pt for the smaller letters and 212 for the “D”s, but feel free to play around with your own words and sizes.

Step 2

Go to Type>Create Outlines, so we can start editing the text. First we want to ungroup the letters so we can move them around. Go to Object>Ungroup.

Select the “enis” by clicking and dragging a box around the letters with the Selection Tool (v). While holding Shift, drag box around “esigns” to select it all. Now group those letters by going to Object>Group.

Select the two D’s and group those as well, so we should end up with two sets of groupings. Select both groups and go to Window>Align to open up the Align palette. Click on Vertical Align Center to line up the middles of the two groups, so the center point of all the letters is the same.

Select all the text and go to Object>Ungroup.

Step 3

Now we are going to move the “D” right up so it fits into the “E” and move the “Denis” so it is right up against the “Designs”, with a little bit of space in between, so you have something that looks similar to the image below.

Step 4

Now that we have our text the way we want it to look, we can start adding in some gradients. For my text, I am going to make the two D’s yellow, and the rest of the text blue. Our gradient is going to give our text a glossy look, so it will consist of a lighter yellow, a darker yellow, black and white.

I find it easier to pick a color using the CMYK sliders, so I am going to pick my lighter yellow with a little bit of Magenta, and a lot of Yellow.

My next yellow will be a little more orange by making the Yellow 100% and increasing the Magenta.

To make the gradient, put the black right in the middle, and the lighter yellow on both the ends. Take the white and put it just to the left of the black, and take the darker yellow and put it just to the right of the black.

To make the gradient on our text, use the Gradient Tool (G), and click and drag the gradient from the top of the “D” to the bottom of it.

Step 5

For all the letters except for the D’s we are going to make them have a blue gradient, with the same gradient layout as the yellow. For my dark blue I am using 100% Cyan, and for my lighter blue I am just going to use a lighter Cyan.

Step 6

Before we get any further lets ad a big black box around our text. Go to Object>Arrange>Send to Back to put the black box behind everything.

We are going to add a simple decorative element to the text, two lines on the top and bottom that line up with the top and bottom of the D’s.

So first make a long rectangle, the length of our text. The width doesn’t have to be anythings specific, just a width that gives the text some breathing room.

Once you get the top line in place do a Copy and Paste in Place (Ctrl+C, Ctrl+F). Move the new line down so the bottom of the line lines up with the bottom of the D.

Step 7

We want to add some space between the two D’s and the lines. Click on both of the D’s and go to Object>Path>Offset Path and change the offset to .1 inches. This will duplicate the D’s and make them .1 inches wider. Move the two D’s above everything by going to Object>Arrange>Bring To Front. With the two D’s still selected copy them with Ctrl+C. Now while holding Shift click on the top line so you have the two D’s and the line selected. Now using your Pathfinder palette (Windows>Pathfinder) click on Subtract from Shape Area, and click Expand. That should give you space around the two D’s

Now Past in Place (Ctrl+F) the two D’s, and repeat this step with the bottom line.

Step 8

We are going to add a stroke around all the text to give it more of a chrome look. Select all the text and go to Object>Path>Offset Path and change the offset to -.03 inches.

Instead of just filling the text with a solid color we are going to use a gradient to give our edges some light glare. So take the light blue that we used in the text gradient and put that on either side of the gradient. Put white in the middle at 50%. Put the same light blue at 35% and 65%. Click and drag the gradient into the color swatches.

Using the Gradient Tool (G) click and drag the gradient across each letter. Play around with how you want the glare to look by dragging the gradient different angles.

Step 9

Repeat step 8 for the yellow parts. And that’s it, were done!


Visit PsPrint to get the best deals in online printing services!

You might also like these articles...

Only comments in English will be approved!


  1. 18/04/2011

    Haha this looks so retro, I like it!

  2. 23/04/2011

    Thanks for the tutorial, I dig the effect.

  3. 27/04/2011

    Great tut, very nice !

  4. PostMortem2K10

    Very nice style.
    Looks a bit like the old game titles on NeoGeo and NES XD

    THX4That ;)

  5. 18/12/2011


  6. 03/01/2012

    But wanna comment on few general things, The website design is perfect, the content is rattling great : D.

  7. 27/01/2012

    This is one awesome blog post.Really looking forward to read more. Fantastic.

  8. MARV

    Just add a purple stroke and it’s oldskool WRESTLEMANIA!