Main Page

Photoshop Tutorials

Tutorial 12: Creating Rollovers in ImageReady

What you'll start with: What you'll end up with:
Video Game Gallery!

This tutorial will teach you how to create button rollovers in ImageReady.  The PSD file I used for this tutorial as well as the final exported files can be downloaded here.

1. Load ImageReady and open any existing PSD document or create a new one with at least two layers in it.  The example here has two image layers and one text layer all initially visible.

2. What we want to do is display a default image when the mouse is not on the button, and change it to another image with the text 'Enter!' showing when the mouse is over it.  Click on the Rollovers tab and you will be shown the default image of your button.  Now click the Create rollover state icon at the bottom of the Rollovers box.  You will get two new boxes, one for each button state.

3. Click the second box, which is your button's normal state.  We don't want to show the text so we click on the 'eye' to the left of the text layer.  We also want to reduce the opacity of the image in Layer 2, so we select the layer and then decrease its opacity to 40% and press Enter.

4. Now click on the bottom-most layer in the Rollovers box titled Over State and change back the opacity of Layer 2 to 100% and make the text layer visible again.

click here for larger view

5. Switch to the Slice tab in the box at the bottom-left of the screen.  If it is not visible, go to Window, Slice to display it.  Change your button's name to something more appropriate such as mybutton1.  Set the URL and target you want for it too.

6. Finally, click on File, Save Optimized As... and ImageReady will export both the HTML and images for you.  Make any further changes you require to the HTML or alternatively copy it to your own document.