Graphics Zone - MouseOvers

XRATED BUCKS

CE CASH 3.0

Creating MouseOvers in ImageReady

by BarryHilton, Adult NetSurprise

In this tutorial we'll be creating MouseOvers in ImageReady, complete with all the javascript and html to put them straight into your own web page! We'll be using a psd file for the buttons which you can download here.

First open ImageReady and open up the mouse.psd file, you should have an image like our example below... it has two layers, one for the 'normal' state and one for the 'mouseover' state.

Next, click on the Slice tool on the main tool bar, it looks like a knife! This will create one slice over all your image, labeled 01, with a yellow border like our example below. Creating a slice allows us to make our MouseOver effect.

Add a new state to the Rollover menu by clicking the small button at the bottom, a white square with a triangle cut out of the bottom left corner.

Now, look at the MouseOver menu (Window > Show MouseOver), you'll now have two states for your image. Both are identical at the moment, showing the same image in the Normal and Over states.

We need to change the Normal state to our starting MouseOff image, to do this click on the Normal image on the Rollover menu and it will change having a black border to show its selected. Then go to the layers menu (window >show layers), select the mouse on layer by clicking on its layer name, then click the 'eye' graphic to make the layer invisible like in our example below.

Now, your Rollover menu will display the mouse off layer in the Normal state, like in our example below:

Next, we are going to save the images and make our Rollover effect... first, go to the Optimize menu (window > show optimize) and enter the values below. We need to do this before we save the image as Photoshop saves all the images in one go.

Then, go to the File drop down menu and select Save Optimized As. Make sure the 'Save as Typ'e says HTML and Images (*.html) and the drop down menu at the bottom says All Slices... then click OK! You'll now have a web page containing all the images and your mouse over effect like our example... click here to see the MouseOver page in operation!