Creating Web Content in Adobe Illustrator CS5
- Best Practices for Creating Web Content
- Time for an Example!
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
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).
)
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.
)
Figure 3 Illustrator CS5 and the Align to Pixel Grid option.
Create Artwork to Scale
As you work with web images, you'll realize that you typically shouldn't resize images on a web page. In most cases, resizing can distort images, making them appear further rasterized. This is why you should create or scale content in Illustrator to the final size you plan to use on the web page after the image is optimized (1:1). So, if you want to create a button for your web page, and the button needs to be 150 pixels wide, make it 150 pixels wide in Illustrator, rather than scaling it in a program such as Adobe Dreamweaver.
To gauge the size, make sure that you can see the rulers onscreen (View > Rulers), and use the Transform panel and other methods to determine object size.
Balance Image Quality with File Size
Limiting your graphics to small file sizes is essential to distributing images on the Web. With smaller file sizes, web servers can store and transmit images more efficiently, and viewers can download the images more quickly. You can view the size and the estimated download time for a web graphic in the Save For Web & Devices dialog box (choose File > Save For Web & Devices).
Choose the Best File Format for Your Graphic
This can be a rough rule to follow, in some cases. When you create artwork in Illustrator, eventually you'll need to optimize it for use on the Web, unless you're using the art in some other way, such as converting it to portable document format (PDF) and posting the PDF file. So you'll need to choose from one of the three main file types for graphical web content: JPEG, GIF, or PNG.
Here are a few guidelines for deciding which file format is best for your artwork:
- GIF. If the
artwork has less than 256 colors
(such as in a simple button),
or you need the artwork to have
generic transparency (in which
one color is transparent, such
as the background of an object),
then GIF is your format. Examples
of artwork typically saved as
GIF:
- Buttons
- Page objects (squares, lines)
- Simple logos
- Icons
- Background objects (without complex gradients)
- Objects with rounded corners
- GIFs are compressed using a lossless compression.
- JPG. JPEGs
can have millions of colors
and are very useful for saving
images such as a company photograph.
If your artwork doesn't require
transparency, has a range of
colors (complex gradients, shadows,
and so on), then JPG is optimal.
Examples of JPEG-worthy content:
- Art containing photographs
- Artwork with complex gradients and/or textures
- JPEG images are compressed using a lossy compression.
- PNG. Similar to GIF, the PNG format uses a lossless compression. It also has the ability to save content with up to 24 bits of color. Most people save artwork in the PNG format if alpha transparency is involved (things like drop shadows).