• Graphics Index
• Related Topics:
  Creating a Text Graphic

Adding Drop Shadows to Text

The drop shadow is a simple and effective way to add impact to a text graphic. Used on a contrasting background, it gives a three-dimensional effect to your page.

Paint Shop Pro includes the drop shadow as on of its image effects, making the job of adding a drop shadow to an image really easy.

The following tutorial deals with adding drop shadows to text, but you can add drop shadows to other objects too...

The step-by-step instructions that follow apply to Paint Shop Pro but the techniques can be applied to any good graphics program.

Step 1: Create a New Image

Start by deciding how big you want your finished image to be. It is always preferable to create an image at its final size. Avoid having to resize the image after applying special effects. That way you will have control over exactly how the image will look on your page.

Set the colour palette's background colour to the colour of your page (or the dominant colour of your page's background image).

Choose File > New to open the New Image dialog box and enter the dimensions of your image. Set the Background Color to Background Color and Image Type to 16.7 Million Colors. Click OK to create a new, empty image...

Step 2: Insert the Text

Use the Text Tool to add your text. See Creating a Text Graphic to find out how to do this.

Before you type your text in the Text Entry dialog box, make sure to select the Floating and Antialias options, and choose a font, size and colour for your text.

Click OK to insert the text into your image then, if necessary, drag the text into the correct position. To do this move the cursor over the text until it changes to the Mover Cursor, then drag the text to where you want it.

Text Insert Cursor
Mover Cursor

If you accidentally click when the Text Insert cursor is visible the Text Entry dialog box will open again. Don't panic! Just click Cancel to close it. Also, remember you can use Edit > Undo (or click the Undo button, or type CTRL+Z) if you foul up.

You'll notice that the text is selected, indicated by a dashed line around it. Don't de-select it! Move on to the next step...

Note: In this example I have used the font Mirisch and chosen the same colour that I have used elsewhere on this site (RGB:153,153,255 Hex:9999FF).

Step 3: Add the Drop Shadow

Choose Image > Effects > Drop Shadow to open the Drop Shadow dialog box. In the illustration below, you can click on the different controls to take you directly to a description further down the page. (Tip)

To illustrate the degree of control you have, check out the examples below. Point at the sample images to see details of the control settings. Here is the original image...

The font is Goudy Stout at 60pt coloured R153 G153 B255.

Color: A shadow need not be black (or a shade of grey). Click the coloured rectangle to open the Color dialog box. This allows you to choose the colour of the shadow itself. In these examples the first has the usual black shadow (R0 G0 B0); the second has a shadow the same colour as the text (R153 G153 B255); the others use complementary or contrasting colours...

 back to top

Opacity: This setting controls the depth of the shadow's colour from 0 to 100. The smaller the number the paler the shadow. In each of these examples the shadow is the same colour (black R0 G0 B0). Only the opacity has been changed...

 back to top

Blur: This is used to adjust the hardness of the shadow's edge. The scale ranges from 0 to 100. The setting needed to achieve the same visual effect changes according to the size of your text. The larger the text, the higher the setting required.

 back to top

Offset: Offset controls the position of the shadow in relation to the text. There are two offset sliders, Vertical and Horizontal. The scales range from -100 to +100, the numbers referring to the distance in pixels between text and shadow. Negative settings move the shadow to the left and above, positive settings move it to the right and below. Again, larger text needs a relatively higher setting. Increasing the offset also accentuates the 3D effect.

 back to top

Zoom: The zoom control is used to change the magnification of your image in the preview window, useful for fine-tuning the settings. The [+] and [-] buttons increase and decrease the magnification of the preview. The small Mover button in the middle is used for positioning the preview area at high magnification. Click the button then drag - you'll soon find out how it works! Alternatively, you can point at the preview window itself and drag to reposition the image.

 back to top

Of course, you can combine the settings any way you choose. This example combines a shadow colour of R255 G153 B255, opacity 100, blur 0, offset V +7 H +11...

When you are satisfied with the settings click OK to close the dialog box...

Your image now has a drop shadow but is still selected (as indicated by the dotted line).

Web Design Tip
In case you are wondering how the click-on-a-bit-of-the-picture thing works... It's an image map, something really easy to create with FrontPage (although it's just HTML and you don't need any special tools to create one).

Step 4: Save the Image

Almost done! Deselect the text by choosing Selections > Select None.

All that remains is to save the image. You have some decisions to make!

Take a look at the image above. It doesn't look too good. That's because, to economise on file size and hence download time, I save most of the screenshots for my tutorials as GIFs. I could have saved it as a JPG but the file would have been much bigger.

Compare these two images. Both were saved from the same original image I created in Paint Shop Pro and which appears in the screenshots in this tutorial. This is the finished product...

The image above was saved as a GIF using Paint Shop Pro's GIF Export tool set for the best possible result. See how grainy the drop shadow appears, and despite antialiasing the text the edges of some letters look quite jagged (the top of the 'F' for example). The problem is that GIFs can't handle continuous tones very well, and they are restricted to a maximum of 256 colours. However the file size is just 4.5 KB. Compare it with the image below...

This image was created as a JPG using the JPG Export tool set for the best result. A dramatic improvement, but the file size has increased to 10 KB.

So, why not use JPGs all the time? For one thing, a JPG can't have a transparent background.

Let's assume you' re going to save the file as a JPG. You have two choices.

1. Choose File > Save to open the Save As dialog box. Open the Save as type list and choose JPEG - JFIF Compliant. Click the Options button and select a compression ratio. Click OK to close the Save Options dialog box, type a name for your file, and click Save. Alternatively...

2. My preferred method is to use the JPG Export tool. It lets you see the effect of your chosen compression level so that you can achieve a balance between image quality and download time. Also, because it leaves the original image alone and exports a copy, you can save several different versions if you want. Choose File > Export > JPEG File... to open the JPEG Saver. Make your choices then click OK to open the Save As dialog box. Enter a name for your file then click Save.

Job done!