Tutorials > Photoshop > Slice Based Rollovers in Image Ready CS
If the images on this page do not appear, please click here.
Learn how to make slice based rollovers in ImageReady CS.
1. I have already covered how to create rollovers in ImageReady 7, however creating rollovers in ImageReady CS is a bit different. To begin, start by opening up any image that you would like to apply a rollover state to. I'm using a photograph I took while on vacation this past summer in the Bahamas.
2. Next create a layer with everthing that will appear when the mouse rolls over the image.
3. Open the Web Content window by going to Window > Web Content. Next turn off the layer that contains everything that will appear in the rollover state by clicking on the small eye next to the layer in the layers palette. Then activate the layer that contains the original image by clicking on it. In order to create the rollover state, click on the Create Layer Based Rollover button. (The button is on the far left side at the bottom of the Web Content window.)
4. The rollover state has been created, however the layer with everything that should appear on the rollover state isn't active. First select the Over state slice in the Web Content window. Then in the layers palette, turn on the over state layer by clicking on the box where the eye normally appears.
5. If you want to have the rollover state be a link to another page, select the rollover state image under Slices in the Web Content window. Then in the Slices window (Window > Slices) fill out the link information for the over state.
6. The only thing left to do is to save the image by going to File > Save Optimized As. In the save as type drop-down menu, select HTML and Images. This will save both image states and provide the coding needed to make the rollover happen. Here is my finished product.
Get some unique photo manipulation ideas in these 80 photography resources.
Affiliates
Resources
