Creating Buttons

Before you even begin making buttons, keep this tip in mind: When you want to make a set of buttons, begin by making -- and saving -- a blank button. That way, you can add to your set without having to put a lot of effort into matching the other buttons in your set: Just duplicate the blank button and then add the text you want on your new button.

Rectangular Buttons

Making simple buttons is about as easy as it gets in PSP: make a simple square or rectangle, add some text, and apply the Buttonize effect (Image | Effects | Buttonize). Here's an example, a button called NEXT.GIF:

To link this button to an HTML file called LESSON2.HTM, you'd include a link tag around the image:

<A HREF="LESSON2.HTM"><IMG SRC="NEXT.GIF" BORDER=0></A>

The attribute specification BORDER=0 suppresses the border that would normally surround an image that is linked to something else. Whether or not you want this border to show will depend on the context and on your site's design. If you want the border to appear, don't include the BORDER attribute in the IMG tag.

Rectangular buttons can get a lot more sophisticated than what you can get with Buttonize. There are plenty of plug-in filters that you can use to get fancier button effects. Here are a few examples that make use of the Buttonizer (Rectangle - Inner) included in Ulead's Web.Plugins:

Simple Standard Frame Gradient

Another buttonizer provided with Web.Plugins is Buttonizer (Any Shape - Inner). This plug-in is one of my favorites:

And here are a few more plug-in buttonizer examples, these from NVR BorderMania:

Color Push Button 3D Soft Color #1 Instant Button #1

Handmade Rectanglar Buttons

You don't need to use a filter to make a 3D rectanglar button. Here are some different-colored examples of an easy-to-make handmade button:

         

How-to

Beyond Simple Rectangles

Buttons don't have to be rectangular. Circles, ovals, and irregular shapes can all be used for buttons. Save your non-rectangular buttons as transparent GIFs and set BORDER=0 in the IMG tag, and you'll be all set.

Here's an uncomplicated non-rectangular button:

How-to

For another example of a non-rectangular button, click here.

PSP 6's new Inner Bevel and Outer Bevel effects can also be used to make non-rectangular buttons. I'll add examples of these soon.

(Note: The triangular buttons at the bottom of this page and the other pages of this section were made by applying the Web.Plugins filter Buttonizer (Any Shape - Inner) to a solid-colored triangle. The right-pointing arrow is simply a mirrored version of the left-pointing arrow. A similar effect can be created with PSP 6's Inner Bevel.)


Next Previous | Home | Basics | How-To | Links | Next Next

Copyright ©2000 Lamander , All rights reserved
1