How to Make a Rollover in Photoshop CS5 From Slices

A rollover is an effect used on an image in a Web page to transform the image when a mouse rolls or hovers over it. This is often used to make buttons or menus change color, but can be used on any image. Using Photoshop, you can cut any image into slices, then change a slice so that only that portion of the image changes in the rollover, such as making words appear on the bottom, or changing the color of just one item in the image. Once the slices are created you will need to place the appropriate JavaScript code into the Web page to create the rollover effect, using a Web design software or HTML editor.

Instructions

1. • 1
     Launch Photoshop and select “Open” from the File menu. Navigate to an image you want to use for the rollover and click “Open.” Click the “Slice Tool” in the Toolbox. If you can’t see it, click and hold the “Crop Tool” or “Slice Select Tool” to reveal it.
   • 2
     Decide where you want the rollover effect to appear. Note that the Slice Tool only creates rectangular slices and that additional slices will be created from the remaining picture. For example, if you select the top half of an image as the rollover slice, the other half of the image will also be a slice. If you cut a square in the center of the image, four other slices are created, one above your slice, one below and one on each side.
   • 3
     Drag the Slice Tool over the area you want for the rollover. The image is cut into slices, with a number in the top left corner.
   • 4
     Click and hold the “Slice Tool” in the Toolbox, then click the “Slice Select Tool.” Double-click the Slice you made in Step 3 to open the Slice Options window. Type “Rollover” in the name field and click “OK.” Double-click each of the other slices to give them appropriate names, like “Top,” “Left,” "Center," "Right" and “Bottom.”
   • 5
     Press “F7” to reveal the Layers Panel. Drag the “Background Layer” in the Layers Panel onto the “New Layer” button at the bottom the panel. Make any changes you want to the image to change the “Rollover” slice. You can write text over the slice, draw a shape, or insert another image. You can add effects or image adjustments that change the entire image. Changes to any other slices will not be saved.
   • 6
     Click “Save For Web & Devices” under the File menu. Save the image in your preferred format -- mostly likely JPEG or GIF -- and click “Save.” Each of the slices is saved with the name you gave them as a separate image in a folder named “Image.”
   • 7
     Drag the “Background Copy” layer in the Layers Panel onto the “Trash” button at the bottom of the panel, as well as any other layers you may have created adding effects or text, so that you have only the original “Background” layer remaining.
   • 8
     Double-click the “Rollover” slice with the Slice Selection Tool and change the name to “Original.” Click “OK.”
   • 9
     Click “Save or Web & Devices” from the File menu. Use the same file format and the same destination folder as you did in Step 6. Click “Save.” A dialog box opens warning you that the other slices will be replaced . These are the versions you want to save, so click “OK.”
   • 10
     Use any Web design software to put the images together on a Web site. You now have all of the slices with the “Original” slice to reassemble the original image and the “Rollover” slice to use in the rollover effect on the Web page.