Paddy Power

Site map

spacer

Adding drop shadows to images

Drop shadow world domination

It seems that everywhere you look nowadays, if there's an image or some text, someone has drop shadowed it!. I've used it in a limited fashion on the site, for maps and the diver image on the home page.

I haven't bothered adding a drop shadow to text, as personally I've never seen text rise up from the page to leave a shadow. Well, there was that time at the Glastonbury Festival, but that was chemically enhanced I suspect wink

Still, each to his own. If you want to drop shadow text, there's a good tutorial called 'Floating Text (Drop Shadows)' that can be found at Photo Sector.

The drop shadow GIMP script-fu

This is a standard addition to the default GIMP setup. If it isn't in your setup at the location stated below, I've added the drop shadow script-fu to our script-fu database.

Open your image, then apply the GIMP Drop Shadow script-fu, which can be found on the active image at

Filters » Light and Shadow » Drop-Shadow

You are now presented with the drop shadow dialogue box, with various options as below

drop shadow dialogue

The drop shadow dialogue box variables

1. Offset X and Offset Y This is the drop shadow offset to the photo image. A positive number will shift x right and y down, while a negative number will shift x left and y up.

2. Blur Radius How many pixels the blur will be. This will depend on the size of your image. A small image won't require much of a blur radius.

3. Colour Colour of the drop shadow layer.

4. Opacity Opacity of the drop shadow. 80 is the default, but I've found 60-70 works pretty well. This can be adjusted in the layers dialogue, after you have applied the drop shadow script, so don't worry too much about it now.

5. Allow Resizing This is selected by default and resizes the drop shadow layer to allow for the Blur Radius and X and Y Offset. To be honest, I'm not entirely sure why this is included, as if you don't have it selected the drop shadow sits behind the photo image. Anyway, leave it selected smile

Australia dropped

For the demo I've used Australia, as countries surrounded by water look pretty good with this effect I feel. The original image is shown below, before the drop shadow script-fu was applied.

oz layer

The settings applied were left at the default values shown above, with the exception of Opacity which was set to 70.

I then added a new layer set to a blue sea colour

Layer » New Layer
add new layer

Note: The Layers Dialog can be opened in the active window at
Windows » Dockable Dialogs » Layers or keystroke Ctrl L

Merged all the layers
Image » Merge Visible Layers or keystroke Ctrl M

And then saved as a gif.

oz drop shadow

That's all there is to it. Of course you can save some image size by setting the sea background colour with css. All you need to do is apply a class to the image element and set the following in your css file:

.your_class {background: #55aaee;}

Drop shadow detail

If you want to implement the script-fu manually, there is a more detailed tutorial with screenshots on the next page.

There is also a good example on the Dahab map page of what can be achieved, when implementing the drop shadow and bump map on an image.

Download GIMP Graphics by GIMP