Creating a Remote Rollover


By default, rollovers affect only the rollover slice itself. But rollover slices can remotely control other slices, so that moving or clicking the mouse in one part of the screen causes changes in another part of the screen.

Follow these instructions to create a rollover that alters the appearance of two slices:

  1. In the Web Content palette, select the Over rollover state layer you just created and drag it to the trash icon at the bottom of the palette to delete it.

  2. Still in the Web Content palette, right-click the slice that contains the logo image, the slice you just deleted the rollover state from, and choose Group Slices Into Table from the pop-up menu, as shown in Figure H9.16.

    click to expand
    Figure H9.16: Group Slices Into Table

  3. Select the new subslice you just created, right-click it, and choose Divide Slice from the pop-up menu to bring up the Divide Slice dialog box. Divide the slice horizontally into 2 slices, as shown in Figure H9.17.

    click to expand
    Figure H9.17: Divide Slice dialog box

  4. In the Layers palette, select the Ballet Bleu text layer and drag it to the Create A New Layer button at the bottom of the palette.

  5. With the new Type layer still targeted , choose the Type tool and choose 36 px from the font size drop-down list in the options bar ”about 1 /4 the size of the original text.

  6. Click on the new type with the Type tool and change the text to read Enter .

  7. Choose the Move tool and drag the new type to the bottom of the canvas, below the logo, as shown in Figure H9.18. Make sure the top of the text is below the lowest point in the logo.

    click to expand
    Figure H9.18: Position the Enter text beneath the logo.

  8. Choose the Slice Select tool. Drag the boundary between the two subslices down, until it is between the bottom of the logo and the top of the word Enter . The word Enter and the logo should be on two different slices, as shown in Figure H9.19.

    click to expand
    Figure H9.19: Divide the subslices between the logo and the text.

  9. In the image window, use the Slice Select tool to click the top subslice, the one containing the logo. In the Layers palette, be sure that the Logo Black layer is displayed and that both the Logo Blue layer and the newly created Enter layer are concealed.

  10. Click the Create Rollover State button at the bottom of the palette. Target the newly created Over rollover state layer. In the Layers palette, conceal the Logo Black layer, and reveal the Logo Blue layer and the Enter layer (by clicking the visibility icons).

  11. By default, rollovers affect only the rollover slice itself. To make the Logo slice control the visibility of the Enter slice as well, you ll use the Pickwhip button . In the Web Content palette, click and drag the Pickwhip button to the left of the Over rollover state, and drag the end of the line onto the Enter slice in the menu, as shown in Figure H9.20. This tells ImageReady that this rollover state will remotely control the state of the second subslice. Notice that a target icon appears next to the Enter slice. You can select and deselect remote control by clicking this icon on and off.

    click to expand
    Figure H9.20: Selecting a slice to be remotely controlled by the rollover




Photoshop CS Savvy
Photoshop CS Savvy
ISBN: 078214280X
EAN: 2147483647
Year: 2004
Pages: 355

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net