Paint Shop Pro 7 New image dialogue box.
Paint Shop Pro 7 New layers dialogue box.
Paint Shop Pro 7 Colour pallette dialogue box.
Larger view of the grey edged button.
Larger view of the grey edged button showing dashed selection lines.
Paint Shop Pro 7 Gradient dialogue box.
Paint Shop Pro 7 Gradient editor dialogue box.
Paint Shop Pro 7 New gradient dialogue box.
Paint Shop Pro 7 Text entry dialogue box.
Paint Shop Pro 7 Objects dialogue box.
Paint Shop Pro 7 Magic wand tool options dialogue box.
Paint Shop Pro 7 Eraser tool options dialogue box.
Paint Shop Pro 7 Paint brush tool options dialogue box.
Paint Shop Pro 7 Colour pallette gradient styles editor dialogue button.
Paint Shop Pro 7 Colour pallette gradient slider adjuster dialogue box.
Stroke field empty, Fill field has a black colour option.

The Rollover Navigation Button.

Underline

This rollover button Mouse-Over Button was created using Paint Shop Pro 7 (Anniversary Edition) Paint Shop Pro 7


New Image.

Step 1:
First of all, open a New Image Canvas so as to have an area that is to be your button design size. In this instance I have chosen a New Image size of 130 pixels by 20 pixels at a resolution of 72 pixels per inch with a blue background but this can be anything you like, this will be the 'mouse over and click' button start point. Save this image as a .PNG file with a meaningful name i.e. "mouseover_button.png", (.PNG allow edits to be saved without compression and loss of image quality).

Click for dialogue box picture.  
Promote to Layer.

Step 2:
From the '"Drop down' menu select 'layers' and select 'Promote to Layer' or if it is visible use the 'Promote to Layer' button. Then using the eraser tool set at 16 pixels square in shape, erase out internal and external areas to leave a button outline shape as in this example although style, size and shape is your choice in the end.

Button Outline Eraser Tool.
Colour Replacer Tool.

Step 3:
For the example I am describing I wanted to have a grey effect button, so using the Colour Replacer Tool I selected the blue area of the image and swapped it for grey. I then used the Paint Brush Tool at a size of 1 pixel to add different shades of grey to the button outline selecting the colours from the Colour Palette.
The HTML codes for the colours used were as follows... #707070, #757575, #777777, #919191 and #E8E8E8 from darkest to lightest!

Grey Outline. Paint Brush Tool.
Paint Brush Tool.

Step 4:
Still using the Paint Brush Tool I added some slightly off white colour, (HTML code #F6F6F6) to the inside edge of the button outline, with some lighter grey in the corners to leave a transparent rectangular area in the centre.

Click for larger image.  
Magic Wand Selection Tool.

Step 5:
Select the internal transparent rectangular area of the button image using the Magic Wand Selection Tool ensuring that the Match mode: is RGB Value, the Tolerance: is set to about 10 and that Feather: is set to zero.

Click for larger image. Magic Wand Selection Tool.
Gradient Fill

Step 6:
I now need to set up the gradient colour in the 'Styles' area of the Colour Palette. To do this click on the 'Foreground Colour' black arrow ( Black Arrow ) and then select the gradient icon, this changes the icon style! Now click on the Foreground Gradient button to open the 'Edit' dialogue. Select 'Edit' to open the 'Gradient Editor' and click on the 'New' icon, create a New Gradient name! Select the 'Custom' icon and click on the 'slider' ( Slider. ) icons and select colours for them, (grey and white). Set the Location: for the grey one to 15% and the white one to 70%, this has now set the Gradient Colour parameters for our Flood Fill.

Gradient Flood Fill. Gradient Editor.

New
Flood Fill Tool.

Step 7:
With the centre area of the button image still selected from using the Magic Wand Selection Tool, select the Flood Fill Tool and click on the selected area. The area now fills with a gradient from the Gradient Style we set up in step 6. We can now 'Flatten' or 'Merge Layers' using the 'Merge Layers Tool' or selecting it from the drop down menu selecting 'Layers, Merge, Merge All (Flatten)'. This concludes creating the first image for a mouse over button.

Gradient Filled Button Merge All (Flatten).
 

Step 8:
We now repeat the process to create an equal sized button but one with different outline and gradient attributes so as to create a definite change on 'mouse over'.

Blue Navigation Button.  
Text Tool.

Step 9:
We now have two 'Master' images for creating our rollover button the thing is they don't really relate to anything as yet. The next stage is to add some text to show where the button is going to lead to when clicked with the mouse. To do this open one of the button images in paint shop pro 7 and select the Text Tool, click on the image and the Text Entry dialogue appears. ( pI used black Verdana size 8 text for this example but this choice is optional)! However! Under the 'Styles' area make sure the 'Stroke' field is empty, ( Empty. ) the 'Fill' field is the colour you require and that you select the 'Standard Text' button before you select OK .This gives a nice crisp fancy free text style that fits the button nicely.

Grey Button 1  
Centre On Canvas Tool.

Now the text is applied we need to position it in the centre of the image. From the drop down menu select 'Objects', 'Align', 'Centre in Canvas', or you can use the 'Centre in Canvas' icon if it is visible in the toolbar. Finally 'Flatten' the image!
Apply the same style and positioning method to each button image then Save the images with a new name.

Blue Button 1  
 

Step 10:
Now we have our images some HTML code and JavaScript is required to make the rollover effect work. The following link takes you to a HTML document with code and picture examples that can be cut and pasted, it is specific to documents related to this page but you should get the general idea of how to apply it...
HTML code, JavaScript and Picture example page.
When this code is placed into a table it generates the rollover effect for the button by swapping the two button design images, if the "#" is replaced with a URL when the button is clicked it will go to the designated source, as it is with a "#" it just reloads the page it is on.

HTML code, JavaScript and Picture example page. HTML code, JavaScript and
Picture example page.
Rollover Javascript Text. Rollover Javascript.txt



Valid XHTML 1.0 Transitional.

Hosted on
GameStone

All trademarks and copyrighted material are property of their respective owners