Textured Text

One way of adding interest to text on your web site is to add a background image into the text itself creating a "textured text" effect. This is easy to do in Paintshop Pro. All you need is an appropriate "chunky" font and a suitable image.

First let's create the text. Open Paintshop Pro and select New from the File menu. Create a new image of say 600 x 200 pixels using 24 bit colour and with a background colour of white. Also set your Paintshop Pro background colour to white and the foreground colour to black. We are going to change these colours later.

Select the text tool from the toolbar and click inside the newly created image. Make sure that the AntiAliased and Floating check boxes are selected and set your font size to 120 by typing in the size box (the drop down list doesn't go that high).

Now select a suitable "chunky" font, one with plenty of width to the letters, you might also set the text bold to make it even chunkier. Some fonts that appeared suitably chunky on my system were Dayton, Futura XBlk BT, Palent, Poster Bondini BT, Roland, and Vivian. Of course your list of fonts will probably be different, the important thing is to choose an appropriate one. I chose Vivian.

Type your required text (keep it fairly short) in the Enter Text Here box and click on OK. Move the text to the centre of the image and then click on the image to deselect the text. The image should now look something like this (only bigger and with your text instead of mine).

the chunky text image

Next click on the double arrow next to the background and foreground colours to swap them the other way around and then select Copy from the Edit menu to take a copy of the complete image.

Next we need to open the image that we want to use as the texture for our text. Once you have the image open use the Resample or Resize option of the Image menu as needed to size the image appropriately.

pick a suitable image

Select Paste as Transparent Selection from the Edit menu (or press Ctrl+Shift+E on the keyboard) to paste the copied text image into your selected texture image and drag the selection until the required part of the image shows through the text. Once you have it positioned where you want it, click on the image to deselect it.

paste the text image

Now click on the selection tool on the toolbar and once again select the area of your text (this time picking up the textured background as part of the selection). Select Copy from the Edit menu to copy the selected area and then select Paste as new Image (or press Ctrl-V on the keyboard) to create your final text image.

All that remains to be done now is to save the image in the desired format. If you require a transparent background then you will first need to reduce the number of colours to 255, swap the foreground and background colours back, and save the image as a version 89a GIF file (go into options to specify that the background should be transparent).

Your textured text is now ready for use.

the final result


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow