beautypg.com

Resize artwork while optimizing, Generate css layers for web graphics – Adobe Illustrator CS3 User Manual

Page 391

background image

ILLUSTRATOR CS3

User Guide

385

6

Select a Start With option:

Current Settings

Uses the current file format.

Auto Select GIF/JPEG

Automatically selects the optimal format depending on image content.

7

Select a Use option to specify whether you want to apply the specified file size to current slice only, to each slice

in the image, or to all slices. Click

OK.

Resize artwork while optimizing

In the Save For Web & Devices dialog box, you can resize an image to specified pixel dimensions or to a percentage
of the original size.

1

Click the Image Size tab in the Save For Web & Devices dialog box.

2

Enter new pixel dimensions or specify a percentage by which to resize the image.

3

Set any of the additional options, and click Apply:

Constrain Proportions

Maintains the current proportions of pixel width to pixel height.

Quality

(Photoshop only) Specifies the interpolation method. Bicubic Sharper generally produces better results

when you are reducing image size.

Anti-Alias

(Illustrator only) Removes jagged edges in the artwork by applying anti-aliasing.

Clip To Artboard

(Illustrator only) Clips the artwork size to match the document’s Artboard boundary. Any artwork

outside the Artboard boundary will be deleted.

Note: None of the features in the Image Size palette are available for the SWF and SVG file formats except Clip To
Artboard.

Generate CSS layers for web graphics

You can use layers in your Illustrator artwork to generate CSS layers in the resulting HTML file. A CSS layer is an
element that has an absolute position and can overlap with other elements in a web page. Exporting CSS layers is
useful when you plan to create dynamic effects in your web page.

The Layers palette in the Save For Web & Devices dialog box gives you control over which top-level layers in your
artwork are exported as CSS layers, and whether exported layers are visible or hidden.

1

Click the Layers tab in the Save For Web & Devices dialog box.

2

Select Export As CSS Layers.

3

Select a layer from the Layer pop-up menu, and set the following options as desired:

Visible

Creates a visible CSS layer in the resulting HTML file.

Hidden

Creates a hidden CSS layer in the resulting HTML file.

CSS layers are the same as GoLive layers. Using Adobe GoLive, you can animate a CSS layer and use built-in
JavaScript actions to create interactive effects.

See also

“Save For Web & Devices overview” on page 381

“Optimize an image for the web” on page 383