Simple NonRectangular Button (1)
In this tutorial you'll use the Draw tool and the Inner Bevel effect to
create a nonrectangular button blank.
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:
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.
In the Tool Options Palette, set the Type to Single Line. Select Antialias
if you like, but unselect Create As Vector.
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.
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.)
In the Tool Options Palette, set Width to 80.
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:
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:
Resize the button as you like with Image > Resize. Use the Smart Size setting
for the Resize Type.
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
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.
Creating Buttons |
Copyright ©2001 Lori J. Davis
All rights reserved