لطفا منتظر باشید ...
Creating a Rollover by Using Slices
When creating a rollover by using a slice, you use the Web Content palette to create the rollover states and the Layers palette to hide and display the layers associated with the rollover states. This example uses only the Over state. When the example is complete, a mouse passing over the slice triggers the Over state, changing the way the sliced area looks.The following steps show how to create a rollover by using slices:
In ImageReady, open the image that you want to use for the rollover.Take a look at the Web Content palette shown in Figure 59-4. At the top of the palette, a thumbnail of the image is labeled Normal. ImageReady uses the Normal state to display the entire image without any slices or rollover states. Along the bottom of the palette are five buttons (from left to right): Create Layer-Based Rollover, Group Slices into Tabs, New Slice Set, Create Rollover State, and Delete.
Figure 59-4: When you first open an image, a thumbnail of the image appears in the Web Content palette.
To make the rollover, you create a slice to let ImageReady know which area to assign to a rollover state.
Select the Slice tool from the Toolbox.
Create a slice around the area that you want to use to make the rollover.As shown in Figure 59-5, a slice is created around the top of the glass. Notice that a thumbnail of the slice appears in the Web Content palette.
Figure 59-5: When you create a slice, a thumbnail of the slice appears in the Web Content palette.
Choose Select>Create Selection from Slice.A selection marquee appears around the slice boundary.
Choose Layer>New>Layer via Copy or press Ctrl+J/z +J.A copy of the selected area is pasted into a new layer. The new layer appears in the Layers palette above the original layer.
Rename the copied layer.You can name the layer anything you want, but I’m using Cup in this example. You modify this layer to make the image look different when the mouse passes over the rollover.
Choose Layer>Duplicate Layer or Press Ctrl+J/z +J.A duplicate of the new layer created in Step 5 appears in the Layer palette, as shown in Figure 59-6.
Figure 59-6: The duplicated layer appears at the top of the stack in the Layers palette.
Rename the duplicate layer that you created in Step 7.You can name the layer anything you want, but for this example I’m using the name Rollover.Before performing the next step, make sure that the Rollover layer is selected in the Layers palette and the slice that you created in Step 3 is selected in the Web Content palette.
Click the Create Rollover State button at the bottom of the Web Content palette.When you click the button, the rollover state labeled Over appears in the Web Content palette below the original slice, as shown in Figure 59-7.
Figure 59-7: The Over rollover state appears with a thumbnail below the slice in the Web Content palette.
Over is the default rollover state. If you want to change to a different rollover state, double-click the word Over and select a state from the Rollover State Options dialog box. For this example, I use the Over state.
In the Layers palette, click the eye icon next to the Rollover layer to hide it.
Select the Cup layer.This is the layer that you need to modify to make the image look different when the mouse passes over the sliced area.
Use a filter, layer effect, or other feature to modify the appearance of the selected Cup layer.In this example, the Watercolor filter is applied to the Cup layer.Notice that when you alter the Cup layer, the layer thumbnail in the Layers palette changes to reflect the modification, and the thumbnail next to the Over state in the Web Content palette changes also.
Congratulations! You just created a rollover. To preview the rollover in ImageReady, click the Preview Document button in the Toolbox. To preview the rollover in a browser, click the Preview in Browser button in the Toolbox. Figure 59-8 shows the rollover in a browser window.
Figure 59-8: The image before the mouse passes over the slice (top) and after (bottom).
