Basic HTML: Banners: Working With Text

Joe Burns

(with updates by editorial staff)

Use these to jump around or read it all
Color of Text
Choosing Text Font
Changing Font Size
Add Text and Shadow
Last Three Banners

Now the text. We are going to create four more images with text. They are:

To do this, we're concerned about three things: The color of the text, the font of the text, and the size of the text. Let's take them in order.

The Color of the Text

I went with shades of purple mainly because the ticket is purple. If you feel another color is better on the eyes, knock yourself out. On the right side of the PSP screen is a block of color that looks like this:

That's the designated area to pick colors. The rainbow item on top allows you to choose from a wide range of colors. At the moment, you can see the two colors that are chosen. One is white and the other is a sort of dark red. Well, we don't want that. We want shades of purple. So, on your PSP, you can do one of two things: Either run your mouse over the rainbow until you find the color you like or do what I do. Click twice on the box beneath the rainbow box that appears the be most forward. It's the one above that is white. You should get a box that looks like this:

The colors in the small boxes are the most popular. I use them unless I need a real specific color. So choose a light shade by clicking on the color. I don't care which. Then choose OK. That shade should now appear in the little box to the right. Did it? Good.

Let's look at the color area again:

See the little arrow pointing to both of the small boxes below the rainbow box? On your PSP, click on it. Notice the two colors flip back to front. That's what's known as setting background and foreground colors. We will use both.
Click the arrow so that the color you just chose is in the background. Now, click twice on the foreground box to again bring up the color palette. Now choose a dark shade of the color you just chose. Again, I went with shades of purple. My two boxes look like this when I'm done:

Make sure the dark box is forward. We are going to first lay down dark shadow, and then lay the lighter color over top. Basically, we will paste the same text twice, one dark and one light. They will just be a bit offset from one another, giving the effect of a shadow. We have the text color. Now we'll choose the text's font.

Choosing the Text Font

To start this process, we need to once again display the image we intend to place this text upon. If you've been following along, you'll remember that we created banner.gif for the sole purpose of acting as a template so that we could paste other items onto it, namely the two halves of the ticket. Well, now we need a different template. Here's the final animation again for a quick refresher:

Notice that all the text appears betwen the two ticket halves when they are at their farthest point. Whichever image we created that has that look will now become our template. If you've been following the same format as me, that would be banner6.gif. Does that make sense?

Open banner6.gif in your PSP. Now we must put PSP in text mode. Remember the cropping section of this primer series (Primer #3), when we clicked on the button with the dotted square to place PSP into crop mode? Well, same deal here. The button that places PSP in the text mode looks like this: . Click it.

Now move your pointer over top of banner6.gif. It should look something like this:

That little "A" means that you are ready to place text on the image. MAKE SURE YOUR DARKER COLOR IS IN THE FOREGROUND. Remember that we are laying down the darker shadowing first. Click on the banner. You should get this dialogue box:

Now the fun part, choosing the type of text. The upper left of the dialogue box lists the fonts that are available. In the example image above, the font "prom" is chosen. That's the font I used to create the first image that says "Admit." You don't have to use that font. In fact, you may not even have it available to you. The shareware version of PSP offers far fewer fonts than does the full version, which is what I have. If you dislike this font, or don't have it, look at some other ones. Click on the highest font available in your own upper left-hand section. You'll see an example of the font in the gray window just below it. Now use your arrow keys to scroll down. You'll see fonts just wizzing by. Find one you like.

When you find it, type the text you want to appear on the image in the box marked "Enter text here." In the case of this first image, we only want the word "Admit." Click OK. You should now have something that looks a lot like this:

The text you put in should be there, surrounded by those familiar dotted lines and that same four-pointed arrow. Move it around. You can place the text wherever you want.
When you have it where you want it, right-click to set it in place.

I Hate It!

That happens. I never get my text just right on the first try. To delete the text you just posted, go under the EDIT menu and click UNDO. That will bring back the dotted lines. Then go right back under the same EDIT menu and choose CLEAR, as it shows to the left. The text should be gone. Click on the banner again to get the text dialogue box and try another font.

Changing the Font Size

You can just about guess at this. There are two more areas on the text dialogue box. One is marked "Style" and the other is marked "Size." Both affect the look and size of the text. I have found that the "Example" box is helpful, but is rarely my final authority on how large or small text will be. I always have to mess around, trying nine or ten different looks before I arrive at the size and style I like most. Just keep posting text and erasing until you love it.

Add Text and Shadow

Here's the fun part of this. If you have followed the instructions above, you should have laid down dark text somewhere on banner6.gif. That is the shadow text. Now go back over the color palette and click on the arrow between the two color boxes to flip it so that the lighter color now resides in the foreground box.
Make sure PSP is still in the text mode and click on the image again. The settings you used to lay down the dark text should still be there. Choose OK. Now you should have a light color version of the same text. Click the mouse, hold it, and lay the lighter text across the darker text, but slightly off-set. It should look something like this:

See the shadowing? The amount you off-set the light text denotes how much shadow you get. Once you have the shadow where you want it, left-click, put PSP into the crop mode, and click on the image once to set the text in place.

Now, save the image using a SAVE AS command. Remember, you just pasted two layers of text onto banner6.gif. If you simply choose Save, you'll destroy banner6.gif. You need to save this as banner7.gif.

Last Three Banners

You need three more banners. They are each created the same way as the banner we just finished. You will use banner6.gif as a template for each so you'll need to keep opening banner6.gif each time you want to create a new one. Just be sure to do a Save As command each time you save a new image. Here are the last three and a little about each:

This is banner8.gif. It uses the same colors and Prom font as banner 6.gif, but I flipped it so that the dark color is in the forefront.

This is banner9.gif. It uses the same colors, but the font is Isadora.

This is banner10.gif. I have changed the colors for impact and made the text a little bigger. The font is Hobbit.

This Isn't So Hard, Is it?

You're probably wondering what you thought was so hard about creating images. After you create the last three images above, we will take and make them all into one. See you then.

Color of Text
Choosing Text Font
Changing Font Size
Add Text and Shadow
Last Three Banners