Last month's Workshop (APC November, page 172) demonstrated how to create a tabbed interface in Photoshop. This month the focus is on how to use Photoshop's Web-enabling sibling ImageReady to slice, animate, optimise and export that interface for the Web.

And remember, all PSDs and associated style libraries (ASL) in this workshop, as well as the modified HTML file and optimised Web imagery, are on this month's cover CD.

Slice it up

Begin by opening your PSD from last month's Workshop into ImageReady -- or load the PSD on this month's cover CD. The first step to Web-enabling the tabbed interface is to create slices. In order for this interface to "animate" when triggered by an event, such as clicking on it with the mouse button (called an on-click event), it must divided into individual pieces called slices. For example, clicking on a tab should give the illusion that the tab becomes raised and is brought to the foreground. Therefore, each tab will need to become an individual slice. The remainder of the interface will also be saved out as slices, but may not necessarily animated or trigger an event.

Using guides is a quick and simple way to automate most of the slicing process. Before you begin, here are a couple of guide tips that might help:

• Create guides by dragging them out of the Rulers
• Move an existing guide using the Move tool
• Remove a guide by dragging it back onto the document rulers
• Alt-drag guides to flip their orientation -- horizontal to vertical and vice-versa
• Shift-drag guides to have them snap to the ruler increments

Finally, if you have a large region of empty space where no buttons exist, on the right side of your canvas, add one more vertical guide adjacent to the right side of your last tab. Each tab should now be enclosed on all four sides by guides. Any other guides beyond those mentioned above should be deleted.

From the menus, choose Slices, Create Slices from Guides. Undoubtedly, this command will produce far more slices than required; however, it is much quicker, and simpler, to begin like this and then "clean up the mess". To reduce the number of slices, you'll need to combine all adjacent non-tab slices that share similar characteristics (number of colours, transparency, etc.) -- since each slice may only have one optimisation setting.

Choose View, Show, Guides to temporarily hide the guides. Begin by combining the two slices that make up the logo area in the top left. Using the Slice Select tool, select the top left corner slice and then Shift-click on the slice below it (the Shift key is used to select multiple slices). Right-click either of the selected slices and choose Combine Slices (or choose Slices, Combine Slices from the menus).

In the Slice palette, replace the default slice name with "logo" (or some other more meaningful name). Also, you may wish to enter the relative address of your home page into the URL field (e.g. index.html). This is a common practice that provides your visitors with a quick and intuitive way to return to your "main" page. Next, select all of the slices above the tabs, combine them and name the combined slice something like "top" or "header".

Finally, combine the slices in the white content area. However, because this slice will eventually contain text, it's not necessary to name it. Instead, just change the Type to No Image. That looks a lot tidier. Now it's time for the fun stuff -- creating the click states.

Ensure that both the Rollovers palette and the Slice palette are visible. Select the slice that contains the Home tab and change its name to "home" -- either via the Name field in the Slice palette, or by double-clicking on the slice's default name in the Rollovers palette. If you wish, you may also use the URL field (and Target field, if your site uses frames) in the Slice palette to specify the page to be displayed when the tab is clicked (e.g. home.html).

Makin' it click

Click the Create rollover state button at the bottom of the Rollovers palette. By default, this will create an Over State, but since you want a Click State, right-click on the state/slice (in the Rollovers palette) and choose Click from the context menu.

Now you need to define what the click state of this slice will look like. Expand the "HOME" layer set in the Layers palette and select the "Home" type layer. Turn off, or delete, the Drop Shadow effect. Use the Add layer style button at the bottom of the Layers palette to add a Color Overlay effect. Change the colour of the overlay to black (R0,G0,B0) [#000000] using the Layer Options palette. You'll need this style again for the other tab labels, so add it to the Styles palette by clicking the Create new style button at the bottom of the palette: enter "Tab Label -- Over" for the name.

Next, select the "home tab" layer. Turn off, or delete, the Bevel and Emboss effect, and then add a Color Overlay using white R255,G255,B255 [#FFFFFF]. Again, add the style to the Styles palette, this time with the name "Tab -- Over".

Ensure that both the "Home" type and "home tab" layers are linked together and then use the Move tool to move the layer up by five pixels. To hide the black line at the base of the tab, turn on the "home cover" layer in the "COVERS" set.

Finally, you must adjust the optimisation settings for the slice to ensure that it will look good and download quickly when viewed in a Web browser. In the document window, select the 2-Up view and display the Optimize palette. Use the Zoom tool to magnify the image to about 400%; this will allow you to compare the results of your optimisation settings in the lower/right pane with the Original image in the upper/left pane (labelled Original).

Select the "home" slice in the lower/right pane and then establish the following settings in the Optimize palette: Format: GIF, Lossy: 0, Color Reduction Algorithm: Adaptive, Colors: 64, Dither: None, Transparency: off/unchecked. Feel free to adjust these suggested settings to suit your bandwidth/preference.

To preview the click state within ImageReady, press the Preview Document button; press the Preview in Default Browser button to preview the results in an external browser. Repeat the above procedure for each tab. To recap so you are clear:

• Select the slice using the Slice Select tool
• Name the slice (and specify the URL and Target frame if you wish)
• Add a new state and change its type to Click
• Apply the "Tab Label -- Over" style to the tab label
• Apply the "Tab -- Over" style to the associated tab layer
• Assuming the type and tab layers are linked together, move them up five pixels using the Move tool
• Establish the desired optimisation settings for the slice

Web ready

To save the PSD, choose File, Save. To export the Web-ready interface -- images and HTML/JavaScript -- choose File, Save Optimized As.

Don't forget to locate the exported HTML file and open it in your preferred browser. Notice how the tabs immediately revert to their default state when you move your mouse off them? That's because of some extra (unavoidable) code that ImageReady insists on including. To correct this behaviour, open the HTML file in an editor and repeat this procedure for each image's anchor tag (<a></a>):

• delete the entire line containing the onclick="..." statement
• change the onmouseover="..." statement to onclick="..."
• remove "return true;" from the end of the new onclick="..." statement
• add a closing delimiter (>) to the end of the new onclick="..." statement
• add "-click" to name of the GIF that corresponds to the anchor tag being edited. For example, the first anchor tag corresponds to the home image/tab, so you would change images/home.gif to images/home-click.gif in the new onclick="..." statement