Simple NonRectangular Button (1)

In this tutorial you'll use the Draw tool and the Inner Bevel effect to create a nonrectangular button blank.

1. Open a new 300 by 100 pixel file, with Background Color set to Transparent and Image Type set to 16.7 Million Colors (24 bit). The new image canvas will look like this, with the checkboard indicating a transparent background:

   

2. Choose the Draw tool. For the Styles on the Color Palette, set the Stroke mode to Solid Color and the Fill mode to Null.

   

   Click the Stroke Styles swatch to bring up the Color Picker, then select white and click OK.

   

3. In the Tool Options Palette, set the Type to Single Line. Select Antialias if you like, but unselect Create As Vector.

   

4. For Line Style, click Custom. You'll then get the Styled Lines dialog box:

   

   In the Caps pane, click the arrow for the First Cap flyout menu and then choose the Round cap. Do the same for the Last Cap.

   

   Click the Size button for the First Cap and in the Cap Size dialog box set Height and Width to 1. Do the same for the Last Cap.

   

5. At the bottom of the Styled Lines dialog box, click Save As New. When prompted for a name for your line, enter something like #_temp or #_junk and click OK. Whenever you want to add a new temporary line style, you can use this same name, overwriting your last temporary line style. (If you really want to save a line style permanently, give your new line style a unique name instead.)

6. In the Tool Options Palette, set Width to 80.

7. Position the mouse cursor at 50, 50 on the image canvas and drag until the cursor is at 200, 50. (Keep an eye on the left side of the status bar to track the cursor position.) Release the mouse button and what you'll have is a capsule shape like this:

   

8. Now you'll add some color and depth to your button with Inner Bevel. Choose Effects > 3D Effects > Inner Bevel to open the Inner Bevel dialog box:

   

   Choose the Pillow preset. Then click the Color swatch in the Light pane, and in the Color Picker select the color that you want for the button. Click OK to close the Color Picker, then click OK to apply the bevel.

   Here's the result when the color is set to red:

   

9. Resize the button as you like with Image > Resize. Use the Smart Size setting for the Resize Type.

10. Save the button image as a PSP file so you can easily add text layers or other enhancements later on. You can also use the PSP version to save a transparent GIF version of the button using File > Export > GIF Optimize.

    Note: If you save the button as a GIF or JPEG rather than exporting the file as a transparent GIF with GIF Optimize, Paint Shop Pro will automatically give the GIF or JPEG a white background.

There are all sorts of variations that you can try. For example, you can use a gradient or pattern instead of a solid color for your stroke, as in the examples below:

For the Gradient version (on the left), the Pillow preset of Inner Bevel was used with the Color of the Light set to white and the Intensity of the Light increased a bit. For the Pattern version (on the right), the default settings for Inner Bevel were used.