Creating a Simple Text Graphic
This tutorial demonstrates the basic tools needed to create a graphical
representation of text. The step-by-step instructions apply to Paint Shop
Pro 6 but you can adapt the techniques to most other graphics
programs. If you haven't already done so, you might like to
read the associated article on text
Follow the step-by-step instructions to create a
simple image like this...
When you have mastered this technique you can go on to
learn how to create more complex text graphics, and apply special
effects to your graphics such as...
Step 1: Create the Image
Use the Active Colors Panel to set the background colour to that
of your web page (if you are using a background image, choose something
close to its dominant colour). Set the foreground colour to the colour you
want your text to be.
Select File > New to open the New Image dialog.
Set an appropriate size. Here I have chosen 200 pixels wide x 100 pixels
high. Set Background color to Background Color and Image
type to 16.7 Million Colors. (Click the thumbnail below to see
the full-size image).
Click OK to create a new blank image...
Step 2: Add the Text
Select the Text tool then point and click on the centre of your
Use the Text Entry dialog to enter create your text. Before
typing your text in the lower section of the dialog box choose a font and
point size. Here I used Braggadocio at 36pt. (Click the thumbnail below to
see the full-size image).
Make sure that the Floating and Antialias options are
chosen. Floating allows you to accurately position your text. Antialias
smoothes the edges of the letters and is normally required when text is
larger than about 18pt. (Read more about
Click OK to place your text on the image.
Step 3: Position the Text
At this point you will probably want to accurately position your text.
I'm going to move the text to the upper left corner so that I can easily
remove the extra white space that I don't need.
Position the cursor over the text so that it changes to the Mover
tool. Now you can drag your text to the desired position.
When you have the text where you want it choose Selections >
Select None to deselect the text and "flatten" the
Step 4: Crop the Image
Now to remove the parts of the image that aren't required. Select the Selection
Click the Tool Options button to open the Tool Options window
and set the Selection type to Rectangle and Feather to
You can crop an image by using the Crop tool to drag a rectangle around
the area you that you want to keep then cropping to the selection. As I
had already moved the text into one corner of the image, I need only crop
two sides. To do this, I placed the cursor where I wanted to start the
...then dragged to the top left corner of the image.
||Note: To crop to a
specific image size, check the numbers at the left end of the status
bar. I usually like to crop to a round number - it's easier to
remember if you need to...
Don't worry if you get it wrong first time. Just click somewhere
outside the selection and try again.
Finally choose Image > Crop to Selection.
Step 5: Save the File
This sort of image is best saved as a GIF file, because it contains large blocks of solid colour and this format allows us to make the background transparent.
You can do this manually if you wish, but Paint Shop Pro has an excellent GIF Export tool to help you create the best possible image.
Choose File > Export > Transparent Gif... to open the Transparent GIF Saver dialog. As this is a simple image you can use the Wizard. Click the Use Wizard button.
|Use Wizard Button
Work through the Wizard as follows...
Step 1: Check that the correct colour for transparency is shown. The Wizard usually selects the background colour (in this example white), but if it isn't right you can drag the Wizard dialog out of the way and click on a suitable part of your image. Remember you can only make one colour transparent. Alternatively, click on the Wizard's colour sample to open the
Make sure that Convert matching colors to transparent is checked.
Step 2: This step asks you to confirm the colour of the background, in case the colour you want to make transparent isn't the background
Step 3: Select Yes, use Web-safe colors only to prevent browsers changing the arrearance of the image.
Step 4: This allows you to choose between high quality (and a larger file) and small file size (at the cost of quality). As our image is fairly small with few colours, you can afford to choose
Better Image Quality.
Step 5: Check out the final appearance of you image. The chequered area indicates the transparent parts of the image, where the background colour or image of your web page will show through. You can zoom in and inspect the detail. If anything isn't right you can step back through the wizard and make corrections.
(Click the thumbnail below to see the full-size image).
Finally click Finish and choose a name and location for your image.
After the Save As dialog disappears, you may be confused by the fact that your original (pre-Wizard) image is still on the screen. This is because you chose to export a copy of the image rather than save the original yourself. Sometimes you will want to save this original image separately, but you don't need to here. Close it without saving.