Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Slice Based Rollovers in Image Ready CS

Slice Based Rollovers in Image Ready 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.

Coco Cay, Bahamas

2. Next create a layer with everthing that will appear when the mouse rolls over the image.

CocoCay

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.

image 3

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.

Slice Based Rollovers in Image Ready CS Tutorial: Final Result



Author's URL: Depiction.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Slice Based Rollovers in Image Ready CS"

Only registered users can write comment

No comments yet...