In this tutorial I will show you how to make a rollover button in image ready. However, we are going to make the graphics in photoshop.

Start off in photoshop, use the rounded rectangle tool to make a button size rectangle. I used a radius of 20px.

Create a new layer, and Ctrl Click your rounded rectangle layer to give you a selection. Fill your selection with a linear gradient of a color of your choice, make sure the darker of the two is towards the bottom.

Duplicate your layer, and delete your initial rectangle layer. On the first of the two duplicate layers we are going to add a drop shadow. Go to Layer > Layer Styles > Drop Shadow and use the settings below.

Next we are going to add a Bevel/Emboss filter to both of the layers. On each layer, choose Layer > Filter > Bevel and Emboss, and use the following settings.

You should have two layers now, one with a drop shadow, and one without. Take your top layer, the one with the drop shadow, and move it slightly upwards and to the left, as shown below. This represents the movement downward in our rollover, as the shadow disappears the button will appear to drop downwards.

Now lets jump to ImageReady, choose File > edit in ImageReady.

Open your web content window by choosing Window > Web Content. Towards the bottom of the window, click the 'Create Layer-based Rollover" icon.

You will see two new icons of your button appear, one represents the rollover status, the other represents the initial status of your button. Click on the icon entitles "over"

On your layer window, hide the layer of the button that has the drop shadow Your image should look like this.

In your web content window, click on the icon above the "over" layer, and hide the layer without the drop shadow, and show the one with the drop shadow

Choose File > Save Optimized and your done!