Pambytes Web Graphics

Fonts Clipart Backgrounds Borders Banners Buttons Image Sets
 

Tutorial

 

My most frequently asked question is "How do I add text to these buttons." So this is the first tutorial that I have decided to do. Time permitting, I will add others. I have used Paint Shop Pro v.3 for this tutorial. I don't use this program for doing text, I use Photoshop 5, but PSP is widely available as a shareware download and more people have access to it than the much higher priced Photoshop. There is a version 4 but I don't have it so this tutorial is done with 3 and I am assuming that this procedure is much the same in the newer version.

Okay, to start, you need to open a blank button by going to FILE-->Open

Open File

And then choose the directory and image you want to add text to.

Open Image

  And you get...

Open Button

If you opened a GIF file you will need to convert the image from 256 (or indexed) mode. This is done under Colors on the top tool bar. Paint Shop Pro calls it Increasing color depth. Choose 16 million colors. Even if your system only displays 256 colors, you need to do this or else the text will be jaggy when you put it on the button.

(By the way, I zoomed in on the button I used, that's why it appears so big for the rest of the lesson:)

Increase color depth

Next you need to open the tool bar that contains the text tool. This is indicated at the top of the Paint Shop Pro window by an icon with a paintbrush on it.

Open Toolbar

To put text on the button choose the tool that has a "T" on it. When you place your mouse pointer over the button the cursor changes to something that looks like a "+" sign with a capital T at the bottom right. Click on the image.

Add Text

You will get a text dialog box where you can choose the font, size as well as some other options for your text. Near the bottom of this box is where you will type the words that you want on the button. A warning; At least with my version, PSP will give you a message that the text will not fit on the image if you try to put more words, or use too big a font, than will fit on the button. Then you will have to open the text box again. I say warning because if you have a lot of fonts installed it is a hassle waiting for the box to come up.

Text box

  When you say okay you will see that your cursor has changed again and this time it has your text attached to it floating above the button. You can move it around (before you click the mouse button) until it is placed where you want it on the button; then click.

Place text Text done

Time to save the image. In order to save an image as a GIF file, it must be converted to 256 color mode. Since we increased its color depth at the start, we must now decrease it. This is done much the same way. Go to Colors -->Decrease Color Depth and select 256 colors.

Decrease colors

Alternately, for simple images such as the one I used, that have fewer than 256 colors, use the following method, which will result in smaller file sizes. Under Colors go to Count Colors Used. You will get a box that tells you how many colors the image is using.

Count colors

Number of colors used

Go to Colors -->Decrease Color Depth but choose X Colors instead of 256 colors. On the left side of the resulting dialog box you can specify the numbers that the image has. Type in the number. There are some other options to the right.

Specify colors

  The only thing left is to save the image:) Congratulations! You are done.

Save the image



  [ Banners ]  [ Borders ]  [ Buttons ]
[ Clipart ]  [ Tiles ]  [ Collections ]

[ Edgar Allan Poe ]  [ Mercury-Redstone 3 ]

Site Index
Site Index

Page created by Gibson Grafx
Copyright © 1996-97 Gibson Grafx. All Rights Reserved
Email question or comments

Web Services Provided by:
Texas GulfNet