• Graphics Index
• Related Topics:
  Fonts on the Web
  Retouching Antialiased Text

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 graphics.

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...

drop shadow	cutout

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 new image.

Text Tool

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 antialiasing...)

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 image.

Step 4: Crop the Image

Now to remove the parts of the image that aren't required. Select the Selection tool.

Selection tool
Tool options

Click the Tool Options button to open the Tool Options window and set the Selection type to Rectangle and Feather to 0.

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 selection...

...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 Colour Picker.

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 colour.

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.

Job done!