Home / Articles / Adobe Creative Suite / Working with Type in the Adobe Illustrator CS5 Perspective Grid

Working with Type in the Adobe Illustrator CS5 Perspective Grid

Article Description

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.

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:

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:

  1. 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).
  2. Figure 1 Defining a new document for an online banner.

  3. Click OK to generate the new document.
  4. Next, we'll apply a standard two-dimensional perspective grid. Choose View > Perspective Grid > Define Grid.
  5. 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:
  6. 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

  7. 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.
  8. Click the Save Preset button, type Banner as the new preset's name, and click OK.
  9. 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.
  10. Figure 2 Defining a perspective grid for an online banner.

2. Working with Shapes vs. Type in Perspective | Next Section