Slices and image maps, About slices – Adobe Illustrator CS4 User Manual

Page 381

Advertising
background image

374

USING ADOBE ILLUSTRATOR CS4

Web graphics

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 monitors.

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

.

Slices and image maps

About slices

Web pages can contain many elements—HTML text, bitmap images, and vector graphics, to name a few. In Illustrator,
you can use slices to define the boundaries of different web elements in your artwork. For example, if your artwork
contains a bitmap image that needs to be optimized in JPEG format, while the rest of the image is better optimized as
a GIF file, you can isolate the bitmap image using a slice. When you save the artwork as a web

page using the Save For

Web & Devices command, you can choose to save each slice as an independent file with its own format, settings,
and

color panel.

Slices in an Illustrator document correspond to table cells in the resulting web page. By default, the slice area is
exported as a image file that is enclosed in a table cell. If you want the table cell to contain HTML text and a background
color instead of an image file, you can change the slice type to No Image. If you want to convert Illustrator text to
HTML text, you can change the slice type to HTML Text.

Advertising