Home    >    Tutorials    >    Highlighted Graphics for Mouseovers
Download this tutorialDownload (??kb)
E-mail this tutorial to a friendEmail to Friend

Highlighted Graphics for Mouseovers
Created by: Zu

One of the methods used for mouseovers is highlighting. This can take many forms ... we are going to add a highlight "shadow" around the button for the mouseover effect illustrated above.
Create a new image: 200 x 200 pixels, background white, 16 million colors.
Set your foreground color to a medium blue and your background color to a medium purple.
First we have to create a basic button. Click on the Selection tool and set as follows:
Selection type = Circle
Feather = 0
Antialias = checked
Create a circular selection in the middle of your image, approximately 1 inch in diameter.

Click on the Flood Fill tool and set as follows:
PSP 5:
Fill Style = Linear Gradient
Match mode = None
Tolerance = 1
Opacity = 100
Sample Merged = unchecked
Click on "Options":
Fill Style = Linear Gradient
Blend Mode = Normal
Direction = 180 degrees
Click on OK.

PSP 6:
Fill style = Linear 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
Angle = 180 degrees

Click into the selection to fill it with the gradient.
Go to Selections || Modify || Contract. Enter a value of 10 and click on OK.

Right-click into the selection to fill it with an inverted gradient.

Go to Selections || Select None or press Ctrl+D to deselect the area. You now have a basic button.

Go to Window || Duplicate. You should now have two identical images. (Note: If you plan to add text to your button you should do so before duplicating so the text will be identical also.)
Click on the Magic Wand tool and set as follows:
Match Mode = RGB Value
Tolerance = 1
Feather = 0
Sample merged = doesn't matter, it's only one layer.
Click on the white background in one of the images to select it. Go to Selections || Invert to change the selected area from the background to the button.

Go to Selections || Modify || Contract. Enter a value of 1 and click on OK.

Go to Image || Effects || Drop Shadow and set as follows:
Color = Background Color (PSP 5)
Opacity = 100
Blur = 30
Vertical/Horizontal Offset = 0

PSP 6: For the shadow color, click into the color box and choose your background color.

Click on OK and deselect the area. You now have a highlighted button to go with your regular button.

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 accommodate your button. (Hint: start with the one with the highlight ... 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 = 35
Bottom = 145

Check "Custom size and position" and click on OK. These coordinates position the crop box so it just surrounds my button and highlight. 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 satisfaction, click on the "Crop Image" button in the Control / Tool Options 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 on the "Crop Image" button in the Control / Tool Options palette. Your second image will seem to have an excess of white space. This is necessary to keep the images the same size so they match up when used.

Save the images. I usually use names like highlight_over and highlight_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.