Easy Button Tutorial for PSP7

This tutorial shows you how to make a very simple and fast, yet effective looking button. It's the first of my series of easy button tuts. Ideal for beginners, it's so simple you'll learn to do it in your sleep . . . trust me ;-)

Note: This tutorial may be downloaded or printed out for personal use only. It must not, under any circumstances, be taken from this site in its entirety or in parts and passed around Yahoo or MSN Groups, re-posted on other websites or passed on to other individuals. Placing a link on your Group's site or your own site is fine, and passing links around is also fine. But links ONLY please, and remember to acknowledge that they are external links, otherwise many of your visitors will assume they are still on your site. There are logos available on my resources page if you wish to use one. Thank you for your co-operation.

As always, if you have any questions about this tut, or any comments or suggestions in general your feedback is always welcome. Just click on the link above to contact me.

1.    Open a new image, 150 x 80, with the same background colour that you plan to use for your web page. The foreground colour doesn't matter for now as we'll change that in a minute. Go to the selection tool and choose the rectangle option. Now make your selection carefully. . . . . . it's important to keep it pretty much centered, and not too close to the edge. Try to keep it at least 10 pixels away - you'll see why in a minute (see example right). Leave selected.

    2.    Change your foreground colour to the colour you want your button to be (as you can see below, I went with blue). Tip: don't choose a very dark colour such as black or brown, as this effect doesn't work as well. Flood fill your selection with the paintbucket.

3.    Now go to the drop-down menu above and choose Selections>modify>expand and choose 10 and hit 'OK'. Just like I did (right). Now you can see why it was important to keep our selection centered . . . but if you find your selection is spilling over the edges, rather than starting from scratch just undo and make your modified selection a little smaller.

4.    We've almost finished (told you it was going to be quick! :). With your selection still running, go to effects>artistic effects>hot wax coating. Now all you have to do is select>none and we've finished! You've now got a nifty little web button, complete with framed border.

Our finished product! There's only one thing wrong . . . it's a little BIG for an iddy-bitty button, so how about we resize it? Go to image>resize>percentage of original>75%.

Ahhhhh. . . much better! :)


Here's one I've added some text to (with a tiny drop-shadow to give it a more 3-d look):



Tip: As this process tends to make certain colours 'bleed', try saving your final images as .gif's to eliminate this problem.

For variations, just choose different colour fills and see what you come up with. All you need to remember is not to go with too dark a colour. I got some really effective contrasts by using these colours below: