This tutorial will show you how to make attractive buttons for your web page, specifically the button at the left but the general principles are the same for a variety of buttons.

Open a New Image, size doesn't really matter as long as it is more than big enough for the finished button. I mostly use white for my page backgrounds so I choose a white background for the new image. Immediately add a couple of layers. My layer palette to the right shows Layer 1 instead of a background layer because I forgot to choose a white background and had to include a layer for the background color, deleting the original layer labeled "Background". The middle layer is the one you will use for adding text to these buttons. The button itself will be done on the top layer. If you are working with a solid button instead of this translucent one, you would put the button layer in the middle and the text layer on the top.

Choose the preset shapes tool from the tool palette and scroll through the choices until you find the translucent button shown in the Shapes Option dialog to the left. Now draw the button shape, making it long enough to hold the words you're going to be putting on the buttons.

If you like the size of this one, the psp file is available by clicking on the startbutton.psp image to the right.


 

The placement of this text under the button makes it a bit lighter in appearance than the initial color chosen so go a shade or two darker than the final result you desire.

It's also a good idea to make notes or an image of the color chosen and the text settings in the Text Entry dialog below. This way, six months from now, you can add another text button to your page.

You'll get better results if you choose a heavy font like Elephant rather than a skinny one like Arial.

Have stroke turned off and your color choice as the fill.

18 is a good size for legible text. If a word is just a bit long for your button, you can reduce it from 18 to 17.

 

Your button should now look something like the one on the left, you may have to move the text a bit to get it just right.

 

Now, go to Effects
      >> 3D Effects
         >> Inner Bevel.

Start out with the settings as they are in the Inner Bevel dialog to the right. You can tinker with them, from there.

 

Your results should be something like the button below.

 

 

 

Copyright Notice: All files on this site are copyrighted by their creator and/or contributor. They may be linked to but may not be reproduced on another site without specific permission from Holly Timm [htimm@comcast.net] and/or their contributor. Although public information is not in and of itself copyrightable, the format in which they are presented, the notes and comments, etc., are. It is however permissable to print or save the files to a personal computer for personal use ONLY.