Imageready - Create A Basic Rollover, Beginner Options

[Adrian]

Imageready - Create a rollover
In this tutorial I will teach you how to make the following button. This effect can be applied to most things. Also, on the over state, it doesnt just have to be a Layer-Style change, you could change something about the image aswell.
You will be creating this: link

1. Create a new image in ImageReady (not photoshop) and make it 200x50 pixels with a white background.

2. Using the rounded rectangle tool make a rounded rectangle in the middle of the document and make it black. (Note: At this point ImageReady crashed so from now on the rounded rectangle will look a bit different because I had to re-draw the rectangle after I took the screenshot!)

3. Select your shape layer. Click the little f in the bottom of the layers pallette and choose bevel emboss and leave it on the default settings. Now choose color overlay from the same menu and leave it on red.

4. Now go to the rollovers pallette (Window->Rollovers). Click the create rollover state button (it looks like the create new layer button except it is in the rollovers pallette!).

5. Make sure that the Over-State is selected in the rollovers pallette. Then go into the layers pallette and select the color overlay button and change the colour overlay to a different colour. (You might have to go to Window->Layer Options/Style.)

6.Go to File-> Preview In-> Your Browser and put your mouse over the button, it will turn blue! To save, go to File-> Save Optimized as and it will save 2 images and a html file. In the html file is the code for the rollover.

Thats it, your done! This is a very basic example, I am sure you could make much more professional looking buttons!