For PSP V7Home   >   Tutorials   >   Basics   >
Mouseover Graphics
Download this tutorialDownload (197kb)
E-mail this tutorial to a friendEmail to Friend

Mouseover Graphics
Created by: ZooAtHome

We've all seen the nifty mouseover effect where the appearance of a button changes when you roll over it with the mouse pointer. This effect is achieved by having two different, complimentary graphics available ... one for the mouseover and the other for the mouseout (when the mouse moves away from the button).

The simplest method is to create two identical buttons ... but in different colors, as illustrated above. Just run your mouse over the image.

We will start by making a basic button. Create a new image, 200 x 200 pixels, background white, 16 M colors.
If the layer palette is not visible, press "L" to show it. Create a new layer by holding down the Shift key and clicking on the New Layer button.
Click on the Preset Shapes tool on the tool bar. If the Tool Options palette is not visible, press "O" to show it. Set as follows:
Shape type = Ellipse
Retain style = unchecked
Antialias = checked
Create as vector = unchecked
Line width = 3
Line style = Default line
Set your foreground style to Solid Color (click on the little arrow in the Foreground Style box and choose the icon on the left) and your background style to None (click on the little arrow in the Background Style box and choose the icon on the right). Click into the Foreground Style box and set your foreground color to a medium blue. Set both your textures to None.
Click somewhere in the center of the upper left quarter your image and drag the cursor to form an oval about an inch wide and 3/4 inch tall.


Click on the Magic Wand tool ... set as follows:
Match Mode = RGB Value
Feather = 0
Tolerance = 1
Sample Merged = unchecked

Click in the center of your oval to select it.

Go to Selections || Modify || Expand. Set value to 1 and click OK.
Click on the Flood Fill tool ... set as follows:
Blend mode = Normal
Match mode = None
Tolerance = n/a
Opacity = 100
Sample merged = unchecked
Set your background color to white.
Set your foreground style to Gradient (click on the little arrow in the Foreground Style box and choose the second icon from the left). Then click into the Foreground Style box, set as follows:
Gradient = Foreground-Background
Invert gradient = checked
Horizontal = 50
Vertical = 50
Repeats = 0
Style = Sunburst Gradient (3rd from top)
Left-click in center of oval to fill with blue gradient pattern.

Go to Selections || Select None or press Ctrl+D to deselect area.

Go to Window || Duplicate. You should now have two identical images. (Note: If you plan to add text to your button you should do it before duplication so that the text will also be identical in both images.)

Pick one of the images and go to Colors || Adjust || Hue/Saturation/Lightness. Set as follows:
Edit = Master
Colorize = unchecked
Hue = 95
Saturation = 0
Lightness = 0

Now your buttons are different colors, but still identical in every other aspect. You can use one image for the regular (mouseout) button and the other for the mouseover effect.


If you want to get fancy, you can add drop shadows. By varying these shadows, you can make one button appear depressed when compared to the other.

Choose the button you want as your "normal" button. I picked the blue one.

Go to Effects || 3D Effects || Drop Shadow. Set as follows:
Vertical = 7
Horizontal = 7
Opacity = 100
Blur = 7
Color = black

Switch to the other image. Once again, go to Effects || 3D Effects || Drop Shadow. Change the following to:
Vertical = 3
Horizontal = 3
Blur = 3

There, one image now appears to be raised while the other appears depressed (no, it isn't sad ... *G*).

Now you probably want to crop the image to get rid of all that white space. However, you need to make sure you crop them exactly the same to keep the buttons lined up properly. To do this we will set the coordinates exactly.

Double-click on the Crop tool and enter coordinates which will accomodate your button. (Hint: start with the one with the larger shadow ... it's bigger. Use the coordinates in the status bar at the bottom of the window to get an idea of your button size.) I entered the following:
Left = 25
Right = 175
Top = 55
Bottom = 145

Check "Custom size and position". Click OK.

These coordinates position the crop box so it just surrounds my button. Since your button is probably not the exact same proportions as mine, these may not work for you. Use trial and error, if necessary, to find the best coordinates for your image.

When you have positioned the crop box to your satifaction, click on the Crop Image button in the Control palette.



Switch to the other image. Double-click on the Crop tool again. Do not change any of the settings. You want both images cropped to the exact same specifications.

Click the Crop Image button in the Control palette. Your second image will probably not appear centered. This is because we used a smaller drop shadow on it. Do not move the button. If you do, the images won't match up when you use them.

Merge layers and save the images. I usually use names like oval_over and oval_out so I can easily identify a pair for later use.

There you go ... your buttons are ready to plug into the mouseover script. You can find a copy of this here.