Site hosted by Angelfire.com: Build your free website today!

This tutorial is geared to help you put up a banner very quickly and easily on your own web site. You can use your own text, and match your own patterns and colors.
Note that most of the tools in Paint Shop Pro are labeled; when you hold the mouse over an icon, you will see the name of the tool. Each text entry across the top has a dropdown box with various options. If you can't figure out which one to use, drop me a line; I have screenshots of the whole page and I'll upload a graphic to you that has an arrow pointing to the tool you need. JJJPEMom@aol.com

  1. Download any graphic below if you want to practice using a fill behind or inside your letters. (Right click and save as) You may also use your own patterns.
    Parlor Wallpaper 1Parlor Wallpaper 2Textured LavendarBlue GinghamGreen PatternStart a new banner with background color set to Background Color, (16.7 million colors) large enough to accommodate the text you are going to use plus any graphics you will be adding. A typical size would be 600 wide by 100 high. On the panel to the right (below the color palette, see graphic), set your foreground color to black (if your letters are going to be a solid color, select the color you want them to be), background color to whatever color your web page is.

  2. Select Text tool, place the cursor over the center of the banner, and click. When the dialogue box comes up, select Antialias, Center and Floating. Whatever fonts you have in your computer will show up under Font Attributes. Start typing the text; the text will show up in the sample section so you can guage the effect of the size and type of font you've chosen. Select a wide font (I used Carlisle), probably size 48 unless you have a long string of text. You may want to go up to size 72 if you're just typing welcome. Finish typing in your banner. Leave text selected.

  3. Fill the text with the pattern. Choose the Flood Fill tool (the paint bucket). You should see a Controls Dialogue box. If you don't see it, go to the top toolbar and click on Toggle Tool Palette. Now it should be visible. Your selections will be Fill Style=Pattern; Match Mode=None; Tolerance=100; Opacity=100; Options=New Pattern Source=texturedlavendar (or the pattern of your choice. Note: patterns have to be open to be available). Put the bucket over one of the letters and click. All your letters should now be filled. Leave text selected.

  4. We'll need to cut out the letters, which means giving them shadowed edges to make them stand out from the background. If your letter colors are black, select a shade of light gray in place of the black in the following instructions.
    Go to Image/Effects/Cutout. Uncheck Fill Interior; select black for Shadow. Set opacity to 90, Blur to 2.5, Vertical and Horizontal settings to -2. Click OK. *Optional, for a softer edge to the letters, do this again using white for the shadow, opacity to 50, and +1 for the Vertical and Horizontal settings.
    Go to Image/Effects/Drop Shadow. Your settings will be Color=Black; Opacity=60; Blur=7.3; Vertical offset=3; Horizontal offset=4. ok.
    Use the crop tool to cut the excess from the graphic.
    This is the finished banner. If your background is a pattern, click here to see how to make your background transparent.

  5. If you preferred to fill the background instead, go to Edit:undo flood fill. Now go to Selections and choose Invert. (These commands are across the top of the tool bar). Your background is now selected. Pour the fill into the background; invert selections again and pour a new color or pattern into your letters if they're not already the color you want (I filled mine with color#C6C7EE. Apply step 4 (cut out the text and put a shadow behind it); your banner will now look something like this.

  6. Use the crop tool to cut the excess from the graphic if desired. If you have a textured background, a border looks nice around it. PSP always creates the border from the background color, so set your background color to a contrasting color or black; Go to Image/Add Borders/Symmetric/select a number (I used 6). You can use the magic wand to select the border, then do a cutout on it to get a rolled look (see banner at top of page). Use the same settings as on the text, but don't add the second step of cutting out with white.

Updated: September 3, 2001

Back to Main Page
Back to RaggBagg index