Creating Bevel Buttons - Paint Shop Pro (PSP) 7 Tutorial

Here is my tutorial on how to create beveled buttons. You can see these on Microsofts website, and in some skins for Windows. Very cool for your web page. This tutorial was written for Paint Shop Pro (PSP), but can probably be used for other versions as well.

Tutorial - Step 1 Bevel Buttons Paint Shop Pro (PSP) tutorial

Create a new image , 200x200 with a light blue background(#6598CB). Now create a new raster layer , and name it button. Then, using the circle selection tool create a circle, starting in the middle of the canvas.





Tutorial - Step 2 Bevel Buttons Paint Shop Pro (PSP) tutorial

With the selection still active, click on the flood fill , and fill the selection with white. Then contract the selection by going to Selections | Modify | Contract , and enter 15. Press Delete, or fill this selection with the same light blue you used before(#6598CB). Finally, get your original selection by going to Selections | Modify | Expand , and entering 15. You should have a white ring that looks like mine.





Tutorial - Step 3 Bevel Buttons Paint Shop Pro (PSP) tutorial

Now is the hard part. With the selections still active, add an inner bevel with these settings .





Tutorial - Step 4 Bevel Buttons Paint Shop Pro (PSP) tutorial

Next, make a new raster layer, and name it "drop shadow". With the selection still active, go to Effects | 3D Effects | Drop Shadow , and enter these settings.





Tutorial - Step 5 Bevel Buttons Paint Shop Pro (PSP) tutorial

You're done! Now you can add whatever text you want - and x, a >>, etc. You can also resize them down to add to your site, I would do about 15 to 20 pixels wide. Good Luck. If you have any questions, Contact Me

Click here to go back to ZimmerTech

Rate this Tutorial

Rate this Tutorial:

Current Rating:

4.5 out of 54.5/ 5.00 with 30 votes.

Current Comments

9 comments so far (post your own)

EXCELLECT!. I was looking for something to show how to make "3D" graphics such as buttons and stuff. I have not artistic ability whatsoever and I need to make my own buttons and such for my project/program. This is awesome thank you.

Posted by Shawn (http://www.cybermagellan.com)on Monday, 01.3.05 @ 10:32am | #258

Pardon the name, but it is the only one I use on the web :)

This was a fantastic tutorial. Simple step by step instruction to create a very effective graphic. True it is subtle but it still makes all the difference.

You can be sure I will recommend this site to friends of mine who actually know how to do graphic design.

Thank you for taking the time to do this.

Posted by Tonymitsu on Monday, 01.31.05 @ 04:08am | #349

Absolutely awesome. I am looking to revamp my site and this tutorial has given me an excellent start. I will definitely recommend your site to others. Thanks for the great tutorial.

-Tricon

Posted by Tricon (http://www.triconium.com)on Sunday, 03.20.05 @ 11:39pm | #420

Wow, this is a wonderful tutorial! Thanks for making this.

Posted by Judith (http://www.avatarcentre.shrink.ws)on Friday, 02.3.06 @ 09:23pm | #814

This tutorial is great, actually I think about using these buttons. But ... i don't know how to edit things like a house in it annd stuff...

Posted by PatjeDoN on Saturday, 02.11.06 @ 03:19am | #834

very good tutorial was able to make my own button as well

Posted by Joe (http://wildheartworks.blogspot.com/)on Thursday, 08.10.06 @ 04:52pm | #2565

very nice tutorial

Posted by nicu pitesti romania on Friday, 10.6.06 @ 04:34am | #2611

Thank you for this tutorial, it was great.

Posted by Don (mark1027.com)on Monday, 04.28.08 @ 07:26pm | #3314

Thank you for this tutorial, it was great.

Posted by Don (mark1027.com)on Monday, 04.28.08 @ 07:26pm | #3315

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:


 
Guess the letters and numbers
(passphrase riddle)
--
'E' +3 letters
and not a
"O",
but
1 chars before W;
small 'M' +3 letters
,
0 chars before small X
and not a
"O",
but
small 'Q' +2 letters
-
(??? - 5) = 1
and then
3 chars before small V
&
→ retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.