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