---

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

Using Paint Shop Pro’s layers feature gives you a lot of room for creativity in creating buttons. A double bevel button looks quite attractive and is easy to make with layers.

                

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 100×100, but I reduced it to 75×75 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.

To make the second to the last button:

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.

Click here to download a zip file of this button template.

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

---

Pill Shaped Buttons

To create this button:

1. Create a new graphic 160×80 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 38×38 (this will end up 40×40 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.

You now have a multi layered button you can save as a PSP file and then fill with any color or pattern you want. I cropped the final button to get rid of some of the extra white space around the button (cropping a layered button will not effect the layers or the mask at all). For a zipped copy of this button, click here.

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

Creating softly beveled buttons on a fine grain background can be very dramatic. All the buttons in the following graphic were made with fonts (mostly the button font). I am including the background I used for anyone would would like to try a fine grain background on their page.

   

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.

Depending on the size of your button, you may want to increase/decrease the horizontal and vertical offsets. Creating odd shaped buttons out of a fine grain background image allows you to be able to save the button as a jpg without applying a transparent background. With the fine grain, the outline of the button is not detectable.

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

Adding text to a button is very easy. You want the text to stand up and be noticed! But, on the other hand, you need to make your buttons readable. My advice is to stick with a plain font (I used Brooklyn below). Fancy fonts tend to be hard to read. Following are text font examples and how to create them:

      

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

Placing graphics on buttons can make effective navigational aids. The following buttons were created by creating a square the color of the button, beveled with a small bevel, then graphics were applied (in this case they are fonts…all from the font “International”) in a very light version of the button color with a drop shadow to make the graphic stand out.

         

---

Navigational Buttons

Sometimes strategically placing buttons as navigational aids can be very effective. Following are sample navigational buttons. The first set just has a drop shadow, the second set are beveled.

---

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.

The second button is a “cutout” effect. Following is how this is done:

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.

To create the button using the selection tool:

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.

This button can be created in layers and saved as a master so you can create the button again, any time, in a different color. To create this button in layers:

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 second button used the same font with the “soft bevel” technique (see above).

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.

Drop Shadow Buttons

Create this button in layers and save as a psp file and you can change the color and background any time you want for a new button! To create this button:

1. Create a new graphic the size you want your button to be plus 5 pixels around each edge.
2. Draw your button with the selection tool.
3. Save your selection to an alpha channel.
4. Add a new layer and call it “Color”
5. Add another new layer and call it “Shadow”
6. Click on your color layer and fill.
7. Click on the “Shadow” layer and apply a drop shadow with the opacity at 100%. If you get white pixels around the edge of the graphic, clear the shadow layer (Edit|Clear), and contract your selection by 1 then add the drop shadow.
8. Play with the opacity slider on the shadow layer until you have the effect you want.
9. Add layers for text. You can save each text selection so that if you want to change the color of your text the next time, you can just load the text selection and fill with the new colored text.
10. Fill Background layer with your color choice.
11. Save as a PSP file.
12. To save each individual button, turn on the layers you want and choose File|Save a Copy As and save as a gif or jpg.

---

Cutout Buttons

Cutout buttons are another easy and elegant button. This is another good button to make a template and save. Then when you want a cutout button, just bring up your template and fill with your new color. For this button:

1. Create a new graphic the size you want your button to be.
2. Add a new layer and call it “Color”
3. Add another new layer and call it “Cutout”
4. Click on your color layer and fill.
5. Click on the “Cutout” layer and apply the cutout filter: Black shadow color, Opacity 100%, Blur 6, Offset 2,2.
6. Play with the opacity slider until you have the effect you want.
7. Add layers for text. You can save each text selection so that if you want to change the color of your text the next time, you can just load the text selection and fill with the new colored text.
8. Fill Background layer with your color choice.
9. Save as a PSP file.
10. To save each individual button, turn on the layers you want and choose File|Save a Copy As and save as a gif or jpg.

---