Web Graphics

Illustrator is a great tool for designing web graphics. Be it an entire site design, a navigation design, or a single graphic, the object-based properties of Illustrator graphics make it easy to create, design, and edit them. Additionally, because the graphics in Illustrator are resolution independent, if you ever need to use the graphics for print purposes, you won't need to re-create them at a higher resolution (something you might need to do if you use Photoshop).

Pixel Preview

When you're designing for print, rarely are you ever concerned about pixels themselves. This is because image setters print at very high resolutions, such as 2400dpi or 3600dpi, and edges are always razor sharp. Even when you're printing to lower-resolution devices, such as a 600dpi laser printer, the dots themselves are barely noticeable.

Web graphics are different, though, because images are rendered at the resolution of a computer monitor, which, in most cases, is 72 pixels per inch. To make graphics look prettier and smoother onscreen, a computer uses a method called antialiasing to slightly blur the edges of color. The result is an image that looks clean and smooth instead of hard-edged and jagged (see Figure 7.203).

Figure 7.203. The image on the left is antialiased.

When you save or convert your graphic in a raster format, you can specify that Illustrator should apply antialiasing. However, when you're viewing your graphic in Illustrator on the artboard, you also want to see what your graphic will look like with antialiasing applied. For that reason, Illustrator has a special preview mode called Pixel Preview, which you can find under the View menu. In Pixel Preview mode, your graphics display on your artboard as they would when viewed in a web browser. You can work and edit graphics in Pixel Preview mode, and you should do so when designing graphics for the Web.

Now, I know you're probably thinking, "Why should I care what my image looks like when it's antialiased?" The answer is that although antialiasing is generally a good thing, sometimes it can work against you. The side effect of blurring edges of color is that it sometimes makes your graphics illegible. This is especially true when your design contains small text or thin lines (see Figure 7.204). Using Pixel Preview will help you see these issues before you export these graphics.

Figure 7.204. Choosing Pixel Preview from the View menu.

Disabling Antialiasing on a Per-Object Basis

If you want to disable antialiasing for a single object, you can use the Rasterize live effect to do so. Make your selection and choose Effect, Rasterize. Choose 72ppi for the Resolution setting, choose None for the Antialiasing setting, and click OK (see Figure 7.205). With Pixel Preview turned on, you can clearly see the difference.

Figure 7.205. Choosing None for Antialiasing in the Rasterize dialog box.

Object-Based Slicing

In Chapter 6, "Using Adobe ImageReady CS2," you learned about image slicing for web graphics. Illustrator has a Slice tool and a Slice Select tool for creating and selecting web slices, as Photoshop and ImageReady do, although it's a bit different in Illustrator.

When you draw a slice with the Slice tool, Illustrator is really drawing a rectangle with no fill and no stroke, and making it a slice. When you want to edit the slice, you can use the Slice Select tool to change the boundaries of the slice.

However, Illustrator also has a different kind of slice. Instead of creating graphics and drawing slices over them, you can apply a slice as an attribute to a selectionsomething that Illustrator calls an object-based slice. To apply this kind of slice, make a selection and then choose Object, Slice, Make. Using this method, if you make an edit to your graphic, the slice updates automatically along with it.

By the Way

If you want to hide all the little squares and numbers that indicate slices on your screen, you can do so by choosing View, Hide Slices.

After a slice is applied, you can choose Object, Slice, Slice Options to specify settings such as URL and ALT text. When you specify text as an object-based slice, you can also set the slice to be an HTML slice (rather than an image slice). In that case, Illustrator exports the text as editable HTML text instead of a graphic.

By the Way

HTML text slices might not format exactly as you see them in Illustrator. Although bold or character attributes are preserved, exact fonts and sizing depend on the browser used. Other text features, such as kerning and baseline shift, are ignored.

Save for Web

In Chapter 5, "Using Adobe Photoshop CS2," we discussed a feature called Save for Web that enables you to preview and export graphics for use on the Web. Illustrator's Save for Web feature is nearly identical. As in Photoshop, Illustrator's Save for Web feature is powered by Adobe ImageReady.

You can use Illustrator's Save for Web feature to preview up to four optimized settings at once to help you choose the perfect web image, and you can find it by choosing File, Save for Web. You can also set different optimizations for your web slices and export graphics in GIF, JPEG, PNG, and WBMP formats.

Illustrator's Save for Web feature does have two additional capabilities you won't find in Photoshop, however: the capability to save in web vector formats and support for CSS layers.

Vector Formats Support

Illustrator is a vector graphics application, so it only makes sense that Illustrator would support the vector graphics formats that are supported on the Web. Although the most popular graphics formats for Web use are raster based (GIF, JPEG, PNG), two formats have become the standard on the Web for displaying vector-based graphics (see Figure 7.206): the Macromedia Flash format (SWF) and the Scalable Vector Graphics format (SVG).

Figure 7.206. Choosing a vector web format from the file format pop-up in the Save for Web dialog box.

Macromedia Flash (SWF)

The Flash format has taken the Web by storm and has become the standard for creating interactive contentand even full websitesfor the Web. The benefits of Flash are that you can animate content, add interactivity, add sound, and even script it with logic. To view SWF files in your web browser, you need to have a plug-in installed (a free download from Macromedia's website). Just about every web browser these days already comes with the Flash plug-in preinstalled.

By the Way

Before it became Flash, the technology was known as FutureSplash. Macromedia acquired the technology and defined the format as SWF, which stands for Shockwave Flash.

For animation, the Flash format uses a frame-based model. Much like movies are made, each step of the animation is a separate frame. As each frame plays back, it gives the appearance of motion. For Illustrator specifically, you can use top-level layers as frames of an animation. The Save for Web dialog box gives you two options when saving a file in SWF format (see Figure 7.207): AI File to SWF File, which saves your art as one static SWF file, and Layers to SWF Frames, in which your layers are converted to frames at export time and your SWF plays as an animation in a web browser or any Flash-capable browser.

Figure 7.207. Choosing to save a static SWF file or an animated one.

You can also choose a frame rate (higher numbers make your animation play back faster, lower numbers make your animation play back slower). Setting your animation to loop makes it replay over and over again in your browser. Otherwise, it plays once and then stops.

If you have repeating objects in your design, you should define and use symbols because the Flash format supports the use of symbols to save file size. Remember that you can blend between symbols in Illustrator as well. Illustrations that are drawn using the Symbolism tools are also exported to SWF as symbols. In fact, if you save your file in the SWF file format and then open that file in Macromedia Flash (the Macromedia application), any symbols in your file become editable symbols in Flash as well.

Flash doesn't support slicing, but you can use the Attributes palette in Illustrator to apply image maps to objects, and those URLs will export correctly to SWF.

Scalable Vector Graphics (SVG)

The SVG format isn't as widely used as the Flash format, but it has specific features that make it a better choice for certain kinds of graphics. Many people look at SVG and SWF as being competing formats, mainly because Macromedia has always been pushing SWF and Adobe has been pushing SVG. In truth, the formats are built for different purposes. As you read on about what SVG is and what it supports, you'll get a clearer understanding of the roles of each of these formats.

SVG is an open standard file format based on XML and JavaScript. It supports animation, interactivity, and scripting. There's no direct support for sound inside SVG, but you can use the SMIL standard to add sound to SVG graphics.

Because SVG is based on XML, which is also an open standard, SVG files are really just text files, meaning that they can be edited or changed very easily at any time. That opens SVG to a high level of customization functionality, including interaction with a database. For this reason, back-end developers and programmers lean toward SVG because it empowers them to use quality graphics but control and customize those graphics very easily. Many of the new cellphones that are available on the market today use SVG to display their graphics onscreen. SVG files that are created for display on cellphones usually conform to the SVG-Tiny standard. Other wireless devices, such as PDAs, utilize the SVG-Basic standard. Illustrator supports the export of both these formats.

Did you Know?

In contrast, the Flash format is a binary file, and it can't be opened or edited other than in the Macromedia Flash application itself.

Animation in SVG is timeline based. That means you specify an object to travel a set distance over a set amount of time (most video-based applications such as Adobe's Premiere and After Effects and Apple's Final Cut Pro use this method). Illustrator itself does not have a timeline, and there's no way to specify SVG animation from within Illustrator. Most people who use Illustrator to create SVG graphics hand-code animation into their files manually after they've exported the file from Illustrator as an SVG file, or they use a third-party application.

SVG does support image slicing, as well as image maps that you can define using the Attributes palette. Any URLs you specify for an object inside Illustrator will export correctly in an SVG file.

Finally, Illustrator also provides variable support inside SVG files. We mentioned earlier that SVG is an open text-based file, allowing SVG to update graphics on the fly. Illustrator's Variables palette (see Figure 7.208) enables you to define XML-based variables for text, linked images, and graphs, and to control visibility.

Figure 7.208. The Variables palette in Illustrator.

CSS Layer Support

Increasingly, web designers and developers are seeing the benefits of using CSS layers in their web designs. CSS (Cascading Style Sheets) is a way to define how objects lay out on a web page. CSS enables designers to position graphics precisely, as well as overlap graphics. Developers also like CSS because of how efficient it can be when they're creating large sites with many pages; it's easy to make global changes using Cascading Style Sheets.

In Illustrator, you can export graphics from the Save for Web dialog box with CSS layers by clicking on the Layers tab and specifying which top-level layers you want to export (see Figure 7.209). You can also choose to export a layer as visible or hidden.

Figure 7.209. Choosing to export CSS layers from the Save for Web dialog box.