Rollover/Mouseover/Hover Button

Sample:   

1)   Open a new image.  The button above is 50 pixels by 25 pixels; with a transparent background.  (I start almost everything on transparent and color as I desire)  For the purpose of the tutorial, I have set the "view" in Paintshop to be 4x the normal size so that the button looks MUCH larger and you can see the shadow detail when we get to that.

tut1.gif (5695 bytes)

2)  Fill with your desired color.   (Choose the paint can, which is the "fill" tool)  You can see the settings I used in the "Controls"

tut3.gif (10443 bytes)

3)  Now  choose  "Image" "Effects" "Buttonize".  You can set your setting to make the border as dark/transparent as you want or as deep/narrow as you want.  You can choose the sharp edges or soft edged.  (See 3B)  You can also "buttonize" using bladepro type settings if you have them.  I do prefer the Bladepro plain button setting.  If you choose the Paintshop Pro "buttonize" the sides will be shaded with the color that you have set on your color palette as the "background" color.

tut4.gif (14594 bytes)

3B)  Play around with all of these setting until you get the effects that you like best. You can make the button shallow, deep, sharp edges, soft edges, etc.

 

tutbuttonize.gif (8886 bytes)

 

4)  Result:  (For simplicity, in this particular button tutorial I have chosen not to use a "drop shadow" .  I also prefer the looks)

tut5.gif (10922 bytes)

(Remember, this is shown at 4x the normal size)  The actual size will be the same as the sample at the top of this page.

5)  Save you image,  I named mine "butredoff".  ("button" "red" "off")

 

tut6.gif (20975 bytes)

Now, we need to make the "on" button.  For these to look "real" the must be exactly the same size.  So instead of starting with a new image, we will use the same image.  After you have "saved" your "off" button, do not close the image because we are going to reuse it.

6)  Now use the "back" key or "undo".  This will get rid of the "buttonize" effect and give you just a red rectangle.

tut7.gif (3415 bytes)

7)   Now we have a plain red rectangle (see #2) and we want to make it look "indented" so we will go to "Image" "Effects" "Cutout".  Be sure to fill in the boxes accordingly.  If you do not specify "Fill with" your image will have a big blank hole in it.  You must choose "Fill with"  Since the color we used to "flood" is the "foreground" color we will specify to "Fill with" "Foreground Color".  I have the "Shadow" set for black; the "Opacity" at 100 (you can play around with this to your liking); "Blur" at 6.5 (again, to your own liking); the "Offset" "Vertical" at 3 and "Horizontal" at 3.  (You can play with these a little)

tut10.gif (9626 bytes)

Choose "ok"

8)  This is the final image.   "Save"  I save mine "butredon" (button, red, on)   This image is still shown at 4x normal size.

 tut11.gif (9401 bytes)

Finished Product:      

If you have a question or I did not explain something clearly, drop me an e-mail.

  paulaem.gif (4799 bytes)

 

 

Home Bio Allen
Jesse Kish Backgrounds
Presets (Bladepro) Tutorials Tubes
Fun Stuff Girls Only Pets
Texas RoadKill Award Winners of RoadKill Award Webrings
Awards Links (Tutorials,  Freewarez, etc.)  

 

1