Creating Rollovers

Rollovers are image areas that change when you interact with them in a web browser. Most commonly, rollovers are used with text buttons; the image changes when you roll your mouse over it, for example. Rollovers are managed by rollover states. Each rollover state enables a different behavior that is triggered by a person interacting with the web page in a web browser. The possible rollover states include normal, over, down, selected, out, up, click, custom, and none.

In this tutorial, you will create sepia-toned versions of the thumbnail images on new layers. Then, you'll assign different rollover states to the slices using both the new layers and layer style effects. Use both the Layers palette and the Web Content palette together to create rollovers. Let's create the sepia-tone effect first.

1. Using the Slice Select tool, click slice 03 (see Figure 9.19 in the previous section). The Site Plan layer is automatically selected in the Layers palette. Duplicate this layer by pressing Ctrl+J. A new layer is created called Site Plan copy, with the same information as the source layer.

2. Press Shift+Ctrl+U to desaturate the Site Plan copy layer. The site plan appears in grayscale in the document window while all the other slices appear as they were before. Slices are really independent images shown within the same document window.

3. Use the Colorize feature of the Hue/Saturation adjustment to impart a sepia-tone color cast to the desaturated layer: Choose Image > Adjustments > Hue/Saturation to open the Hue/Saturation dialog box. Adjustment layers are not present in ImageReady. Check Colorize, drag the Hue slider to 35, and drag the Saturation slider to 25 (see Figure 9.20). Click OK, making the current layer a sepia-toned version of the Site Plan layer.

Figure 9.20

ImageReady's Hue/ Saturation dialog box

4. Now make the rollover: Select the Web Content palette, and notice that the current slice is already selected. (The Slice Select tool did this automatically.) Click the Create Rollover State button at the bottom of the Web Content palette (see Figure 9.21). The over state is created and indented under the selected slice in the Web Content palette.

Figure 9.21

Creating a rollover state in the Web Content palette

Create rollover state

5. Toggle the visibility of layers while in the over rollover state: click the Layers palette and toggle off the visibility of the Site Plan copy layer. Now the original color version of the Site Plan layer is visible in the document window. When the mouse is over the image, a color version is displayed in the browser.

6. Repeat the process to make additional rollover states: Repeat steps 1 through 5 for each layer-based slice (slices 13, 15, and 17 in Figure 9.19).

Add sepia-toned over rollover states to the user slices that are images (kitchen plan and elevation thumbnails). First, add an over rollover state for the kitchen plan.

7. Select slice 6. Notice how the Slice Select tool does not automatically select a layer for user slices. Manually select the Kitchen Plan layer in the Layers palette.

8. Press Ctrl+J and Shift+Ctrl+U to duplicate the Kitchen Plan layer and desaturate it.

9. Press Ctrl+U to open the Hue/Saturation dialog box. Check Colorize and type 35 and 25 for Hue and Saturation, respectively. Click OK.

10. Select Slices_06 in the Web Content palette. Click the Create Rollover State button at the bottom of the Web Content palette. Toggle the Kitchen Plan copy layer off in the Layers palette.

11. Now add an over rollover state for the Elevation thumbnail: Repeat steps 7 through 10 for slice 8 and the Elevation layer.

So far you have made over rollover states for each thumbnail image by toggling the appropriate sepia-toned layers while the over state was selected in the Web Content palette. You can make changes by applying layer style effects for a specific rollover state. Apply a stroke effect next.

12. Select slice 03. Click the Create Rollover State button at the bottom of the Web Content palette; a new state appears called Down. The Down state appears in the web browser when the mouse button is held down.

13. Toggle off the Site Plan copy layer in the Layers palette. Select the Site Plan layer and apply a Stroke layer style effect. Click the Color swatch and select bright red from the Color Picker. Close the Color Picker, change Size to 3 pixels (see Figure 9.22), and click OK.

Figure 9.22

The Layer Style dialog box in ImageReady

The Layer Style dialog box looks slightly different in ImageReady; there are square icons in the check boxes, for example. Even though there are slight cosmetic differences, the functionality of the Layer Style dialog box is much the same as in Photoshop.

The layer style you applied in the previous step affects only the currently selected rollover state.

14. Click the over rollover state in the Web Content palette. Notice how the Stroke effect disappears from the Site layer in the Layers palette. It is like having a whole new Layers palette for each rollover state.

15. Select the Slice palette. Type Large_Site_Plan.html in the URL text box. You can optionally add anchor tags to the HTML markup by entering data in the URL field for the slice.

NOTE Hyperlinking is something that is normally done in web design software such as Adobe GoLive or Macromedia Dreamweaver, but you can add basic links to a web page in ImageReady if desired.

16. Optionally, create another web page called Large_Site_P1an.html featuring an enlarged and optimized image of the site plan project (see Chapter 5). This web page was referenced by slice 03 in the previous step.

17. Save your work as S1ices2.psd in ImageReady. If you're going to continue working through the following section, you can leave this file open for now.

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment