For PSP V56Home   >   Tutorials   >   Basics   >
Mouseover Graphics
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.

We will start by making a basic button. Create a new image, 200 x 200 pixels, background white, 16 M colors.
Set foreground to a medium blue and background to white.
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.
PSP 5: Click on the Shapes tool on the tool bar (looks like a square outline). If the Control Palette is not visible, press "O" to show it. Set as follows:
Shape = Ellipse
Style = Outlined
Outline Width = 3
Antialias = checked

PSP 6: 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
Style = Stroked
Line width = 3
Antialias = checked
Create as vector = unchecked

Click somewhere in the center of 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
Tolerance = 1
Feather = 0
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:
PSP 5:
Fill Style = Sunburst Gradient
Match Mode = None
Tolerance = 1
Opacity = 100
Sample merged = unchecked

Click on Options:
Fill Style = Sunburst Gradient
Blend Mode = Normal
Vertical = 50
Horizontal = 50

PSP 6:
Fill style = Sunburst Gradient
Blend mode = Normal
Paper texture = None
Match mode = None
Tolerance = n/a
Opacity = 100
Sample merged = unchecked

Click on tab 2:
Gradient = Foreground-Backgrd
Repeats = 0
Horizontal = 50
Vertical = 50

Right-click in center of oval to fill with blue gradient pattern. Note: Pattern should be light in the center to dark on the edges. If you left-click you will get the opposite ... dark to light (which is ok if you prefer this look).

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:
Hue = 25
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 Image || Effects || Drop Shadow. Set as follows:
Color = black
Opacity = 100
Blur = 7
Vertical = 7
Horizontal = 7

Switch to the other image. Once again, go to Image || Effects || Drop Shadow. Change the following to:
Blur = 3
Vertical = 3
Horizontal = 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.