For PSP V56Home   >   Tutorials   >   PSP V7 Effects   >
Highlighted Graphics for Mouseovers
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.
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:
Blend mode = Normal
Match mode = None
Tolerance = n/a
Opacity = 100
Sample merged = unchecked
Set your foreground color to a medium blue and your background color to a medium purple.
Set your foreground style to Gradient (click on the arrow in your Foreground-Style box and choose the second icon from the left), then click into your Foreground-Style box and set as follows:
Gradient = Foreground-Background
Angle = 180 degrees
Repeats = 0
Style = Linear Gradient (icon on top)
Invert Gradient = unchecked
Set your foreground texture to None (click on the arrow in your Foreground-Texture box and choose the icon on the right.

Click into the selection to fill it with the gradient.

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

Click into your Foreground-Style box and check "Invert gradient". Right-click into the selection to fill it with the 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 Effects || 3D Effects || Drop Shadow and set as follows:
Vertical/Horizontal Offset = 0
Opacity = 100
Blur = 30
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 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 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.