Create Web Content in Illustrator, Part 1

This article reprinted courtesy of Pearson Education, Inc.

Adobe Illustrator CS5 provides a variety of tools for creating and optimizing web content–everything from web graphics (such as buttons) to entire web layouts. In this article, we’ll tour some of the most widely used web features in Illustrator, starting with the best practices for creating web content.

Before jumping into working with web graphics, it’s important that you learn some basic principles for creating web graphics in Illustrator. I’ll cover each of these features in detail in individual sections of this article, but here’s a quick sneak peek for readers in a hurry:

* Use RGB colors.
* Use an appropriate anti-aliasing setting.
* Align to the pixel grid.
* Create your artwork to scale.
* Balance image quality with file size.
* Choose the best file format for your graphic.

Use RGB Colors
Always work in RGB color mode (see Figure 1). If you’re trying to use print content on a website, you can easily convert the colors in the image from CMYK to RGB by opening the Illustrator file and choosing File > Document Color Mode > RGB. The colors in the document and in the Swatches panel will be converted to RGB (even though their names may still use CMYK).

NOTE: Wondering about so-called “web-safe colors”? Forget about them–they’re dead.

Figure 1. RGB color is king on the Web.

Adjust Text Anti-Aliasing
Using this feature isn’t critical, but it is a best practice. If you create text to be used in artwork for the web, it will become rasterized when the artwork is optimized (saved as JPEG, GIF, or PNG). How the text is rasterized depends on the anti-aliasing setting in the original artwork, which you set using the Character panel (see Figure 2).

Anti-aliasing adds colored pixels to the edge of the text to create shades of gray, making the edge appear smoother. Most of the time, you’ll probably use the Sharp setting. If the text is quite small, you may want to turn off anti-aliasing (select None) to avoid making the text too blurry.

Figure 2. Text anti-aliasing options.

Align to the Pixel Grid
A new feature in Illustrator CS5, the Align to Pixel Grid option allows you to snap content edges to the pixel grid (see Figure 3). In the past, artwork that should have crisp, clean edges, such as the edge of a rectangle, might instead appear fuzzy. With the Align to Pixel Grid option turned on in the Transform panel, you can avoid that problem. The vertical and horizontal segments of the paths of the object are nudged, making all such segments show crisp strokes for all stroke widths and all locations. Objects with this option selected always have stroke widths in full integer values.

NOTE: To see the aligning take place, you need to be in Pixel Preview mode (View > Pixel Preview).

Figure 3. Illustrator CS5 and the Align to Pixel Grid option.

TIP: In Illustrator CS5 (but not earlier versions), when you create a new document you can select the option Align New Objects to Pixel Grid. This option, found in the New Document dialog box, applies to new content you create (not text, or content that has been copied-and-pasted), aligning the new content to the pixel grid automatically.

Posted on: December 8, 2010

2 Comments on Create Web Content in Illustrator, Part 1

  1. You express an implied preference for GIF over PNG (if no alpha channel). Is that because GIF has seniority? IOW, is slightly more guaranteed to work in slightly more situations? For reasons hard to quantify, or now out of memory, I prefer PNG. I think of PNG as slightly smaller in file size, but can’t assert that without proof. Don’t use GIF anymore, and haven’t regretted it.

  2. What Pearson Education publication was this article reprinted from?

Leave a comment

Your email address will not be published.