Mardi Web

Creating text graphics in Paint Shop Pro 5 is much more creative than PSP 4 since you can place your text on a separate layer and save the text selection. Then, if you decide to change colors or textures, you don’t need to start over with a new graphic.

Add Text

The Add Text dialog box is pretty straightforward. There are a few things you need to know, though:

1. Always work in 16 million colors when creating a text graphic. Antialias doesn’t work in less than 16 million colors.
2. Always have “antialias” checked (this smoothes the edges of text).
3. Always place your text on a separate layer and save the selection (Selections|Save to Alpha Channel).
4. The size of the text allowed appears to stop at 72. Don’t let this fool you. You can enter any number you want in the box. Just be careful. I have had PSP crash on me with text sizes larger than 300.
5. When “floating” is checked, your text will be the color of the foreground. When “floating” is unchecked, you will be placing a text selection only (all you will see is the “marching ants” outline).
6. When you place the text cross-hair on a graphic, the text will be centered half to the left and half to the right.
7. Right-click anywhere on the graphic to “place” the text (make the marching ants go away).
8. If you find that the font names appear in the Name window, but there is nothing to the left of the font name and you can’t place your text, this usually means you have run out of memory resources. Close down open programs including Paint Shop Pro then open the program again, the fonts should be back.
9. If you are using PostScript fonts, you need to go to Adobe Type Manager, under Advanced functions, and turn off “Screen Font Smoothing”. If you don’t, you will probably crash Paint Shop Pro.

Creating a Text Graphic

To create a new text graphic:

1. Create a new graphic of 16 million colors with a white background.
2. Add a new layer and call it “Fill”.
3. Add a new layer and name this layer “Text”.
4. Place your text where you want it on your graphic and choose Selections|Save to Alpha Channel. Keep text selected.
5. Add a new layer, call this one “Shadow”. Switch to this new layer.
6. If you have dropped your text selection, you can pick it back up by choosing Selections|Load from Alpha Channel (this is why you saved your text selection to the alpha channel).
7. Add a drop shadow keeping opacity at 100%. You can then adjust the opacity of the shadow by using the opacity slider on the shadow layer.
8. Save as a “PSP” file if you think you will want to play with the graphic at a later date (i.e. changing font color, etc).
9. To save the graphic as a transparent gif, lower the colors to 256 (this will flatten the text), then proceed to create a transparent gif per my instructions under PSP Basics.
10. You might want to imbed in the graphic the name of the font you used (View|Image Information, click on Creator Information, and type in your font name in the Description box).

The reason for the “Fill” layer above the “Background” layer is that any layer (you can tell it is a layer because the opacity slider is not greyed out) has a transparent background as default. If you hold the cursor over the layer name, you will see a checkerboard pattern. This tells you that the background is transparent. By having the bottom layer white, you can adjust the transparency of the “Fill” layer and you won’t see the checkerboard pattern show through, which can be very disorienting.

Drop Shadows

You can use the drop shadow filter in Paint Shop Pro exactly the same as you can use it in Version 4. But, since Version 5 has layers, I suggest you take advantage of this new feature to add your drop shadow on a new layer. The advantage to this is that you can create your drop shadow at 100% opacity, then use the opacity slider on the new layer to adjust the opacity until it looks perfect for your background and text.

Your settings on this filter are strictly a matter of taste. Keep in mind, though, if you add drop shadows to graphics, always keep the shadow going in the same direction. The more blur you add, the “higher” off the page the text appears to be. Adding a short shadow (offset 1,1) in black or white is a good way to make text stand out from a textured background. Use black for light-colored text and white for dark-colored text.

The first “welcome” above has a drop shadow set at Offset: 3,3, Blur 8. I then adjusted the opacity on the shadow. The “welcome” on the right has the drop shadow set to Offset: 1,1, Blur 1. I didn’t adjust the opacity. The first graphic is rather elegant and the second is kind of fun. The sharp black drop shadow on the second graphic makes it stand out from the page rather than being flat on the page.

Text Fills

Why have plain old boring flat one colored text when you can fill your text with whatever you want. You can make it rainbow, wood, let your imagination be your guide. Filling text with Paint Shop Pro is easy. There are two methods you can use. The first is to set a pattern or color and fill it with the Flood Fill tool. The second is to cut the text out of a graphic. You can do both with layers, again giving yourself the ability to change your text at will.

To fill the text with the paint bucket tool, all you need to do is to choose a pattern or texture or set the linear-gradient, then flood fill your text. Following the guidelines for creating layered text graphics, you always want to place your text on a second layer and save your selection for future use. Following are some examples of filled text using the flood fill tool (all have Eye Candy inner bevel applied for effect):

Flood filled with a wood pattern.

Flood filled with linear gradient set to 180 degrees.

This one is kind of fun. It is the same linear gradient as the graphic above except I set the “Match Mode” to RGB value rather than “None”. This allowed me to fill each letter individually. I just reversed the colors for the linear gradient for each letter. Kind of cool!

Cutout Text

The advantage to “cutting” text out of a graphic is that you can move your selection to the spot you think looks best on the pattern you are cutting your text from. To create cutout text:

1. Open the background texture you want to cut your text out of (or flood fill a new graphic with a background tile).
2. Place your text, floating unchecked.
3. Move your text selection with the Mover tool (right click on the selection and drag) to where you think it looks best.
4. Promote your selection to a layer (Selections|Promote to Layer).
5. Save your selection to an alpha channel.
6. Switch to the base (Background) layer.
7. Flood fill with your background color.
8. Click on your text layer again and load your selection.
9. Bevel your text id desired.
10. Add another layer for a drop shadow.
11. Crop your entire image to an appropriate size (cropping won’t effect the layers or text selection).

Beveled Text

Text graphics usually look much better when they have a bevel applied. Unfortunately the one shortcoming of Paint Shop Pro is that they do not have a good beveling filter. The most widely used filter for creating text bevels is Alien Skin’s Eye Candy. The problem with Eye Candy is that it costs more than Paint Shop Pro! Fortunately there is now a more reasonably priced alternative. A new program called Blade Pro does great bevels and also other text effects that Eye Candy can’t do. Please see my Blade Pro tutorial for more information on this great program. The graphic below on the left was beveled with Blade Pro and the graphic on the right with Eye Candy.

Beveling with PSP

The above graphic was beveled entirely with Paint Shop Pro. I call it the “Poor Man’s Bevel”. To create this bevel:

1. Create your text graphic as outlined above.
2. With your text selection active, add two new layers.
3. On the first layer apply the cutout filter (Image|Effects|Cutout) Color: Black, Offset -2,-2, Blur 5, Opacity 100%.
4. On the second new layer apply the cutout filter again with Color: White, Offset 2,2, Blur 5 and Opacity 100%.
5. Adjust the opacity sliders on both the cutout layers until you get the effect you want.
6. Add a drop shadow on a new layer if desired.

Stain Glass Pattern from Vector Shapes

This tutorial will teach you how to create a stain glass pattern from a vector shape. You can create the same pattern with raster shapes, but by using vectors, it’s much easier to resize your shape and your end graphic can be resized as a whole (more on that later). This tutorial will teach you how to create the stain glass pattern I used for the header graphic on this page.

1. Create a new white graphic 550×300 pixel.
2. Set your gridlines to size 25, color light gray.
3. Turn on gridlines (View>Grid).
4. Set the foreground color to black and the background to white.
5. Set the Preset Shapes tool to Rectangle, Stroked and Filled, Line width 5, Antialias checked, Create As Vector checked.
6. Starting at 25, 25, draw a rectangle to the lower right corner an equal distance from the right and bottom edges as the top and left edges.
7. Starting at 50, 50, draw another rectangle.
8. Switch the Preset Shapes tool to Square and set the Style to Stroked & Filled.
9. Starting at any grid intersection draw a square two grids by two grids (50×50 pixels).
10. Hover the cursor over the handle in the middle until you see the two round arrows (see example on left below. Grab the handle and rotate the square until it is in a diamond configuration (see example on right below).
    
11. Move the diamond shape into the top left corner and align so that the outside handles line up with the outside of the graphic (see example below). You can move the graphic one pixel at a time by holding down the shift key and hitting an arrow key in any direction.
    
12. Copy your vector diamond (Ctrl-C) and paste it as a Vector Object (Ctrl-G). Line the copy up with the lower left corner.
13. Paste two more copies (Ctrl-G two more times) and align in the other two corners.
14. Click on the Draw tool and set to Single Line, Stroked, Antialias and Create as Vector checked.
15. Starting at the bottom of the top triangle, hold down the Shift key to constrain your line to a straight line and draw a vertical line until you meet the top of the bottom diamond (see example below).
    
16. Copy this vertical line, paste it as a vector object and move to align with the diamonds on the right.
17. Create a horizontal line between the inside diamond points. Copy and align the copy with the bottom points.
18. Turn off your grid lines and make sure everything lines up evenly. To move a vector object, click on the Vector Object Selection tool and each vector object with the mouse and move (at this point I recommend the Shift-Arrow key move method).
19. If you find your lines are too long, just click on the line to activate it, click on either end and push inwards to shorten the line. Then align.
20. Your expanded layers palette should now look like the following.
    
21. Save as a .psp graphic to preserve the layers and vector objects.
22. Now, make sure the Vector Object Selection tool is active and that you are on the Vector layer. Choose Selections>Select All. You will now see that the entire vector graphic is enclosed as one vector selection. If you right-click and hold on to the lower right corner handle and push inwards, you will scale the graphic down proportionally. You can increase the size of the graphic by pulling out on the lower right handle. Right-clicking and pushing or pulling on a corner proportionally resizes the vector graphic. Since it is still a vector graphic, you will retain your sharp edges and the clarity of the graphic.

Using your Vector Pattern

I created the stain glass header graphic by using the graphic as a mask for selections. I used stain glass textures from Spectrum Glass for the fills and I used a gold Blade Pro preset for the “leading”.

1. Open the vector stain glass pattern. Make a copy and work from the copy.
2. Flatten all layers (Layers>Merge>Merge All (Flatten).
3. Add a new layer and flood fill with a background color and name it Filled.
4. Go back to bottom layer with the stain glass pattern and choose Masks>New>From Image, This Window, Source Luminance, Invert Mask Data checked.
5. Then choose Masks>Save to Alpha Channel then Masks>Delete and don’t merge with layer.
6. Add a new layer on top of the flood filled layer and name it “Leading”. Chose Selections>Load from Alpha Channel. Flood fill your selection and use a Blade Pro preset to create the leading. I have a leading preset available in my Quilting/Stain Glass tutorial.
7. Add a new layer and drag it under the leading layer and name it Diamonds.
8. Turn off the Leading layer and the flood-filled layer. Click on the bottom stain glass pattern layer and using the Magic Wand tool, click in the four diamonds holding down the shift key while clicking to add to your selection. You should now have all four diamonds selected. Choose Selections>Modify>Expand and expand by 2. Choose Selections>Save to Alpha Channel.
9. With the selection active, click on the diamond layer. Flood fill your selection with a stain glass texture. Or, as an alternative, copy a stain glass texture large enough to encompass all four diamonds and paste onto the Diamonds layer (Ctrl-E). Then choose Selections>Load from Alpha Channel, Selections>Invert and hit the delete button. You should now have four diamonds filled with a stain glass texture.
10. Add two new layers for the outer and inner pattern areas. Make sure all the “glass” layers are under the leading layer.
11. Turn off the top layers and go back to the Stain Glass pattern layer. Choose the outer areas of the pattern as instructed above. Fill as instructed above.
12. Repeat for the inner area.
13. I beveled the “glass” layers using my Blade Pro preset “stain glass” (you can find it at my Quilting/Stain Glass tutorial.

As you can see, by the use of vector objects, you can create many different stain glass patterns using the various shapes available.

Organizing Your Plugins

Once you really get into Paint Shop Pro and start using filters things can get out of hand if you don’t have a plan for organization. I have my Paint Shop Pro set up as follows:

This kind of a setup is important for Plugins, since the plugin directory will only show so many filters on the menu. If you organize your filters in sub-directories, they will show up as follows:

Installing Plugins

All the plugins I have on this site are in zip format. If you don’t have an unzip program, I recommend Winzip available at Shareware.com. Once you have them ready to unzip, unzip them into a folder you have already set up, or with Winzip, if you give the program a folder name that doesn’t exist, it will create the folder for you.

There are two other files you need to have installed in your Windows\System folder. They are msvcrt10.dll and for some Photoshop plugins, “plugin.dll”. I can’t legally post the “plugin.dll” file since it is owned by Adobe and is distributed with Photoshop. Adobe considers the distribution of this DLL file to be piracy. I think that is pretty stupid myself. No one is going to buy Photoshop to obtain the DLL file just so they can get a few plugins to work! And, if Adobe knew how to “win friends and influence people” they would freely distribute this DLL file. After all, a lot of beginners on Paint Shop Pro will eventually purchase Photoshop. Oh well, go figure! Anyway, if you have both these DLL files in your Windows\System folder, most filters you download that say they work with Photoshop should work with Paint Shop Pro. There are some exceptions, you will learn which work and which don’t as you go. All of Alien Skin’s and Kais Power Tools filters work with Paint Shop Pro (or at least they do for me).

Setting Plugin Directory

Now you need to tell Paint Shop Pro where you have your plugins installed. To do this go to File|Preferences|General Program Preferences and click on the Plugin Filters tab. The following is how I have my Plugins set:

Note to Photoshop Users

There are quite a few Photoshop filters that work with Paint Shop Pro, most notably the Image|Adjust filter. If you have Photoshop on your computer, you might want to install filters in folders under your Photoshop Plugins Folder and point Paint Shop Pro there.

Paint Shop Pro 5 now has layers. Look out Photoshop! This page will demonstrate how to use layers and their practicality.

Understanding layers can be a bit daunting. But, once you understand the concept, they open a whole new world for designing web graphics. Now you can create graphic templates that you can reuse, create special effects of one image superimposed over another, all very easily.

The first thing you need to do is to get familiar with the Layer Palette:

When you create a new graphic, you have a layer. If you open up the Layer Palette (hit the Toggle Layer Palette button on the top menu bar), you will see that there is already one layer (named by default “Background”). This layer is identical to opening a new graphic in previous versions of Paint Shop Pro.

As you can see in the layers graphic above, there are currently two layers. I have added a layer called “Fill”. Since I work a lot creating buttons, headers, bars, etc., I found out quickly that having the fill layer is very important. With this fill layer, you can change your background in a flash. I leave the white “Background” layer (the layer that is created when you create a new white graphic) in place, because if you use this layer as a fill layer, you can’t adjust the opacity. If you promote it to a layer (this will be addressed later), you can adjust the opacity, but when you do, you will see the “transparency grid” showing through and you won’t be able to judge your opacity setting. With the Background white and the fill layer on top, you can adjust the opacity of the fill layer and see what you are doing. The above example is how I create all my new graphics. As a matter of fact, I have a “.psp” (that’s how you need to save your graphic to preserve the layers) file called “template.psp” that is 100×100 pixels with the two above layers. I just open it and resize any time I want to create layered graphics. The following examples show the important parts of the layers palette:

Layer Visibility Toggle – This button turns on and off the visibility of that particular layer. It is very useful. There are times when you will want to turn off a layer so that it does not want to interfer with what you are working on. Also, when you choose “Save a Copy As”, PSP will compress your graphic and save it with only the layers you have turned on showing….another useful feature!

Layer Opacity – I call this the “Opacity Slider”. This one is really useful. What happens when you start sliding down is that the layer you are on starts reducing in opacity. It is useful for adjusting coloring, superimposing one graphic over another, etc.

Add a New Layer – This is where you add a new layer to your image. You can either click on the icon and name your graphic (get in the habit of naming each layer or you will get really confused!), or you can drag a current layer over the icon to make a copy of the layer you dragged as a new layer. To quickly add new layers, shift click on the new layer icon. This bypasses the naming process and just adds a new layer.

Delete Layer – Click on this icon with a layer selected, and you can delete the layer. You can also drag a layer into the trash can to delete.

Right click is my friend! – When you right click anywhere on the layers palette, this menu will pop up. I find it is easier to use than clicking on the icons. It all depends on how you are oriented to using the mouse and your computer. This is especially useful when you have duplicated a layer and you need to name it. Just right click on the layers plaette and choose “Properties”.

Some other important things to know about layers:

If you right click on the “Background” button on the Layers Palette of a new graphic you have opened (such as a photo), you can choose “Promote to Layer”. This will make it a layer and enable the opacity slider. But, you now have nothing under your photo (like a white background). To correct this, just add a new layer, name it Background and drag it under the new layer.

Always name your layers. If you don’t, you will probably get really confused.

You can view what is in a layer by placing the cursor over the layer name in the Layers Palette. This will pop up a box with a rendering of the layer.

The dark and light grey grid you see behind graphics on layers means that part of the graphic is transparent. When you create a new layer, it is automatically transparent.

Learn to “Paste as a New Layer”. If you make a selection in one graphic and paste it into another graphic “as a new layer”, the background is automatically transparent.

When you have something on a layer, it is automatically selected. Say you add text to a layer and you deselect it. You can add a drop shadow or bevel the text without selecting it. By its nature, a layer is selected unless you make a specific selection of parts of the layer.

For my first layers tutorials, I will start with a very practical purpose for layers. The first will create a button template you can use to make buttons with different textures, colors, and backgrounds. The second is a tutorial for creating a “cutout” graphic effect.

Button Template

Wouldn’t it be nice to have one button template with the button, drop shadow (if you want it) and background all separate so that you can change the background color, change the button color or texture then save the whole thing as a new button? Your template will always be there for you to use again. To create a button template using layers:

1. Create a new graphic the size you want your button to be plus about ten pixels for a room for the drop shadow.
2. Open the Layers Palette (click on the button on the toolbar).
3. Add a new layer and call it “Fill”.
4. Add another new layer and call it “Button”.
5. On your button layer, select your button shape with the selection tool.
   
6. Save this selection to an Alpha Channel (Selections|Save to Alpha Channel).
7. Fill the selection on the button layer with a color (black works well for a template).
   
8. Create another new layer and call this one “Shadow”.
9. Click on the Shadow layer. If your selection is not still there, just load it from the Alpha Channel (Selections|Load from Alpha Channel).
10. Add a drop shadow. Contract your selection by 1 (Selectons|Modify|Contract) before you add your drop shadow to ensure that you don’t end up with white pixels on the edge of the shadow. I add a heavy opacity drop shadow since you can change the opacity level with the slider to the right. If you start with a heavy drop shadow, you can adjust it to whatever opacity you want.
    
11. Turn on all layers and you will see a flat black button with a black drop shadow on a white background.
    
12. Save the button with the “psp” extension (this will preserve the layers). Your layers palette should now look something like this (I moved the button layer to the top): 

OK, we have the template for a button, so how do we use it? I will create a marble textured button on a light blue background out of the template:

1. 1. Open your template.
   2. Duplicate the template (Windows|Duplicate). Close the original template.
   3. Open the Layers Palette if it is not already open.
   4. Select the button (click on the black part with the magic wand tool) or load selection from the Alpha Channel.
   5. Fill with a color or texture (I used dark blue marble).
   6. Buttonize your button using whatever method you choose.
   7. Click on your Fill layer and fill with your chosen background color or pattern.
   8. Turn on all layers (except don’t turn on the shadow layer if you don’t want a drop shadow).
   9. If you leave the shadow on the button, click on the Shadow layer and use the slider to give your drop shadow the opacity that looks best with your background.
   10. Choose File|Save a Copy As and save as a JPG or Gif. This will compress the layers into one. You can then save this new button as a psp file for future use.
       

If you would like a copy of the button template (called button.psp), click here to download a zip file containing the button template. You can then unzip the template and open the it in PSP 5.0 and see how it all works.

Creating a Bevel with Paint Shop Pro

You can create a bevel on this button using Paint Shop Pro’s Cutout filter. I like this bevel better than their “Buttonize” filter. To create this bevel:

1. Open your template. Click on the Button layer. Load Selection and fill with a fairly light color.
2. Create a new layer and drag to the top, name it Bevel 1.
3. If your selection is not loaded, load it. Apply the cutout filter set to: Shadow Color Black
   Blur 4
   Offset -3, -3
   Opacity 100%
4. Add another layer and call this one Bevel 2. Apply the cutout filter the same as above except that the color will be white and the offset will be 3, 3.
5. Adjust the opacity sliders on both bevels until you get the effect you want.
6. As an alternative to the white cutout, you can choose a light color in your pattern or a light version of your button instead (just set your foreground color and when you choose the Shadow Color on the Cutout Filter, choose “Foreground Color”. The following button was beveled with this technique, using a light blue for the top bevel:

Cutout Template

For a tutorial on this effect click here. This tutorial will demonstrate how to make a cutout template you can reuse with the new layers feature. The beauty of templates is that if you one day want to redecorate your page, you can just change the background on all your graphics and save over the old graphic. You don’t even have to write new html as long as you give the graphic the same name you started with. To create this template:

1. Open a new graphic large enough to fit your graphic with about 10 pixels extra around the edge.
2. Create a new layer and name it “Fill”. Fill with a color other than white (not too dark) You will be able to change this color later, so don’t worry about a color choice.
3. Create a new layer and name it “Cutout”.
4. Place your text with floating unchecked and don’t deselect. I used the “G” on the Button Button Font.
5. Apply the cutout filter (give it a heavy opacity setting, because you can then use the slider on the layer to lighten or darken the color of the shadow). Mine was an offset horizontal and vertical of 3, opacity 80, and a blur of 12.
   
6. Save your selection to an alpha channel (Selections|Save to Alpha Channel) and click on OK. Give it a name (I called mine Button).
7. Create a new layer and name it “Shadow”.
8. Load your selection from the Alpha Channel (Selections|Load from Alpha Channel) and add a drop white drop shadow with an offset of 1, opacity 100 and blur of 1.
   
9. Save as a “psp” file (this keeps all the layers and the selection in the alpha channel).Here’s what the final template looks like. It is still four layers and you can change the background color or texture by clicking on the “Fill” button and filling with a color or a pattern. You can then adjust the opacity of this layer if you want.

When you have the button or graphic you want, just choose “File|Save A Copy As” and save it as a JPG or GIF.

Now that you have your cutout template, what can you do with it? Well, you can make it bigger or smaller by using the resize feature (Image|Resize – Use the “Smart Size” setting, it works best for this purpose). You can fill the background with any color or pattern you like, just click on the background tab in the layers and fill. You can adjust the opacity of the shadow in the cutout and the white drop shadow by using the Opacity sliders. Once you have the graphic you want, choose File|Save a Copy As and save as a jpg or gif. The following are some examples of this template:

Filled with a light grained pattern, opacity of cutout lowered.

Resized to 250×114, filled with wood pattern, opacity of cutout kept dark and opacity of white shadow lowered, Eye Candy inner bevel applied to flattened image.

Same technique used on text to create a cutout effect. The cutout was only offset by 2 and the blur lowered. I then lowered the opacity of the cutout.

Since I quite often receive e-mail from people asking for some of the fonts I use on my pages, I decided to post some freeware fonts I have found on the internet. To the best of my knowledge all these fonts are freeware. If you know of any fonts listed here that are not freeware, let me know and I will remove them from the collection. Due to space limitations, I have placed all the fonts in one zip file for download. To download the fonts, just click on the download button at the bottom of the page. Also, for installation instructions, see bottom of page.

   919 kb

Download Instructions and Font Tips

Windows 95:

For Windows 95 users, you can unzip the fonts directly into the Windows/Fonts folder and they will be installed.

For Windows users, you will need to unzip the fonts into a subdirectory (you might want to create one called “Fonts”, then use the Windows Font Install utility to install the fonts from that directory.

PS Fonts: If you have Post Script fonts installed (via Adobe Type Manager), you will need to do an adjustment in PSP to keep the program from crashing when you use these fonts. Open Adobe Type Manager, then go to Settings|Advanced and uncheck Screen Font Smoothing.

Font Management Tips: It is very easy to become addicted to fonts! But, the more fonts you install on your system the slower your system becomes. For Windows 95 users, you can move your fonts to a separate folder (perhaps you might want to call it “Fonts1”. Then, when you want to use a font, double click on the font from Explorer. This will bring up the “Font View” window. You can then minimize the window (don’t put the font away by clicking on the “x”!). As long as that font is open on your system, Paint Shop Pro will find it and load it with all the other fonts. I keep all my dingbat fonts in a folder called “Fonts_Dingbats”, and just bring them up when I need them. If you are really organized, you can create folders for font types (i.e. Fonts_Fancy, Fonts_Casual, Fonts_Serif’s, etc.) Then get a font viewer utility and print out a catalog of all your fonts in the folders. When you need a font, just open it up, open PSP and have a ball! There is a downside to this system, though. When you move a font to a regular windows folder, you no longer have the font name available to you. All you see is the font name.

A better alternative is to buy a font management program like Typograf (http://www.neuber.com/typograph/index.html). This inexpensive program will make your life much easier. When you open a folder of fonts in Typograf, they are all then available to any Windows program. You can categorize your fonts, view them (a really handy view for dingbats is to view them on the keyboard) and you can print your fonts (again, for dingbat fans, you can print your fonts in keyboard layout).

Wow. I had no idea. Ever since I put up my new opening page, I have been inundated with e-mail saying “how’d you do that”? So, here it is folks.

First of all, this effect looks best with a fine grained pattern. You can do it with a colored background, but it is not quite as dramatic. Following are examples of a solid color background vs. patterned backgrounds.

If you choose to use a solid color background, don’t rely on setting the background color in your html and matching the color. Make a 50×50 tile of the color you are going to use and save that as your background tile.

The first thing you need to do is to come up with your background tile. Following are the two patterns I use. Both are gray and can easily be colorized.

The first pattern is fine grained, the second is a little heavier grain. If you like the second pattern, but think the grain is too heavy, try resampling it down (try to 80×80). This smooths out the grains quite a bit.

So you have decided on your tile, but you don’t want it to be gray. Following are some samples of colored tiles and instructions on how to colorize them

To colorize the tile:

1. Make a copy of the original tile and work on the copy.
2. Right click on the layer button and choose “Promote to Layer”. Rename “Grain”
3. Add a new layer and drag it under the “Grain” layer, name it “Background”. Fill with white.
4. Add a new layer to the tile and call it “Color” and make sure it is on top of the “Grain” layer.
5. Flood fill the “Color” layer with a medium color.
6. Lower the Opacity of the “Color” layer with the slider until you get the color you want.
7. Lower the Opacity on the “Grain” layer if necessary.
8. Save this template as a “psp” file so you can change the color without having to recreate the tile. To change the color, just flood fill the color layer with a new color.
9. Save the tile again as a gif or jpg.

If you haven’t done it already, download the Button/Button Font. Click here to view the font. You can download it below.

Cutout graphics all use the same formula as follows:

1. Create a new graphic large enough to hold your text/font, etc.
2. Flood fill the background layer with your pattern or a solid color.
3. Add three more new layers and call them “Cutout”, “Shadow” and “Text”.
4. On the Cutout layer, place your text with “floating” unchecked (PSP 5) or the Selection box checked under “Create As” (PSP 6) on the text tool. This will place just a selection of the text, not a text color.
5. Apply cutout filter (Image|Effects|Cutout):
   • Fill Interior with Color unchecked
   • Shadow Color Black
   • Opacity 100%
   • Blur 4-8
   • Vertical/Horizontal 2,2 to 4,4

   You now have a black “outline” of the top left part of your text.

6. Don’t deselect text and click on the “Shadow” layer.
7. Apply Drop Shadow (Image|Effects|Drop Shadow):
   • Color White
   • Opacity 100%
   • Blur 0-1
   • Offset 1,1

   You now have a white outline that defines the lower right portion of your text. If you want the cutout effect to show the background, stop at this point. If you want to add a color to your text, proceed to the next step.

8. With the selection still active, click on the “Text” layer. Flood fill the selection with the color you want your text to be.
9. Save your graphic as a “psp” file, then save again as a gif or jpg. By saving the original as a “psp” file (thus preserving the layers), you can redecorate any time you want by just filling the background layer with a new pattern or color. Your cutout always stays the same.

The cutout application in step 6 defines your image and the white drop shadow in step 8 defines the lower portion of the image. Without the white drop shadow, the lower part is not distinct from the background. Sometimes no blur on the white drop shadow works better..experiment! The above settings can, obviously be adjusted to suit your personal taste.

Header Graphic

This header graphic was created by placing the text in a script font, applying the cutout (in this case, the offset was 2), then the white drop shadow.

Horizontal Rules

The horizontal rule above was created by creating a new graphic 500×10 pixels with the layers outlined above. I then selected an area 495×8 pixels on the cutout layer and applied the cutout filter at offset 1,1 with a blur of 4, then the drop shadow as outlined above.

The nice thing about this horizontal line is that you can stretch it without distorting it. On this page it is stretched to 600 pixels wide.

The two horizontal rules above were created using Davy’s Dingbats “rs” with a space between repeated 6 times, the top is dark gray text the bottom dark blue text (floating checked) with a drop white drop shadow maximum opacity, no blur on both. Place the text on the “Cutout” layer and the shadow on the “Shadow” layer.

Decorations, Bullets, Buttons & Backgrounds

Following are some examples of how you can use dingbat fonts to create decorations and bullets for your pages:

Decorations and Bullets

Davys Dingbats	Davys color fill	Classified	Classified
Food	Food	Pointers	Chancery

You can download these fonts by clicking on the font you want below:

Button Button
Davys Dingbats
Classified
Food
Pointers
Chancery Ornaments

Buttons

Following is an example of how you can create buttons that look great with this background:

The buttons on the left would look great along the left border of a web page. Click here to see an example of the buttons used with the background graphic below.
To create the first button:

1. Create a new graphic with the Background layer, a Fill layer and a Shadow layer.
2. Fill the “Fill” layer with your pattern.
3. On this layer, outline the shape of your button.
4. Choose Selections|Promote to Layer (this will promote just the filled button to a layer of its own).
5. Lower the contrast (Colors|Adjust Brightness & Contrast) to a level you like.
6. Click on the Shadow layer without deselecting.
7. Apply a drop shadow (mine was black, offset 3,3, Blur 6, Opacity 100%). Adjust the opacity to the level you like.
8. Save as a “psp” file and use as a template for future buttons. Just fill the “Fill” layer with a new pattern and save again.

To create the second button:

1. Create a new graphic with a Background, Fill, Cutout and Shadow layer.
2. Fill the “Fill” layer with your pattern.
3. Select your button shape on the Cutout layer.
4. Add the Cutout as outlined above.
5. Click on the Shadow layer and add a drop shadow as outlined above.
6. Save as a “psp” file and use as a template for future buttons. Just fill the “Fill” layer with a new pattern and save again.

The bottom two buttons were created the same as the first two buttons, but using “!” in the Button font and a white drop shadow applied after the cutout on the cutout button.

Backgrounds

The following backgrounds was created using the cutout technique. Click on the graphic to see it tiled as a background.

1. Create a new graphic 200×100.
2. Add new layers for Fill, Cutout and Shadow.
3. Fill the “Fill” layer with pattern.
4. On the cutout layer, at about 130,0 pixels in (look at the coordinates in the lower left corner) draw a rectangular line down the graphic about 5 pixels wide. Add a cutout set to 2,2 as outlined above.
5. On the Shadow layer, add a right drop shadow as outlined above.
6. Now you need to cut out the middle part of this graphic since the cutout and drop shadow effect the edges. Just use the marquee tool to select from about 10 pixels down from the top and up from the bottom.
7. When you have your selection, crop your graphic (Image|Crop to Selection).
8. Save this as a “psp” template.
9. To complete the background tile, flatten all layers (Layers|Merge|Merge All).
10. Add a right border of 900 pixels with background set to white.
11. Select the white portion of the background and fill with pattern.
12. Save as a gif or jpg.

Creating a New File

When you create a new file in Paint Shop Pro, you must choose 16 million colors for most of the filters to work. I set my default to Background Color: White and Image Type: 16 million colors. If you save a file as a gif, when you open it again, the image will no longer be 16 million colors . To fix this, just chose Colors|Increase Color Depth and choose 16 million colors again (or if you’re smart, you will have this option on your toolbar!).

Note: You should always work in 16 million colors mode. Most of PSP’s advanced features such as filters, layers, masks and antialiasing don’t work in 256 color mode. If you find a feature is “greyed out”, you know you are working in 256 color mode and you need to bump the colors up to 16 million.

The size of your new graphic is up to you. I usually create a new file bigger than I think I will need to give me working room, then crop the image when I am done (Image|Crop to Selection).

Edit|Clear – Shortcut: hit the Delete Key

Once you have created an image, if you don’t like it and want to start over, this combination makes it very easy to do. Just be sure you have the background color set to what you want the cleared file’s canvas to be. This is also a trick for filling an image with a background color. Setting the background color then choosing Edit|Clear is a lot faster and more efficient than choosing the flood fill tool and using it. If you choose Edit|Clear when working on the base layer, it clears the layer and fills with background color. If you use Edit|Clear while working on a layer, it just clears the layer, it doesn’t fill the layer with the background color.

Tool Palette

The tools on the left tool palette are the essence of the program. If you learn to use these tools effectively, you will be able to create great graphics. The tool palette leads at the left of your workspace by default. You can drag the tool palette and dock it anywhere on your workspace. You can also remove the tool palette from your screen, and then bring it back by pressing the “p” key on the keyboard. This is a handy feature when you have a small monitor and you want to clear your work space to give you more room when you are working on an image.

• Arrow – This tool is most useful when you have an image enlarged to work on a portion of the image. If you click on your image with the arrow tool and hold down the left mouse button, the cursor turns into a hand. Holding down the left mouse button, you can then drag your picture to move a new portion into the window.
• Zoom – The zoom tool is used to zoom in and out on a graphic. Clicking on a graphic with the left mouse button zooms in, with the left mouse button zooms out.
• Deform Tool – The Deform tool allows you to expand and contract or rotate and skew an image or a selection. To use this tool, always work on a layer with the image you want to distort the only image on the layer. Click here for a Deform tool tutorial.
• Crop Tool – This Crop tool is fairly straight forward. Just click on the tool, draw a selection on a graphic, then double click on the selection. Instant crop. I have to admit, though, that I still use the Image|Crop method most since you can use different selecting techniques with this crop method. The crop tool also can be used to designate a specific size crop that you can then reuse on different graphics. To do this, double click on the crop tool to bring up the coordinates box. The crop tool will remember the last coordinates you entered.
• Mover Tool – This tool is one of my favorites. I move my selections frequently (either image selections or text selections) using this tool. All you need to do is to make a selection, right click on the selection with this tool and you can then drag your selection (rather than the underlying graphic) to a new position.
• Selecton Tool – This selection tool allows you to make rectangular, square, ellipse and circular selections. Paint Shop Pro 6 and 7 also includes all the selections relating to the shapes in the Shapes Tool). You can pre-determine the size of square and rectangular selections by double clicking on the tool and entering coordinates. When you make a circular or ellipse selection, always have “antialias” checked. This smoothes the edges. Don’t have “antialias” selected when you make rectangular and square selections. Warning! If you crop a selection with antialias on, you will end up with spare pixels around the edges. When you use the selection tool to select an image on a transparent layer, you can “snap” the selection outline to the graphic by clicking inside the selection with the selection tool active. You can move a selected object by clicking inside the selection and dragging the object. You can also move the selected object one pixel at a time by Shift-Clicking on the object and then while holding down the Shift key, hitting an arrow key in any direction. This method of moving a selection is very handy for precise aligning.
• Freehand Tool – This tool is commonly called the “Lasoo” tool. With it you can make irregular selections. A new feature of this tool in 5.0 is the “Smart Edge” option. With this option selected, you can click along the edge of something and the selection will snap to the nearest color. This tool is very useful for making preliminary selections (such as cutting a person out of a picture). You probably don’t want to have “antialias” checked when you make your selection since you can “feather” your selection later for the same effect.
• Magic Wand – This is another very handy tool. When you click on a solid color with this tool, that color will be selected. If you hold down the shift key and click on another part of a graphic, that part is added to the selection. Holding down the control key and clicking on a selection removes it from the selection. The controls for this tool are on the Control Palette. The Tolerance setting on this tool determines how many pixels of a color will be selected. Use low tolerance settings for solid colors and higher settings for blended colors. If you are selecting a solid color that exists in different parts of the graphic, you can, after your first color selection with the magic wand, then choose Selections>Modify>Select Similar as a shortcut to selection all of a certain color in a graphic.
• Dropper Tool – This tool is commonly called the “Eye Dropper“. If you left click on a color with this tool, you will set the foreground color whereas a right click sets the background color. A hint for using this tool. Sometimes it works best to zoom in on a graphic to choose a color.
• Paint Brushes – The paint brush tools in PSP have many features. You can adjust the size of the brush, the opacity, the texture and the shape. The manual has an excellent description of how to use the paint tools. A hint: You can create your own paint brushes by creating a graphic (you can even use fonts). To create your own brush, have a black graphic selected, click on the Paint Brush tool, then on the “Brush Tip” tab on the Control Palette. Click on the “Brush Options” button, then click “Custom”. When the custom window pops up, click on Create. You can edit your custom brushes by clicking on the “Edit” button. The “step” entry means how far apart each “brush” stroke will be when you drag the brush. Set to 100, each brush stroke will be separate. You can also use Photoshop brushes in Paint Shop Pro. For a more complete tutorial on using this tool, click here.
• Clone Brush – This tool can be a lot of fun and is very useful. It allows you to clone part of a graphic to a new position. I use it frequently to “clone” skin on bright spots on people’s faces or to replace reflections. Another common use for this tool is to create a “seamless tile”. The manual has a very good section on using the Clone Brush.
• Color Replacer – This tool allows you to replace one color in a graphic with another color. To accomplish this, set the foreground color to the color you want to replace and the background color to the replacement color. Then dragging with the right mouse button replaces the foreground color with the background color and double clicking with the right mouse button replaces all instances of the foreground with the background. To reverse the process, left click and drag or left double-click.
• Retouch Tool – This tool is used to apply photo retouching effects to an image. It is a very complicated tool. The manual has a very good explanation of all its uses and features.
• Eraser Tool – This tool essentially erases all color down to the base image. Using the tool on the original layer (usually called “background” when you open a new graphic) will replace the erased portion with the background color. Using the tool on a graphic on a layer will remove the graphic down to the transparent layer. I use this tool a lot to touch up selections I have pasted as a new layer. If you zoom in on your image and keep your tip fairly small, you can successfully remove stray pixels easily with this tool. Another benefit to removing stray pixels with the eraser tool is that it smoothes the edges.
• Picture Tube – This tool is used with premade tubes. With it you can scatter tube pictures over a graphic. You can make the tube images larger and smaller with the “scale” slider on the Control Palette. Keep in mind, though, that scaling an image larger will dither the image the same way resizing an imager larger will. Tubes are a lot of fun and I will be providing links to tubes sites soon.
• Air Brush – This tool is quite similar to the Paint Brush tool in that it is very complex and has a lot of settings. The manual outlines the use and setting for this tool very well. For a more complete tutorial on using this tool, click here
• Flood Fill – This is the one tool you will probably use the most. It is used to flood fill a selection with a solid color, a pattern and various versions of color fills using the background and foreground colors in combination. The settings are on the Control Palette. I use the Sunbrust Gradient to make spheres and the Linear gradient to make buttons. To use the “pattern” feature, have a seamless tile pattern or texture open on the desktop. Set the flood fill to Pattern, then click on the “Options” button. Then where it says “New Pattern Source”, choose the tile you have open. For a more complete tutorial on using this tool, click here.
• Text Tool – The text tool is used to place text on a graphic. I cover the use of this tool in my “Text” tutorial. A couple of important things to remember about this tool. First, always have “anti alias” checked, otherwise your text will have jagged edges. The second is that your text will be centered from where you have the cross-hairs when you place your text (i.e. if you click at 50×50, half your word will be to the left of that coordinate and half will be to the right. This is useful to know when placing text to help your alignment on the graphic. But, you can always move your text by left clicking on it and dragging it to a new position. Right clicking outside your text selection will place your text.
• Line Tool – This tool is used to draw lines. It is most useful in drawing straight lines, since angled lines end up pretty ragged. To draw a straigt line, hold down the shift key while dragging the mouse. You can set the Line Type and Width on the Control Palette. I use the straight line tool a lot to clean up straight edges on selections.
• Shapes Tool – This tool is used to create outline or filled shapes. It is useful for creating quick filled circles, squares, etc. It is also useful for creating outline masks for dual beveled buttons.

The view menu allows you access to many Paint Shop Pro features that will make your work easier and more efficient. The main features on this menu are View options such as full screen and zoom and alignment assists such as grids and guides. The following graphic illustrates the menu choices. This menu also contains a feature new to Paint Shop Pro 7, Preview in Web Browser

There are several viewing options available from the menu. If you are menu oriented person, this is where you will want to invoke these commands. But, we feel that these commands are best invoked by keyboard shortcuts or through the use of the Zoom tool.

Full Screen Edit

Shortcut: Shift A

This command turns off the top menu bar on Paint Shop Pro and allows you a larger viewing area for your graphic. This command works best by using the keyboard shortcut since the “Shift A” toggles you into Full Screen mode and toggles you back. When you go into full screen mode, the menu toolbar disappears. You can still access the menu toolbar by placing your cursor at the top of the screen, but since you can’t see the menu toolbar bar, this can be confusing.

Full Screen Preview

Shortcut: (Shift-Ctrl) A

This command turns off all the menus and toolbars and centers your graphic on a black background. It is very handy for assessing a graphic without all the clutter of the toolbars and menus. To restore your toolbars and menus, simply hit (Esc).

Instant access to Full Screen Mode – If you find that you are frequently working in Full Screen mode, place the icon on your customized toolbar.

Normal Viewing

Shortcut: (Ctrl-Alt) N

This command will return your graphic to normal viewing mode (1:1 ratio). This is very handy when you have zoomed in on a graphic numerous times and want to return to normal viewing. This is the most direct route to normal viewing. Again, this is another candidate for placing the icon for the feature on your customized toolbar.

Zoom Out/Zoom In

You will probably never use these menu items since using the Zoom tool is much easier and more intuitive. If you want to Zoom in 1 time, just choose the Zoom tool and left click on the graphic once. If you want to zoom back, right click with the Zoom tool.

Preview in Web Browser

This feature allows you to preview your graphic in a web browser of your choice. Before you can use this feature, you need to tell Paint Shop Pro what web browsers you wish to use. To configure the web browsers, click on the “Edit Web Browser” button on the Preview in Web Browser tool palette as illustrated in the following graphic. To preview your graphics:

• Highlight the formats you want to preview (ignore the “bmp” format since you can’t view a “bmp” in a web browser and it will end up with a “broken graphic”.
• Choose the web browser(s).
• Enter a size or leave the default size set. Note: If you resize your graphic in a manner that is not proportionate to the original graphic size, the graphic will look distorted.
• Click on the Preview button.
• Set the Optimizer levels as the Optimizers pop up and then click OK.

When your graphic is rendered in the browser, it will display also display the graphic size in Kbytes, download time for 28.8 and 56.6 Kbps modems, and the number of colors used in the graphic.

Rulers

The settings for View>Rulers are set in File>Preferences>General Program Preferences>Rulers and Units (See Customizing PSP).

Rulers can be set to pixels, inches or centimeters. Rulers are very useful when you wish to cut an accurate portion out of a graphic. The following graphic demonstrates the use of rulers to create an accurate 200×100 pixel selection area starting at 50 pixels.

Rulers must be active on your image to use the guidelines feature since the guidelines are accessed from the ruler.

Grid

Shortcut: (Ctrl-Alt) G

The settings for the Grid option are configured in File>Preferences>General Program Preferences>Rulers and Units (See Customizing PSP). This is another very handy command in Paint Shop Pro. When you are attempting to line up parts of an image, the grid comes in very handy. It is also an invaluable tool for creating images through combining different shapes. The following graphic demonstrates how you can use the grids to line up shapes (Figure on left) to create a shape to use as a template for a button (Figure on right).

If you save a graphic in PSP format, the currently active grid settings will be saved with the document.

Change Grid and Guide Properties

This menu option gives you access to the Grid and Guide Properties options as illustrated in the following graphic. The shortcut to this Options box is the same as the shortcut outlined in View>Grid.

• Grids – Grids can be set in units of Pixels, Centimeters or Inches. The Horizontal and Vertical spacing sets the size of each grid box. The line color sets the color of the grid lines.
• Guides – To remove all guides present in a graphic, toggle the Remove all guides box. To set a color for the guides that id different from the default color, toggle the Set color of all Guides box, then choose the alternate color from the color picker.
• Snap – Toggling an option in the Snap dialog will determine where on the guidelines the selection will align itself. Snap influence in pixels determines the distance in pixels from a grid/guideline your selection will be when the “snap” occurs. The Snap to Grid and Snap to Guide allows you to toggle on and off the snap to behavior.

View Guides

The View Guides menu option allows you to set guidelines on your graphic. Guidelines are set by placing the cursor in the ruler, then when the cursor turns into a crosshair, dragging a guideline onto the graphic. Guidelines can be moved by placing the cursor over a currently placed guideline in the ruler (the cursor will turn into a white filled cross hair) and dragging the guideline.

When you are placing guidelines on a graphic, it is a good idea to have the arrow key toggled. This will give you access to right-clicking to bring up the “Change Grid and Guide Properties” dialog box.

Snap to Grid

If you have “View Grid” toggled on, you will be able to toggle on the “snap to grid” option. If you have not toggled View Grid, this option will be greyed out on the menu. Toggling Snap to Grid activates the “snap” behavior.

Snap to Guides

If you have “View Guides” toggled on, you will be able to toggle on the “snap to guide” option. If you have not toggled View Guides, this option will be greyed out on the menu. Toggling Snap to Guides activates the “snap” behavior.

Toolbars

This option allows you to turn on and off the toolbars you want to have available to you on your workspace. It also allows you to set the size of the icons and the style of the toolbars. This is also where you can configure Automatic Rollups (See Workspace for further information on Rollups).

If you have a small monitor and you turn on Large Icons, you may think that some of your tools on the left toolbar have disappeared. They have not disappeared, they are just off the screen. If your monitor is too small, you may not be able to use this option as it will cause some of your tools to be inaccessible. When you click on the “Customize” button on the Toolbar Dialog Box with the Toolbar option toggled, you will have the option of choosing icons to add to your main toolbar. Customizing your toolbar is discussed in detail in the Customizing PSP tutorial.

Curing the Jaggies with Colors>Adjust>Highlight, Midtone and Shadow

This method works well with enlarged black and white graphics. When you enlarge a graphic, the edges become very pixelated (or get the “jaggies”). This is how to cure the jaggies from an enlarged image.

Save the following “remote” graphic (downloaded from Qvicker’s wonderful site).

1. Open the “shape.gif” image.
2. Up the colors to 16 million (Colors>Increase Color Depth).
3. Enlarge the image by 200% (Image>Resize).
4. Apply a Gaussian Blur of 4.
5. Apply Colors>Adjust>Highlight, Midtone and Shadow set to Shadow -100; Midtone -100, Highlight 100.
6. Repeat step 5 above one more time.

This method may need some adjustment of the Gaussian blur depending on jagged your edges are. The point is to blur the edges until they are very smooth. You may also only need to apply the color adjustment once.

Curing the Jaggies with Curves

Before

After

How often have you found a really nice piece of clip art that suffered from the “jaggies” or where the lines were too thin for your purposes. Well, PSP 6 has given us a great new feature for “curing the jaggies”. To get started, download the “before” picture above.

1. Open the “jag_before.gif” graphic. Up the colors to 16 million (Colors>Increase Color Depth).
2. Apply a gaussian blur (Image>Blur>Gaussian Blur) to your image. The larger the blur application, the thicker the lines will ge. I applied a Gaussian blur of .90 to this image.
3. Right click on the layer in the layers palette and choose New Adjustment Layer>Curves. Adjust the curve downward until you see the lines sharpen. The following shows the settings I used for the curve and the results of the curve adjustment:
4. Ok, that’s a lot better, but it still looks slightly blurred. To fix this, merge all layers (Layers>Merge>Flatten). Then apply the Sharpen filter (Image>Sharpen) as needed. I applied Image>Sharpen>Sharpen More once to adjust this graphic.

Thats all there is to cleaning up the jaggies. Obviously each graphic will require a different application of the Gaussian Blur and Curve Adjustment.