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.

Push Button


This button is just begging you to push it. To create this button:

  1. Create a new graphic (mine was 75 x 75.
  2. Add Four layers. Name them something like Bottom, Middle and Top and Text.
  3. Click on the Bottom layer (not the Background). Use a dingbat font to create a circle (I used Chancery Ornaments "l") 48 pitch, don't deselect.
  4. Set foreground to very dark color and background to a very light version of same color.
  5. Fill circle font with linear gradient set to 90 degrees. If you plan to save this as a template, save the selection to an alpha channel.
  6. Deselect text, click on the middle layer and place another circle on top of the first one somewhat smaller (mine was 38 pitch).
  7. Line up new circle so that it is perfectly centered (click on the Mover tool, then right click on your selection to move your selection). Don't deselect.
  8. Reverse foreground and background colors (click on arrow between foreground and background).
  9. Fill with linear gradient again. Again, save to an alpha channel for a template. Deselect text.
  10. Place another circle this time just slightly smaller (mine was 35 pitch).
  11. Reverse foreground and background again and fill with linear gradient. Save selection if you want. Deselect text.
  12. Click on the Text layer and add text. I placed my text in the dark version of the button color with a white drop shadow (outlined above).
  13. Add background color or pattern to Background layer.
  14. Save as a PSP file for a template.
  15. Choose File|Save a Copy As and save as a jpg or gif.

Recessed Buttons


Recessed buttons look great on a web page and are very easy to create. Just follow these instructions:
  1. Create a new graphic (mine was 75 x 75).
  2. Add two new layers. Name them something like Bottom and Top and add a text layer if you are placing text on the button.
  3. Click on the Bottom layer (not the Background). Use a dingbat font to create a circle (I used Chancery Ornaments "l") 55 pitch, don't deselect.
  4. Set foreground to Dark Grey (R:93, G:93, B:93) and background to white
  5. Apply Linear Gradient set to 145 degrees and deselect (save selection for a template).
  6. Click on the Top layer and create another circle Font Size 45 and move to the center of the other circle (hint: place the crosshairs in the middle of the existing circle when you click to bring up the text tool. This will place the new circle close to dead center).
  7. Set foreground to white and background to what color you want your button (medium to dark color).
  8. Apply Sunburst Gradient set to Vertical = 32%, Horizontal = 32%
  9. Add text or a dingbat font on the text layer.
  10. Resample to a smaller size of you want (I resampled mine to 65 x 65 - this smooths the button out somewhat).
  11. Add background color or pattern to Background layer.
  12. Save as a PSP file for a template.
  13. Choose File|Save a Copy As and save as a jpg or gif.
You now have a "recessed" button. Add a dingbat graphic or some text and you're set.

Another Cool Recessed Button

   

I really like this button. It was sort of an "accident" but I like the effect. It can be created entirely with Paint Shop Pro. No external filters required! To create this button:

  1. Open the Recessed button template you created above or create the button.
  2. Add two new layers (call them TopBevel and BottomBevel.
  3. Click on the Top Bevel layer and apply a cutout filter Color: White, Opacity 100%, Blur 8, Offset -2, -2.
  4. Click on the Top Bevel layer and apply a cutout filter Color: Black, Opacity 100%, Blur 8, Offset 2, 2.
  5. Adjust the opacity sliders on the two bevel layers to get the look you want.
  6. For the right button, click on your Bottom layer and load the large selection from the alpha channel. Fill with a linear gradient as above except set the dark color to a dark version of your button rather than to dark grey.
  7. Add background color or pattern to Background layer.
  8. Save as a PSP file for a template.
  9. Choose File|Save a Copy As and save as a jpg or gif.

And Yet Another Cool Recessed Button....

   

The left button was created entirely in Paint Shop Pro. The right button requires a beveling filter like Alien Skin's Eye Candy. To create the button in PSP:

  1. Create a new white graphic 100x100 (or a size easily divisible by 2). Set foreground color to black.
  2. Choose the "Shapes" tool. Set to Shape: Circle, Style: Outline, Width 10-14 (I used 14, the smaller the width the more rounded the outline will be).
  3. Place your cursor at 50,50 and draw your circle. Keep in mind that the "outline" draws from the edge of the circle, so stop leaving room for the pixels for the outline.
  4. Choose Masks|New|From Image, Masks|Save to Alpha Channel and name the mask "Outline". Click in the center of the graphic with the magic wand and save this selection to an Alpha Channel as "Inner".
  5. Delete the mask and don't merge with the layer (Masks|Delete).
  6. Fill this layer with white.
  7. Add a new layer. Load the Inner selection. Expand this selection by 2 (Selections|Modify|Expand). Fill with a color or a texture.
  8. Add another new layer. Load the Outline mask. Choose Selections|From Mask (you could just load the Outline selection, but selecting it from the mask gives a smoother edge). Then delete the mask and don't merge with the layer. Fill your Outline selection with a color or texture.
  9. For the right button, I used Eye Candy's Inner Bevel on the selection.
  10. For the left button, I applied the Soft Bevel technique.
  11. Fill background layer.
  12. Save as a psp file for a template.
  13. Choose File|Save a Copy As and save as a gif or jpg.