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:
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.
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.
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.
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.
For more information, see Drawing pixel-aligned paths for web workflows.
When you save artwork in a bitmap format, such as JPEG, GIF, or PNG, Illustrator rasterizes the artwork at 72 pixels per inch. You can preview how objects will appear when rasterized by choosing View > Pixel Preview. This is especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized graphic.
To understand how Illustrator divides objects into pixels, open a file that contains vector objects, choose View > Pixel Preview, and magnify the artwork so that you can see its individual pixels. The placement of pixels is determined by the pixel grid that divides the artboard into 1‑point (1/72 inch) increments. You can view the pixel grid if you zoom in to 600% view. If you move, add, or transform an object, the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.
The pixel grid is sensitive to the ruler origin (0,0). Moving the origin of the ruler will change how Illustrator rasterizes artwork.
Using Adobe Device Central with Illustrator
Device Central enables Illustrator users to preview how Illustrator files will look on a variety of mobile devices.
For example, a graphic artist may use Illustrator to design a wallpaper for mobile phones. After creating the file, the artist can easily test the file on a wide variety of phones. The artist can then make adjustments, such as altering the file so that it looks good on a number of phones, or creating two separate files that cover a range of popular phone screen sizes.
- When you are satisfied with the results, click Save in the Illustrator Save for Web & Devices dialog box.
To simply open Device Central from Illustrator (instead of creating and testing a file), select File > Device Central.
For a tutorial about creating content with Illustrator and Device Central, see http://www.adobe.com/go/vid0207.
To optimize graphical content for mobile devices, save artwork created in Illustrator in any SVG format, including SVG‑t, which is especially designed for mobile devices.
Use the following tips to ensure that images created in Illustrator display well on mobile devices:
Use the SVG standard to create content. Using SVG to publish vector graphics on mobile devices results in a small file size, display independence, superior color control, zooming ability, and editable text (within the source code). Also, because SVG is XML-based, you can incorporate interactivity into images, such as highlighting, tool tips, special effects, audio, and animation.
Work within the final dimensions of your target mobile device(s) from the beginning. Although SVG is scalable, working within the correct size will ensure that final graphics are optimized in quality and size for the target device(s).
Set Illustrator color mode to RGB. SVG is viewed on RGB raster display devices, such as a monitor.
To reduce file size, try reducing the number of objects (including groups) or making it less complex (fewer points). Using fewer points significantly reduces the amount of textual information needed to describe the artwork in the SVG file. To reduce points, select Object > Path > Simplify and try different combinations to find a balance between quality and number of points.
Use symbols when possible. Symbols define the vectors that describe an object once, instead of multiple times. This is useful if artwork contains objects like button backgrounds that are reused.
When animating graphics, limit the number of objects used and try to reuse objects whenever possible to reduce file size. Apply animations to groups of objects instead of to individual objects to avoid code repetition.
Consider using SVGZ, the compressed gzipped version of SVG. Compression can reduce file size dramatically, depending on the content. Text can usually be heavily compressed, but binary-encoded content, such as embedded rasters (JPEG, PNG, or GIF files), cannot be compressed significantly. SVGZ files can be uncompressed by any application that expands files compressed with gzip. To use SGVZ successfully, check that your target mobile device can decompress gzip files.
For more tips and techniques for creating content for mobile phones and devices, see www.adobe.com/go/learn_cs_mobilewiki_en.