Slicing and Dicing Images

Many years ago, web designers discovered that large images could be made to download faster or just appear to download faster if the images were divided into separate areas (called slices) and assembled in the web browser using HTML tables. Slicing images also meant that certain areas of an image could have different optimization settings than other parts of the image. Slicing also let webmasters modify smaller sections of an image, rather than the entire image.

Photoshop, Illustrator, and ImageReady can slice images and generate the HTML code that reassembles them on a web page later. GoLive does not let you create or modify the position or size of slice. However, GoLive can read the slices created in the other programs and create the tables to hold them.

Should You Use the Save For Web in Photoshop or Illustrator?

With the genius of Smart Objects (covered in "Working with GoLive Smart Objects" in Chapter 9, "Smart Objects and Intelligent Layouts."), why would you want to use Save For Web in Photoshop or Illustrator? You don't need to, especially if you're going to stay within the Creative Suite applications and use GoLive as your web-page-layout program. You simply insert the native Photoshop or Illustrator files into your GoLive layouts and use Save For Web in GoLive.

But what if you use Dreamweaver to create web pages? Although Dreamweaver is now part of Adobe, you can't place native Photoshop or Illustrator files into Dreamweaver web layouts yet.

That's when you should output your sliced images from Photoshop or Illustrator. You can then easily insert the HTML code for the table into your Dreamweaver page. You won't get the automatic updating available for Smart Objects, however. If you need that sort of flexibility, you might consider working with Fireworks and Dreamweaver. With Fireworks (also now available from Adobe) you can modify your original graphics file and have it automatically update in Dreamweaver.

Creating Slices

There are several different ways to create slices. You can create slices manually or you can create slices automatically from the boundaries of a layer or object. You can also create slices from guides. Each technique has its own advantages and drawbacks.

User Slices

The most obvious way to create slices is to use the Slice tool found in the Tools palette of Photoshop, Illustrator, and ImageReady (Figure 17-3). The process is simple: you drag with the Slice tool to create the rectangle that defines the area of the slice. This manual method creates what's known as a user slice. User slices can be resized or moved any way that you want. That makes them useful for targeting specific areas of an image that are not defined as an object or layer.

Figure 17-3. The Slice tools and Slice Select tools in Photoshop (left), Illustrator (center), and ImageReady (right).

In Illustrator you can also create user slices by selecting an object and choosing Object > Slice > Make From Selection. This creates a slice that is the same size as the selected objects.

Layer-based and Object-based Slices

The smarter way to create slices is to create layer-based slices. These are slices that automatically expand or contract to enclose the image on a layer. In Photoshop or ImageReady, select the layer that you want to convert into a slice, and then choose Layer > New Layer Based Slice. This creates a slice that is exactly the size of the pixels on that layer. Even better, the layer-based slice automatically adjusts its size if you change the size of the artwork in the layer.

You can create a similar type of slice in Illustrator, but it's not called a layer-based slice. Select the object or group that you want to turn into a slice, and choose Object > Slice > Make. The slice will be tied to the underlying object and will resize accordingly. We call these object-based slices.

Unlike the layer-based slices in Photoshop, which are always connected to the size of the layer, these Illustrator slices will adjust to the size of the original object but can also be manually resized. Simply resize the artwork, and the slice adjusts accordingly.

If you manually resize the object-based slice, it immediately loses its connection to the size of the object below. From that point onward, the slice and the object no longer resize together.

Converting Layer-Based slices to User Slices

There are times when you may want to convert a layer-based slice in Photoshop or ImageReady into a user slice. For instance, you may want to expand the slice so that it neatly fills up an area in the artwork.

To do so in ImageReady, simply go to the Slices menu and choose Promote To User Slice. Since Photoshop has no Slices menu, you need to select the slice and then Control/right-click and choose Promote To User Slice from the context menu. (We don't feel user slices are a promotion from layer-based slices, but that's what Adobe calls it.) Once a slice has been promoted from layer-based to user slice, it can be moved or resized at will.

As mentioned in the previous section, Illustrator slices don't need to be promoted. They can simply be selected and resized at any time.

Auto Slices

Slices are reassembled in web pages using HTMLbased tables. However, tables can only contain rectangular cells in a grid-like structure. If you create a user or layer-based slice in the middle of an image, it needs to have supporting slices to fill the rest of the table and display the image correctly. These other, supporting slices are called auto slices (see Figure 17-4).

Figure 17-4. The two layer-based slices in the image generate the additional auto slices.

Photoshop, ImageReady, and Illustrator create auto slices as necessary when you create slices. The auto slices are indicated by lighter colors for their numbers.

Slices from Guides

You can create slices from guides that have been applied to a document. In Photoshop or ImageReady, first create the guides that you want to use as slices, and then choose the Slice tool in the Tools palette. Click the Slices From Guides button in the Options bar. This creates user slices from the areas defined by the guides. It also deletes any slices that were previously applied to the image.

To do the same in Illustrator, create the guides, and then choose Object > Slice > Create From Guides. As in Photoshop, this creates user slices that delete any previously created slices.

Dividing an Existing Slice

The Divide Slices command (see Figure 17-5) allows you to divide a slice area into a specific number of slices or to create the slices based on specific pixel sizes. In Photoshop, first choose the Slice tool or the Slice Select tool. Then Control/right-click to access the Divide Slices command. In ImageReady you can choose Slice > Divide Slices when any tool is selected.

Figure 17-5. Create a grid of horizontal and vertical slices using the Divide Slice dialog box.

The Divide Slices command works slightly differently in Illustrator than it does in Photoshop or ImageReady. In Photoshop or ImageReady, you can apply the Divide Slices command when you first create or open the document. This is because the entire image is automatically contained in a defined slice when you start a new document.

However, in Illustrator, a new document doesn't have a slice in it until you define one, so you'll have to define and select a slice before you can use the Divide Slices dialog box (Object > Slice > Divide Slices).

Working with and Viewing Slices

Working with slices is similar to working with any other object or layer. You can select, move, delete, and copy slices. However, there are a few special techniques you need to know.

Selecting and Moving Slices

Choose the Slice Select tool to select, move, and resize slices. To select multiple slices anywhere in the layout, Shift-click while you select them. Use the Option/Alt key to create a copy of a slice as you drag it.

The Save For Web dialog box has its own Slice Select tool. This tool allows you to select slices to apply specific optimization settings to them. However, you can't move or resize the slices in the Photoshop or Illustrator Save For Web dialog box. If you need to resize or otherwise modify a slice, you need to quit this dialog box and then make your changes in the document window.

This is why ImageReady is the preferred application for working with slices. With ImageReady, you can move and select slices in the document window as well as set the slice options.

Viewing Slices

There are several ways to view slices, depending on the program and context in which you are viewing them. Here are the locations in which you can view them:

• Illustrator document window. Choose View > Hide Slices or View > Show Slices to hide or reveal the slices on the page.

• Photoshop document window. This is a two-step process. First choose View > Show and make sure that the Slices command is chosen in the Show submenu. Then choose View > Extras. This command shows and hides whatever items have been selected in the Extras submenu.

• Save For Web dialog box (Photoshop, Illustrator, and GoLive). Click the Toggle Slices Visibility button in the dialog box. This button uses the letter Q as a keyboard shortcut.

• ImageReady document window. Use the same View > Extras command that is in Photoshop, and you can choose Slices and Auto Slices from the Show submenu. You can also click the Toggle Slices Visibility button in the Tools palette (the same button as in the Save For Web dialog box, and the same Q keyboard shortcut to show and hide slices). You can also use the Hide Auto Slices button in the Options bar.

Assembling Slices

Once you have sliced an image into pieces, someone or something is going to have to put it back together. The language for assembling sliced images into a complete picture is called an HTML table. While there are those who can write their own code to reassemble sliced images, rest assured you don't have to learn any code to create the tables for sliced images. Photoshop, Illustrator, and ImageReady do it all for you.

Setting Individual Slice Options

Once you've sliced an image, each individual slice can be set to specific properties. These slice options let you turn slices into image maps that contain links to other web pages or email addresses (see Figure 17-6).

Figure 17-6. The Slice Options dialog box in Photoshop (left) and Illustrator (center), and the Slice palette in ImageReady (right).

You access the slice options in Photoshop by selecting the slice or slices and then choosing Edit Slice Options from the context menu. You can also double-click with either of the slice tools over a slice area to open the Slice Options dialog box. In Illustrator you select the slice or slices and then choose Object > Slice > Slice Options. You access the slice options in ImageReady by selecting the slice or slices and then opening the Slice palette (Window > Slice).

You can set the following slice options:

• Type allows you to choose between the two types of slices. Image slices display the image underneath the slice. No Image slices allow you to enter your own custom text in the slice cell. This text is displayed on the web page as ordinary HTML text, not text that is contained in an image.

• Name is the name for the image generated by the slices. The default setup for the name is the name of the document followed by the number for the slice.

• URL allows you to add a link to another web page or email address. The area in the slice then becomes a hotspot to send the viewer to the new page or open the default mail program to send a message.

• Target specifies in what type of frame the link in the URL field will open (if you are using a frames-based web site). Blank opens the link a new frame or window. Self opens the link in the same frame or window. Parent opens the link in the parent frame-set of the link. Top replaces all the frames in the current browser window and opens the link in that window.

• Message Text, Message, or Status Bar Message is the text that appears in the status area in the browser. The default text for this field is the URL link.

• Alt Tag or Alt is the text that is displayed in place of the image when images have been turned off, or in non-graphical browsers. This alt tag is essential for creating web pages that meet the accessibility requirements for the blind because it can be read aloud by screen readers.

• Dimensions allow you to numerically set the position and size of the cell. The Dimensions controls are in the Slice Options dialog box in Photoshop and the Slice palette in ImageReady. In Illustrator, you can use the Control palette to set the dimensions of slices.

• Slice Background Type and Background Color or Background set the color for the transparent regions in Image slices or the background area for No Image slices.

Outputting the Slices and Table

This is the final step in creating a sliced image outputting the images and the HTML code necessary to reassemble the slices in a table. If you're in Photoshop or Illustrator, you can do this simply by choosing File > Save For Web. You then click the Save button to open the Save Optimized As dialog box (Figure 17-7).

Figure 17-7. Save Optimized As dialog box and related menus.

In ImageReady, the regular document window is the equivalent of the Save For Web dialog box. You choose File > Save Optimized or File > Save Optimized As to get to the Save Optimized As dialog box.

The options for the slice files are defined in the Save Optimized As dialog box:

• Format allows you to choose what types of files will be created. Most of the time you'll choose HTML And Images. This creates the optimized files as well as the HTML code that assembles the files into a table. Images Only creates just the optimized files. Sandee uses this option when she wants to output just images for use in screen shots or illustrations of web page designs. HTML Only outputs just the code necessary to reassemble the images. This option is helpful if you have created No Image slices that you want to use as a table in a web page.

• Settings allows you to choose the options for creating the HTML code for your table. If you want to modify these settings, choose Other. This opens the Output Settings dialog box. If you are working in ImageReady, you have more controls in the Output Settings dialog box than you do if you access it through Photoshop or Illustrator. See the next section, "Choosing the Output Settings," for more information on these options.

• Slices allows you to control which slices should be created. All Slices creates all the slices that were generated in the document. All User Slices creates all user and layer-based slices but omits the auto slices. Selected Slices creates only those slices that were selected when the Save Optimized As dialog box was opened.

Choosing Output Settings

While image designers are interested mainly in the appearance and size of web graphics, web site designers need to manage the naming conventions, comments, and other advanced attributes of those images. You can control these output settings by choosing Other in the Settings menu in the Save Optimized As dialog box. This opens the Output Settings dialog box. If you have opened this dialog box through Image Ready, you will see seven sections (shown in Figure 17-8). If you have opened the dialog box through Photoshop or Illustrator, you will see only four sections.

• HTML lets you choose the type of HTML formatting and what to include with the file. You can also set the output to XHTML, which is a more stringent form of HTML. XHTML makes your table more compliant with the W3C web standards. (The W3C stands for the World Wide Web Consortium, an organization that establishes the standards for web pages and graphics.)

• Saving HTML Files (ImageReady only) controls the naming conventions when you output rollovers from a file.

• Slices lets you control the type of table that is created. You can also switch from an ordinary HTML table to CSS (cascading style sheets) to position the elements without using a table. (See the sidebar "Behind the Scenes: CSS Layers vs. Slice Tables" for a comparison of using the two features.)

• Image Maps (ImageReady only) sets which type of server will be used to handle the links in image maps.

• Background lets you add a background image to the HTML file. This background image resides under the images in the table.

• Saving Files allows you to control the naming conventions of the sliced files as well as their location.

• Metadata (ImageReady only) lets you choose the added information that is saved with the files. Deselect these options if you are concerned about file size.

Figure 17-8. All seven sections of the Output Settings dialog box in ImageReady.

Tip: Save Your Output Settings

Use the Save button to save the settings for all seven sections of the Output Settings dialog box. This adds the settings as a preset at the top of the dialog box.

Assembling Smart Object Slices in GoLive

Smart Objects in GoLive allow you to add native Photoshop and Illustrator files into GoLive web layouts and then use the Save For Web dialog box to optimize them. The real beauty of these Smart Objects is not just that they can be inserted into GoLive, but that any slices that were created in Photoshop, Illustrator, or ImageReady are recognized in GoLive's Save For Web dialog box. (For more information on working with Smart Objects in GoLive, see "Smart Objects in GoLive" in Chapter 9, "Smart Objects and Intelligent Layouts.")