Macromedia Illustrator - 10.0 Reviewer’s Guide

Mac OS 9.1 and 9.2/Mac OS X/Windows® 98/Windows 2000/Windows ME/Windows XP

®

Reviewer’s Guide

version

10Adobe® Illustrator

The industry-standard
vector graphics
software

Adobe Illustrator 10 software delivers powerful, integrated tools for creating and optimizing Web graphics,
creative options such as live distortion that expand your visual horizons, and productivity enhancements
designed to streamline workflows. Seeing these features in action is the best way to experience their benefits.
That’s why we’ve put together this hands-on look at Adobe Illustrator 10—to explain how key features work
and give you a chance to try them yourself. You’ll quickly get a feel for the new features in Illustrator 10 that
help Web designers and Web developers work together to create compelling Web content more efficiently,
and that assist cross-media design professionals to produce creative work.

This reviewer’s guide is divided into three sections:

• Produce Superb Graphics for the Web (page 1)

• Experience Extraordinary Creative Freedom (page 11)

• Utilize Powerful Production Tools (page 21)

All of the features described apply to both Macintosh and Windows versions of Adobe Illustrator software.

Before You Begin

Please do the following before you get started with this reviewer’s guide:

• Install your Adobe Illustrator 10 software. Use the installer on the press kit CD to perform a Typical Install.

This ensures that Illustrator is configured for this review. Please note that the user interface may not exactly
match what’s pictured here.

• Make sure that Adobe Illustrator is using its default preferences. If you’ve already installed and worked with

the program, you should restore the default preference settings. Please do the following:
—On Mac OS 9 systems, remove the Adobe Illustrator 10 folder from the Preferences folder in your System folder.
—On Mac OS X systems, remove the Adobe Illustrator 10 folder from Users>Username>Library>Preferences.
—On Windows systems, search for and remove the AIPrefs file, as well as any AdobeFnt.lst files.

• Copy the reviewer’s guide files from the press kit CD to your hard disk. Some of the exercises in this guide

direct you to work in a new file, while others use the illustration files we’ve provided. You can locate the files
for this guide in the Ai10RevGd_HandsOn folder in the Reviewer Documents folder on your press kit CD.

• Launch the program, and then follow the directions for each exercise.

Contents

Produce Superb Web Graphics 1
Experience Extraordinary
Creative Freedom 11
Utilize Powerful Production Tools 21
Additional Enhancements 27

®

Produce Superb Web Graphics

Illustrator 10 delivers completely integrated tools for laying out Web pages and creating superb vector- or
raster-based Web graphics. Symbols, new slicing options, support for dynamic data-driven graphics, and
enhanced support for the Macromedia Flash (SWF) and SVG file formats make it easier than ever to produce
graphics for the Web and other emerging media, such as wireless devices.

Symbols

Illustrator 10 provides robust support for symbols, as well as innovative new symbolism tools that open up
new creative horizons. (For more information about symbolism tools, please see page 15.) Symbols can in­clude drawn objects, text, images, or any combination of the three. When you use symbols in a drawing, each
instance references the original symbol, which helps to keep file sizes small. Symbols are also easy to update:
when you redefine a symbol, all instances are automatically updated. You can save symbols in libraries so
they’re easy to use in different drawings and to share with others in your workgroup.

Symbols in Flash (SWF) files

When you export Illustrator artwork
as a Flash (SWF) file, any symbols
you’ve used are automatically
included in the Flash symbol library,
streamlining your Web workflow
while helping to keep file sizes small.

2

Try creating symbols:

1. Create a new drawing, then draw a shape using any of the drawing tools. Here, we’ve drawn a star using
the Star tool and applied the Black Red Dashes default style to it.

2. If the Symbols palette is not visible, choose Window > Show Symbols.

3. With the shape selected, choose New Symbol from the palette menu. Or, click the New Symbol button at
the bottom of the palette. The shape is added to the palette as a symbol.

4. Drop several instances of the symbol on the drawing by dragging and dropping the symbol onto the
drawing. Or, use the Place Instance Of Symbol button on the bottom of the palette.

5. Switch to the Direct Selection tool, then click to select a symbol instance. Note that the symbol’s bound­ing box is selected, rather than the outline of the shape you drew. Because symbol instances are linked to
the original symbol, they can’t be edited the way other graphic objects can.

6. Manipulate the symbol instances using symbolism tools. Tear off the symbolism tools palette by clicking
on the Symbol Sprayer tool and dragging to the right. Select a symbol with the Direct Selection tool, then
click on the symbol with the Symbol Screener tool to make the symbol more transparent. Select a differ­ent symbol, then use the Symbol Stainer to tint the symbol with the current fill color. Use either the Sym­bol Spinner and Symbol Sizer or Rotate and Scale tools to rotate and resize symbol instances.

7. With a symbol instance selected, click the Break Link To Symbol button on the bottom of the palette.
This creates a fully editable artwork element.

8. Modify the artwork element by applying or changing its color, shape, or some other aspect of its appear­ance. Select the modified artwork, click the original symbol on the palette, and then choose Redefine
Symbol from the palette menu. The symbol icon on the palette updates, as do all of the other symbol
instances in your drawing. Note that the transformations you applied to the symbol instances—the
screening, tinting, resizing, and rotating—are maintained even when the symbol is redefined.

Redefined symbols

9. Close the file when you’re done.

3

Creating layer-based slices

You can also create a slice that
contains all of the objects on a layer.
To do this, target a layer on the
Layers palette by clicking the circle
to the right of the layer name, then
choose Object > Slice > Make. The
layer’s bounding box determines the
slice dimensions; if you add or
subtract objects from the layer, the
slice’s size changes accordingly.

Slicing

The new slicing tools in Illustrator 10 make it possible to turn your Web designs into quick-loading Web
pages without requiring you to switch from tool to tool. Object-based slices update automatically as your
design evolves, and allow you to control format and compression options so they’re optimized for speedy
Web performance; you can also use manual slicing tools like those in Adobe Photoshop software and Adobe
ImageReady software. As you’d expect, slices defined in Illustrator can be edited using familiar tools in either
Adobe Photoshop or Adobe ImageReady; slices created in Illustrator are also recognized in Adobe GoLive.

Try creating slices:

1. Open the Web page.ai file, choose File > Save As to save a copy of the file to a new name, and then spend a
moment getting familiar with the different elements the file contains.

2. Make sure that the Slices option on the View menu reads Hide Slices, so that the slices you create will be
visible. You can toggle between showing and hiding slices as you work.

3. Create an object-based slice. With the Selection tool, select the image of the blurry car above the graph.
Choose Object > Slice > Make, then click on an empty part of the page to deselect the object. Note that
lines appear on top of the Web page to indicate where the design will be sliced. Solid red slice lines indi­cate a user-defined slice, whereas the lighter lines indicate the slices that will be automatically generated.

4. Create an object-based slice for a group. With the Selection tool, click on the graph in the middle of the
page; the group the graph is part of is selected. Choose Object > Slice > Make, then choose Select > Dese­lect. With the Selection tool, select the group, then use the Scale tool to make the group smaller. Notice
how the other slices update to accommodate the new size of the object-based slice.

5. See how slices update. With the Direct Selection tool, rearrange the graph, image, and text elements to
create a different look for the layout. Notice how the slices have been rearranged.

4

6. Create a slice that contains a text block, so you can save the text in the slice as plain HTML text. Select the
text block, then choose Object > Slice > Make. Use the Slice Select tool to select the slice, then choose
Object > Slice > Slice Options. In the Slice Options dialog box, select HTML Text as the Slice Type, select
other options to control how the text slice appears, and then click OK. You can also specify slice options in
the Save For Web window by double-clicking a slice.

Adobe-standard slicing tools

The manual slice tools in Illustrator
10 are the same as those in
Photoshop and ImageReady, which
helps reduce the learning curve and
speed production. Plus, slices you
create in Illustrator are preserved
and can be edited in Photoshop,
ImageReady, and GoLive.

5

7. Create a manual slice. Select the Slice tool on the toolbox, then draw a slice that includes some of the
navigation elements at the top of the page. Unlike object-based slices, manually drawn slices don’t update
if you rearrange the elements on a page.

8. Save the file using a new name. To continue with the next exercise, leave the file open.

Each of the slices you created includes a different type of content, so you want to use the file format that’s
best suited for each slice. With Illustrator 10, you can apply different format and compression options to each
slice to get results that are perfectly tailored to your content.

Try applying different format and compression options for each slice:

1. Using the file you created in the previous exercise, choose File > Save For Web. The Save For Web dialog
box provides comprehensive controls for turning your Illustrator designs into efficient Web pages.

2. Save the image slice in the JPEG format. Using the Slice Select tool, select the slice containing the image.
In the Settings area to the right of the preview, choose JPEG from the list of file types, then choose High
from the list of quality options.

Using CSS layers to export
interactivity

Photoshop 6.0 files often include
rollovers and animations. While
Illustrator 10 doesn’t provide direct
support for these features, you can
preserve interactivity when you
export Web pages using CSS layers.
When you import a linked
Photoshop file that contains interac­tive elements, simply place the file
on its own top-level layer; when you
export the file using CSS layers, the
resulting HTML page will include any
rollovers and animated elements
included in the Photoshop file.

3. Select the other slices and apply different settings to them. For example, save the slice containing the graph
using SVG options.

4. Click Done to save the settings and return to the Illustrator artboard.

Note: To create an HTML table with the slices shown here, click Save, then specify options. For more

information about options, refer to the Adobe Illustrator 10 User Guide.

Illustrator 10 also includes support for CSS layers, which allow you to create transparent overlapping slices or
to selectively control which layers are visible when your Web page is seen in a browser. CSS Layers build on
the top-level layers you use to create your Illustrator drawing. For example, the Web page you’ve been work­ing with could use layers to create localized versions for English-, Spanish-, and French-speaking audiences;
each language might use a layer for the body copy and the navigation icons at the bottom of the page. When
the finished page is viewed in a browser, a developer could specify which layers are visible based on the
browser’s default language.

Try creating a Web page with CSS layers:

1. Using the file you created in the previous exercise, choose File > Save For Web. Click the Layers tab on the
right side of the window.

2. Check Export Top Layers As CSS Layers. For each layer in your artwork, choose Export Visible, Export
Hidden, or Do Not Export.

3. Click Save to create an HTML file with CSS layers. Specify a file name and location, then click Output
Settings. In the Output Settings dialog box, select Generate CSS, and then click OK.

6

Collaborating with developers

Dynamic data-driven graphics help
designers to collaborate with
developers in automating workflows.
Designers can create visually sophis­ticated templates that include
variables, then hand them off to
developers who can then bind the
variables to fields in a database using
either scripts or image server
products.

For information about using scripts
to automate production tasks,
including those involving data­driven graphics, see page 21.

4. Click Cancel. To create an HTML table with CSS Layers, you would click Save. Click Cancel again to close
the Save For Web window.

5. Choose File > Close to close the file without saving changes.

Dynamic data-driven graphics for the Web

Today’s sophisticated Web sites use powerful databases to serve customized content to visitors, and that
content is increasingly visual. Illustrator 10 provides easy-to-use tools that you can use to create graphical
templates that include variables. When you hand the completed template off to a developer, they can link the
variables you included to fields in ODBC-compliant data sources; scripts or image server products can auto­matically replace the variable objects with unique data sets to create finished artwork without any additional
manual production. For example, you might design a graph that displays up-to-the-minute sales figures or
account allocation data. Or you could create a banner ad that advertises different television shows; each
instance of the ad would include a different image, show name, and teaser copy. In either case, the template
you design separates the visual format of the information from the actual data, eliminating the need for
manual production and making it possible to create new graphics on the fly as new data becomes available.

Try binding objects in a graphic template to variables:

1. Open the Web page.ai file, and then choose File > Save As to save a copy of the file to a new name.

2. If the Variables palette isn’t visible, choose Window > Variables.

3. Turn the graph into a variable. With the Selection tool, click to select the graph. The graph is part of a
group, so before you make it into a variable, you must ungroup it. Choose Object > Ungroup, click on an
empty area of the page to deselect the graph and box shapes, then click to select the graph. On the Vari­ables palette, click the Make Graph Dynamic button. Note that a new variable appears in the palette.

4. Turn the text that reads “ORANGE VERSION” into a variable. With the Direct Selection tool, select the
text. On the Variables palette, click the Make Text Dynamic button. Note that a new text variable is added
to the palette.

7

5. Create a sample data set. Typically, a developer might provide several typical examples of each type of
data the template needs to include; by creating sample data sets, you can preview how the finished art­work will appear. From the palette menu, choose Capture Data Set. Enter a name or the data set, then
click OK. Note that the data set is now visible in the Data Set field on the palette.

6. Create a second data set. With the text tool, select the ORANGE VERSION text, and then type different text
(for example, GREEN VERSION). Next, choose Capture Data Set from the Variables palette menu, enter a
name, and then click OK. Now there are two data sets to choose from.

7. Toggle between the data sets to preview the data-driven graphics. Choose the first data set you created
from the list, and note that the ORANGE VERSION text is displayed. When you choose the second data
set, the text you typed in step 6 becomes visible. To preview your template designs and envision the ap­pearance of the final graphics, you can create as many data sets as you like.

Using XML files

Illustrator’s support for dynamic
data-driven graphics is XML-based. If
a developer provides an XML file
that includes sample data, you can
use the Load Variable Library
command on the Variables palette to
open it and then add the variables to
your Illustrator template.

8

8. Export an XML file containing variables and view it in a browser. Choose Save Variables Library from the
Variables palette menu, enter a file name and location, and then click Save. You can view the XML file in
any text-processor or browser application.

9. Choose File > Close to close the file without saving changes.

Once you’ve created a template, you’ll typically hand it off to a developer, who will then use scripts or an
image server product such as Adobe AlterCast to link the template to an ODBC data source. For more infor­mation about using scripts in conjunction with dynamic data-driven graphics, see page 21.

Enhanced Macromedia Flash (SWF) export

With Illustrator 10, you can export Web-ready Flash animations directly from your artwork. Two new op­tions reduce steps in typical workflows: because you can now specify simple looping and generate the HTML
file that ensures a Flash animation displays at the correct size when you export the file from Illustrator, you
no longer need to use other programs to handle these steps. Plus, when you export Flash files that include
symbols and then open the files in the Flash application, the symbols are automatically included in the Flash
symbol library.

Try exporting a Web-ready Flash animation:

1. Open a new file, then draw two simple objects, such as a circle and a star. Note that if you create a drawing
using symbols, those symbols are used when you export a Flash (SWF) file.

2. Create a blend between the two objects. Choose Object > Blend > Blend Options, choose Specified Steps
for Spacing, and then click OK. Select the two objects, then choose Object > Blend > Make.

3. Release the blend steps to individual layers. If the Layers palette is not visible, choose Windows > Layers.
Expand Layer 1, select the <Blend> sublayer, then choose Release To Layers from the Layers
palette menu.

4. Export the Flash file. Choose File > Export, select Flash (SWF) from the Format menu, specify a file name
and a location, check the Append File Extension option, and then click Export. If you include symbols in
your artwork, they’re automatically included in the Flash file you export.

5. Specify Flash export options. Under Export As, choose AI Layers To SWF Frames, specify 8 as the Frame
Rate, select the Looping and Generate HTML options, and then click OK.

9

6. View the animation in a Web browser. Launch your Web browser, choose File > Open, and then select the
HTML file associated with the Flash animation you exported in step 5. Note that the animation appears at
its original size, and that the animation loops endlessly. If you open the Flash file directly in the browser, it
fills the browser window. Quit your browser when you’re done.

Note: Your browser may require an additional plug-in to view Flash (SWF) files.

7. Close the file you created.

Enhanced support for SVG workflows

As the SVG file format becomes more widely used, designers and developers alike are looking for ways to
integrate it into their Web workflows. Illustrator 10 builds on its previous support for the SVG format in
several ways. SVG is now a native file format, which means that Illustrator 10 can open and save SVG files. In
addition, you can choose to include a fully editable Illustrator file when you save SVG files, enabling develop­ers and designers to roundtrip files with ease.

Another innovation introduced in Illustrator 10 is support for live SVG effects. Using SVG effects, it’s easy to
add drop shadows, gaussian blurs, and other customizable effects to vector artwork. SVG effects aren’t
rasterized until the file is viewed in a browser, so they look great at any size. And when paired with dynamic
data-driven graphics, SVG effects make it possible to create sophisticated artwork automatically.