Slicing and Dicing Your Graphics

If you’re an avid Web surfer, you’ve probably encountered a site or two where the graphics appear on-screen in separate chunks. In the Web world, these chunks are referred to as slices. Slices are useful for a number of reasons. They can provide a better experience for viewers by allowing them to immediately see portions of the image while it loads rather than having to wait for an entire large image to load. Another benefit is that slicing the image into sections that appear in multiple places on your site makes it load more quickly on the next place after the image loads in one place. Also, each slice can be optimized separately, which increases loading speed. Depending on your image, revising a slice or two can be quicker than revising an entire image. Finally, you can selectively assign features, such as rollovers, links, and animation to slices. Have I convinced you yet of the merits of slices? Good. In the next section, I show you how slices work in Illustrator.

Creating slices

In Illustrator, slices can be applied to objects (vector- or pixel-based or text), groups of objects, or layers. And when any of these are edited, the slices are automatically updated. Read through the following steps for how to create slices. You do need to first create a piece of artwork, however. I recommend using at least one block of text, one group of objects, and one pixel-based image. For this example, I used a mock Web page.

Choose View→Show Slices.

Now you can see your slices while you create them.
With the Selection tool, select an object on your Artboard.

In this example, I selected the logo. This kind of slice is referred to as an object- based slice.
Choose Object→Slice→Make, and then deselect the object by clicking the Artboard away from the object.

After you release the mouse, lines and numbers appear. The red lines and numbers indicate a user-defined slice — one that you made. The pink lines and numbers indicate that Illustrator automatically created the slices. Figure 16-8 shows the sliced artwork.

Figure 16-8: It slices, it dices, it darned near makes julienne fries.
Select your group, choose Object→Slice→Make, and then deselect the group by clicking the Artboard away from the object.

The group is now assigned a user-defined slice. If you edit any of your objects — scaling the logo, for example — the slices update automatically, as shown in Figure 16-9.

Figure 16-9: Editing an object makes the slices update automatically.
Select the text block and choose Object→Slice→Make.

Keep the slice selected.
Choose Object→Slice→Slice Options.

The Slice Options dialog box appears.
In the Slice Options dialog box, select the HTML Text option from the Slice Type drop-down menu.

The HTML options appear.
Select your alignment option and click OK.

Now it’s time to optimize the slices. Optimizing is the process of assigning quality and compression settings to your images.
Choose File→Save for Web.

For more on the Save for Web dialog box and all its settings, see the section, “Creating Web-Specific Pixel Graphics,” earlier in this chapter.
In the Save for Web dialog box, select any pixel-based slices with the Slice Select tool (the second tool from the top) and select the JPEG option from the file formats drop-down menu.
Choose your compression settings from the compression drop-down menu.

I chose high compression because I think quality is important. For the skinny on compression, see the earlier section, “Choosing a file format.”
Select your slices that contain vector-based graphics and then assign a GIF file format to each.

Choose your desired palette and other options. You can also assign PNG, SWF, or SVG formats, if so desired.
After you optimize all your slices, click Save to generate an HTML table with your slices. Leave the format as HTML and Images.
Click Save.

If you don’t want to save a file, click the Done button to return to your Artboard.

Your file is sliced and diced and ready to be incorporated into your Web site.

Here are a few more things you may want to know about slicing:

You can manually slice your image by using the Slice tool. Just grab the tool from the Toolbox and drag around the portion of your artwork that you want the slice to contain. Slice boundaries can be adjusted by using the Selection tool. Manual slices do not update automatically like object-based slices do.
You can apply slices to layers. These are referred to as layer-based slices. Target a layer in the Layers palette (for more on layers, see Chapter 13), and choose Object→Slice→Make. The size of the slice is determined by the layer’s bounding box.
To eliminate a slice, select it and choose Object→Slice→Release.
To delete all slices, choose Object→Slice→Delete All.
To show or hide your slice outlines, choose View→Show/Hide Slices.
You can combine several slices into a single larger one. Select them all and choose Object→Slice→Combine Slices. You can also divide slices into a user-specified number of slices or pixels by choosing Object→ Slice→Divide Slices.
To create slices based on a selection of object(s), choose Object→ Slice→Create from Selection.

Cascading Style Sheet layers

Layer-based slices can also be exported as Cascading Style Sheet (CSS) layers. Using CSS layers enables you to assign (set) a multitude of properties to the elements on your Web page (typefaces, colors, spacing, graphics). They also enable you to create transparent overlapping slices. Use CSS layers to show and hide certain layers on your Web page. For example, you can produce a Web site with text in three languages on three separate layers and then make the layer matching the language of the browser visible while the others remain hidden.

The realm of CSS is fairly advanced, but for my purposes here I show you the very basic steps of how to create a file with CSS layers:

After your file is created, choose File→Save for Web.

The Save for Web dialog box appears.
Click the Layers tab at the bottom right.
Select the Export as CSS Layers check box.

Select each layer in your file from the Layer drop-down menu. Make sure that you select one of the options: Visible, Hidden, or Do Not Export.
Click Save.

An HTML file, which includes CSS layers, is created.
In the Save Optimized As dialog box that appears, specify a name and location for your file.
Click the Output Settings button.
In the Output Settings dialog box that appears, make sure that the HTML option is selected from the second menu from the top.
Select the Generate CSS option from the Slice Output section.
Click OK and then Save.

Your file has been created and saved. Click the Done button to close the Save for Web dialog box.

Remember?

All platforms and browsers (and their versions) do not equally support Cascading Style Sheets, its versions, and its many facets. The differences are too great to list here, but you can see them all at the Browser Compatibility Chart on the WebReview.com site (www.webreview.com/browsers/browsers.shtml).