Lesson 1: Your First Button - Bonita's Paint Shop Pro Classroom

GeoCities.us » SoHo » Studio

Bonita's Paint Shop Pro Classroom
Lesson 1: Your First Button

Front Desk · Lesson 1 · Lesson 2 · Lesson 3

Tonight we make a plain text button: a colored rectangle with a word on it. No bevel, no shadow. Plain. Every fancy button you've ever admired on somebody's page started out exactly this plain, so don't skip ahead.

You'll need: Paint Shop Pro 5, open, with nothing else open in it. About thirty minutes. A word for your button. I suggest HOME, because every page needs one.

Make a new picture.
Go to the File menu and choose New. A window opens asking how big. Type 120 for the width and 40 for the height. Those numbers are pixels, the little dots your screen is made of. (For comparison, the small buttons people trade at the bottom of their pages are 88 by 31.) For the background color, choose white. For the image type, choose 16.7 Million Colors (24 bit), and click OK.

That last choice matters more than it looks. The effects in Lesson 2 only work on full-color pictures. If you ever find them grayed out in the menu, that's the reason nine times out of ten.

Pick your button color.
On the Color Palette at the right, left-click the rainbow on a color you like. The front square under the rainbow changes to match. That's your foreground color.

If you want an exact color, say one that matches your page, click on the front square itself, and a window opens where you can type in numbers for red, green and blue. Paint Shop Pro counts each one from 0 to 255. Charts like Tom Ulmer's 216 Safe Colors write them as pairs of letters and numbers instead, so here's the translation:

Chart says	00	33	66	99	CC	FF
You type	0	51	102	153	204	255

So Tom's 006666, a deep teal, is red 0, green 102, blue 102. That's the color of every button I make, and the color of the headings in this classroom.

Fill it.
Click the flood fill on the Tool Palette (the paint can pouring). Move your pointer over the white picture, where it turns into a little paint can, and click once with the left button. The whole rectangle turns teal.

Here's why: the flood fill paints every dot that touches the spot you clicked and is the same color as that spot. The whole picture was white, so the whole picture got painted. Remember that. It's going to matter in Lesson 2.

Pick your lettering color.
Now make the foreground color white: click on the front square and type 255 in all three boxes for red, green and blue. Light letters on a dark button, or dark letters on a light one. Never medium on medium. I've seen a gray button with tan letters on it, and I'm still not over it.

Type your word.
Click the text tool on the Tool Palette (the letter A), then click in the middle of your button. The Add Text window opens.

Choose a font that's easy to read small. Arial Black or a bold Verdana are both good. Set the size to 14. Make sure the box marked Antialias has a check in it. Type your word in the big box. If there's a choice of how to create the text, pick Floating. Click OK.

Put it in place and set it down.
Your word appears with a line of moving dashes around it. Everybody calls them marching ants. While the ants are marching, the word is floating on top of the button and you can still move it. Put your pointer on the word, and when the pointer turns into an arrow with four heads, hold down the left button and drag the word where you want it. Center it by eye. Lean back from the screen and look again.

When it's right, go to the Selections menu and choose Select None (or hold down Ctrl and press D). The ants stop, and the word is painted into the button for good.

7	Save it. File menu, Save As. Name it home1. Where it says "Save as type," choose the Paint Shop Pro Image kind, the one ending in .psp. This is your working copy. Don't make a GIF yet. That's Lesson 3, and I'll explain there why it waits until the very end.

That's it. You made a button. Go show somebody. Ronald pretended to be impressed with my first one, which was purple with yellow letters, and he deserves credit for that.

What "antialias" means

It's a mouthful that means soft edges. Your screen is a grid of square dots. Without antialiasing, a round letter like an O or an S gets built out of whole squares, and you can see little stair steps all the way around the curve. With antialiasing, Paint Shop Pro mixes in some in-between dots along every edge, part teal and part white, and your eye reads that as a smooth curve.

Leave it on for lettering about 12 and bigger. On very small lettering the in-between dots can turn the whole word to fuzz. Look at the lettering on these two buttons from the GeoCities.us clip art library:

Those little letters are square-edged on purpose, set a dot at a time with a dark edge behind them so they stand out. On a button that small, crisp beats soft. Notice too that there are two lines of lettering in two colors, gold or orange on top and white below. If your word is long, split it the same way.

When things go wrong

"My letters came out the same color as the button and I can't see them."
Undo (Ctrl and Z), check which color is in the front square, and try again. Everybody does this once.

"I clicked and nothing opened."
Check that the text tool is really the one selected on the Tool Palette, and that you're clicking inside the picture and not on the gray around it.

"My word is too big for the button."
Undo and pick a smaller size. Or start over with a wider picture. Don't squash the letters to fit. Squashed letters look like they're in pain.

"The letters look jagged."
The Antialias box wasn't checked. Undo and do step 5 again.

HOMEWORK

Make three buttons the same size, the same color and the same font: HOME, LINKS and E-MAIL. Save each one as its own .psp file.

Same size matters. A row of buttons that are all a little bit different looks like crooked teeth, and believe me, I know crooked teeth.

Chrome buttons from STARPORT by Dustin Mayfield

Questions about Lesson 1? [email protected]
Last updated Sunday, September 19, 1999