Rollover button:

In this Tutorial, I will show you the basic dynamic's of creating a simple 3 state Rollover Button. You will be learning some advanced techniques also, to help you get up and running in ImageReady quicker! We will be working completely inside ImageReady 3.0 so go ahead and open the program.

--------------------------------------------------------------------------------

1.) Let's begin by creating a new file. Go to File > New. Make it 150 X 150 pixels on white background. Hit OK. We'll need to have a few palettes available also so Go to Window > Show Rollover, then Window > Show Styles. Go ahead and select a color from the Swatches palette for the Foreground color, I decided on blue.

2.) Now let's select the Rounded Rectangular tool from the tool palette.

3.) Option 1: Click on the work area and drag the selection to form the shape of a square, and release button. As you can see, Image Ready automatically fills the selection with the foreground color ! (However you will have to manually center image with this technique.)

Option 2: Select and adjust settings in the options bar as shown below. (This method offers precise image mapping and quick placement of image). Click on the work area, the image is drawn to exact size and drag to center position.

4.) We will now duplicate the frame until there are three. In the rollover palette, click the New Frame button 2 times. (You will notice now that there are 3 frames each with a different heading, Normal, Over and Down.) These are the different states the button will use to create movement.

5.) To create the individual effects, We will use the Styles palette. Select the Normal frame and in the Styles palette, Click on "Floating Plastic" style. (Names are displayed on mouseover). The style is applied.

This effect has the qualities we are looking for, however the effects are a bit strong so we shall make a few adjustments here primarily with the drop shadow. Go to Layer > Layer Styles > Drop Shadow. ( The drop shadow palette will appear.) In the palette, change the Opacity setting to 50% and the Distance setting to 10. Click on the work area somewhere to activate change. There now much better!

6.) Now let's finish the effects to the other two frames. Select the Over frame and Click on "Button Up" style. Select the Down frame and Click on "Red Outer Glow " style.
The Rollover palette should now look like this:

The Rollover Button is now ready to preview in the browser. Click on the Browser Preview button in the Tool palette to view.

The Browser displays the new button in working status along with the Javascript and HTML source code! This is where ImageReady really displays it's strength! (Note: only a portion of the browser window is displayed here for viewing purposes).

To view a similar website with roll-over button effect please visit this site

A careful eye will also notice it even gives you the specific's of the new button file such as Format, Dimensions, Size, number of images used and settings!

7.) Now Save this file. Go to File > Save As... (name it Rollover_button and save as a .psd)

*Alternately You may Save your new button by going to Save > Save Optimized As... and choose one of 3 choices below. These formats finish the work to be posted on the web.
Images Only (*.gif)
HTML and Images (*.html)
HTML Only (*.html)

Partners Flash Templates Free Web Templates FREE professional web templates Website templates Free Web Templates Graphic Design Tutorial Guide Flash Templates Flash Templates and Web Templates