In print or online, readers are unimpressed by text that's just plonked down onto a graphical background. On the other hand, type with tasteful effects can make a publication or web page much more inviting. David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, shows how to manipulate text in Adobe Illustrator CS5 to lend great visual perspective.

From the author of

The perspective tools in Adobe Illustrator CS5 are radically new. As with all things new and radical, the tools are controversial and a bit rough around the edges, and will be unintuitive to many. I can't speak as a professional or talented artist; however, as someone who needs to generate artwork, symbols, and particularly 3D type in a hurry, I'll argue that these tools are worth the effort.

In this article, I'll focus on working with type in a perspective grid, for two important reasons:

Perspective grids are far more robust and flexible than previously available techniques for applying perspective to type (such as the Extrusion 3-D effect).

Working with type in a perspective grid can be confusing because perspective grids come with a unique set of rules and some shortcomings that require workarounds.

Let's sort out the confusion and walk through how to use type in a perspective grid.

Setting Up the Perspective Grid for Type

The perspective grid setup options in Illustrator are complex. You can define a grid with one, two, or three dimensions. For this article, I'll eschew providing a reference guide for all those settings, and instead direct you to two free tutorials that explore how to set up and edit a perspective grid:

In Adobe TV's video "Defining Perspective Grids," Illustrator guru Mordy Golding documents many of the options available for setting up perspective grids.

If you prefer to do a bit of "prerequisite" study before experimenting with perspective grids, avail yourself of these reference links, and this article will be waiting here when you're done. On the other hand, if you're the kind of person who likes to dive in and learn by doing, keep these links handy for future as-needed reference, and jump right into the following procedure with me, where we'll set up a perspective grid and work with type within it.

Follow these steps to set up a basic two-dimensional grid with banner-style perspective in Adobe Illustrator:

Choose File > New. In the
New Document dialog, enter banner in
the Name field, choose Web
from the New Document Profile
drop-down list, enter a Width
of 960
px (pixels) to conform
to standard website width,
and enter 200 px in
the Height field (see Figure
1).

We won't be creating a finely
tuned technical illustration
here, so the exact perspective
settings aren't critical.
(Refer to the tutorial links
above for details on customizing
perspective grids.) To duplicate
my project, use the settings
shown in the following table:

Option

Setting

Type

Two Point Perspective

Units

Pixels (because we're designing
for the Web)

Gridline Every

30 px

Viewing Angle

45

Viewing Distance

480 px

Horizon Height

250 px

The Grid Color & Opacity
settings define display, not
functionality. Adjust the default
settings to make the grid look
the way you prefer when you're
working with it. For example,
I dropped the opacity down to
33% to make the gridlines less
distracting.

Click the Save Preset button,
type Banner as
the new preset's name, and click
OK.

Your new settings are available
by choosing View > Perspective
Grid > Two Point Perspective > Banner,
as shown in Figure
2. Click OK to generate
the grid. We're ready to create
type with perspective.