Rectangular Buttons

The first button was created with Paint Shop Pro's Buttonizer Edge size Height: 8, Width: 8, Opacity 50, Transparent Edge; with background color set to button color. The second button was created the same as above except for Height: 4, Width: 4 and Solid Edge checked. The third button was created with Graphics Plus Button Beveler. The fourth button was created using Eye Candy Inner Bevel set to 6. The fifth button was created with Blade Pro.

Double Buttons

The first button was created with PSP's Buttonize filter, the second with Graphics Plus Bevel, the third with Eye Candy's Inner Bevel and the fourth in PSP with the "soft bevel" technique and the last with Blade Pro (it creates the double for you).

To make the first three layered buttons:

1. Create a new graphic the size you want your button to be (mine was 100x100, but I reduced it to 75x75 on this page.
2. Add two new layers. The quickest way to do this is to hold down the shift key and click twice on the "Add a New Layer" icon.
3. On the second layer, choose selections, select all. Then choose Selections|Modify|Contract and contract your selection to what you think would be a good placement for the inner layer. I contracted mine by 8.
4. Choose Selections|Save to Alpha Channel and save this selection.
5. Deselect and choose Selections|Select All again and fill with your button color. Buttonize or bevel.
6. Click on the top layer. Choose Selections|Load from Alpha Channel and load your inner selection.
7. Fill this selection with button color and bevel or buttonize again.
8. You will probably want to save this button in PSP format, since it is a template for a double button you can reuse any time you want to create a new double button in a different color. You might want to name the layers "Background", "OutBevel" and "InBevel" or something similar.
9. Fill your background layer with the color of your background.
10. Choose File|Save a Copy As and save as a gif or jpg.

1. Create a new white graphic. Make your outter button selection, save the selection to an Alpha Channel, fill selection with black.
2. Contract your selection (mine was contracted by 10). Save this new selection and fill with white. Deselect.
3. Choose Masks|New|From Image, Selections|From Mask, Selections|Save to Alpha Channel, then delete the mask and don't merge with the layer. Deselect.
4. You should now have three selections saved to the Alpha Channel, the large rectangle, the smaller rectangle and the outline.
5. Fill this layer with white and add a new layer.
6. Load the large rectangle selection and fill with a color.
7. Add a new layer, load the smaller rectangle selection and fill with a color.
8. Add two new layers. Load the outline selection and do the "soft bevel" routine as outlined in the tutorial below using the two new layers.
9. Add another two new layers. Load the smaller rectangle selection and do the soft bevel again using the two new layers.
10. Fill your background layer with your background color. Adjust the opacity levels on the soft bevel layers.
11. Save as a PSP file for future use.

The last button was created with Blade Pro. No muss..no fuss!

Pill Shaped Buttons

To create this button:

1. Create a new graphic 160x80 pixels.
2. Set your grid to 20 x 20 and turn on grid.
3. Set the selection tool to circle and check Antialias.
4. Draw a circle starting dead center at an intersection. You want the circle to be 38x38 (this will end up 40x40 with the antialias).
5. Fill this circle with black.
6. Set selection tool to rectangle and turn off Antialias.
7. Place your cursor dead center at the top of the circle and draw a rectangle 60 x 40.
   
   
8. Fill with black. Deselect.
   
   
9. Choose Masks|New|From Image (This Window, Source Luminance, Invert Mask Data selected), then Selections|From Mask, and then Masks|Delete and don't merge with the layer.
10. Choose Edit|Copy, Edit|Paste as a New Selection. Then choose Image|Mirror. Move the selection until it lines up as follows:
    
11. Deselect. Choose Masks|New|From Image (This Window, Source Luminance, Invert Mask Data selected), then Masks|Save to Alpha Channel (give it a name), then Masks|Delete and don't merge with the layer.
12. Turn off your grid lines, you won't need them any more.
13. Flood fill your original layer with white. Add a new layer. Flood fill with black.
14. On the new layer, choose Selections|Load From Alpha Channel and load your selection. Flood fill with white. You should now have a white pill shape on a black background.
15. Set the selection tool to Ellipse and turn on Antialias.
16. Make a selection similar to the following (make a selection then move with the mover tool.
    
17. Flood fill selection with black. Deselect.
18. Apply a Gaussian Blur set at "3". Your image should now look like the following:
    
    
19. Load your mask (Masks|Load from Alpha Channel). You should now just see your button with a white background. Delete the mask and merge with the layer. Name this layer "Button".
    
    
20. Add a new layer and name it "Color".
21. On the color layer, load your selection (Selections|Load from Alpha Channel) and fill with your color choice. Adjust the opacity slider on this layer until the button shows through. You can also adjust the opacity slider on the button layer.
22. I then added text in two layers, the first the black text and the second the white drop shadow (so I could adjust the opacity on the drop shadow layer).
23. I also added a drop shadow to the button by loading the selection on a new layer and adding a drop shadow.

This button can also be resized. You can also successfully stretch this button (within reason, of course). To stretch the button, resize it with "constrain aspect ratio" unchecked. Make the button wider, but leave the height the same.

Soft Beveled Buttons

To create a soft beveled button:

1. Create a new graphic.
2. Add a new layer, call it "Button".
3. Add two more layers and call then "Bevel Top" and Bevel Bottom".
4. Click on the button layer and either make a selection for your button or use the button font to place your selection. Fill with the color or pattern you want for your button. Save your selection to an Alpha Channel.
5. Click on the Bevel Top layer. If you deselected your selection, load it from the alpha channel. Apply the cutout filter Color: White, Opacity 100%, Blur 6-8 and Offset 3, 3.
6. Click on the Bevel Bottom layer and apply the cutout filter again Color: Black (or a very dark version of the button), Opacity 100%, Blur 6-8 and Offset -3, -3.
7. Adjust the opacity sliders on the bevel layers until you get a look that pleases you.
8. Fill the background layer with a color or pattern.
9. Save as a PSP file if you want to use this button as a template.
10. Otherwise choose File|Save a Copy As and save as a jpg or gif.

This method obviously works well on a plain colored background, but I don't think the effect is quite a dramatic.

Adding Text to Buttons

The first button has plain text in a light version of the button color. It is readable and looks neat. The second and third buttons have a drop shadow applied (opacity 55, blur 1, offset 1,1). The dark text has a white drop shadow with a blur of 1 and the light text has a black drop shadow. I think these two buttons are much more readable and they stand out a lot better. If you put your text on a layer, you can change the text later without having to remake your button.

Buttons with Graphics

Navigational Buttons

Cutout and Raised Text Effects

The first button is a "raised text" effect. Following is how this is done:

1. Working on a new layer, enter Text (a bold square type text works best) in a dark color or black.
2. Save the text selection to an Alpha Channel.
3. Drop text and deselect.
4. Add a new layer.
5. Load text from alpha channel.
6. Apply a white drop shadow opacity 100%, blur 2, offset -1, -1.
7. Deselect and play with opacity slider to make the shadow look the way you would like it to look.

1. Working on a new layer, enter Text (again, a bold square type text works best).
2. Save the text selection to an Alpha Channel.
3. Drop text and deselect.
4. Add a new layer.
5. Load text from alpha channel.
6. Apply the cutout filter: Fill with Interior Color unchecked, Opacity 100%, Blur 2, Offset 1,1.
7. Deselect and play with opacity slider to make the cutout look the way you would like it to look.

Cylindrical Buttons

Click here for a tutorial on making the above buttons and more.

Oval Buttons

The first button is created by using a linear gradient of a very dark color as foreground and a very light version of the color as the background color.

To create the first button using a font:

1. Use button font "!" set to 28.
2. Fill with a linear gradient set to 90 degrees.
3. Use button font "!" set to 22 (place in the middle).
4. Choose Image|Mirror.
5. To give the inner edge a slightly softer look, feather your selection by 1 before you choose Image|Mirror.

1. Set the selection tool to Ellipse, Antialias checked.
2. Make your selection.
3. Fill with a linear gradient set to 90 degrees.
4. Contract your selection by whatever amount looks good to you.
5. Choose Image|Mirror.

1. Add two new layers to the background layer, name the first new layer "Outer" and the second new layer "Inner".
2. Click on the "Outer" layer. Place the button font set to 28. Save the selection to the Alpha Channel as "Outer". Fill as outlined above.
3. Click on the "Inner" layer. Place the font set to 22 and save this selection as "Inner". Fill as outlined above.
4. Save the button in PSP format.

The third button was beveled with Eye Candy's Inner Bevel. The fourth button was beveled with Blade Pro.

Round Buttons

For round buttons, it is best to use a font for the circle (this anti aliases the edges). You can download Chancery Ornaments and use the "l" for these buttons. The first three buttons above were created the same as the oval buttons. The fourth button was filled with Sunburst Gradient set to V: 65, H: 35 to create a sphere. The last button was beveled with Blade Pro.