Operation Manual

388
Last updated 11/8/2011
Chapter 11: Web graphics
Best practices for creating web graphics
Illustrator provides a variety of tools for creating layout for web pages, or creating and optimizing web graphics. For
example, use web-safe colors, balance image quality with file size, and choose the best file format for your graphic. Web
graphics can take advantage of slices and image maps, and you can use a variety of optimization options and work with
Device Central to ensure your files display well on the web.
About web graphics
When designing graphics for the web, you must consider different issues than when designing graphics for print. For
a video on saving graphics for the web, see
www.adobe.com/go/vid0063. For a video on importing, and copying and
pasting between web applications, see www.adobe.com/go/vid0193.
To help you make informed decisions about web graphics, keep in mind the following three guidelines:
1. Use web-safe colors.
Color is often a key aspect of artwork. However, the colors you see on your artboard aren’t necessarily the colors that
will appear in a web browser on someone else’s system. You can prevent dithering (the method of simulating
unavailable colors) and other color problems by taking two precautionary steps when creating web graphics. First,
always work in RGB color mode. Second, use a web-safe color.
2. Balance image quality with file size.
Creating small graphics 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 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.
3. Choose the best file format for your graphic.
Different types of graphics need to be saved in different file formats to display their best and create a file size suitable
for the web. For more information on specific formats, see Web graphics optimization options.
There are many Illustrator templates made specifically for the web, including web pages and banners. Choose File >
New From Template to choose a template.
More Help topics
Shift a color to a web-safe color” on page 147
About pixel preview mode
To enable web designers to create pixel accurate designs, the pixel-aligned property has been added in Illustrator CS5.
When the pixel-aligned property is enabled for an object, all the horizontal and vertical segments in the object get
aligned to the pixel grid, which provides a crisp appearance to strokes. On any transformation, as long as this property
is set for the object, it gets realigned to the pixel grid according to its new coordinates. You can enable this property by
selecting the Align to Pixel Grid option from the Transform panel. Illustrator CS5 also provides the Align New Objects
to Pixel Grid option at the document level, which is enabled by default for Web documents. With this property
enabled, any new objects that you draw have the pixel-aligned property set by default.