LWD logoLori's Web DesignLWD logo

How to apply a drop shadow to an image over a tiled or colored background


drop shadow image 4
If you have ever tried to apply a drop shadow to an image over a background that is a tiled image or colored you may have encountered any of the following problems:
  • Once the image is applied to the colored background you can no longer select it to apply the drop shadow

  • You can't apply a drop shadow to an object unless there is a background beyond the edge of the image.

  • If you have a tiled, textured or embossed background, web safe colors may not work with your background color.

  • Being as the tiled background moves in relation to the text and other images (depending on resolution size of the computer screen), you can't use part of the background tile as the background for the image.

If you are looking for instructions on how to do this with CSS check out How to add a Drop Shadow to an Image or Text with CSS3

This tutorial provides a solution to all these problems. I'm using Fireworks but it can also be done on similar graphics programs although the names of some terms might be changed.

Applying the Drop Shadow

drop shadow image 1
1. Open the image that you want to use (be sure to save a copy of the original).

2. Increase the width and height of the image canvas so it's wide enough to apply the drop shadow on two sides and allow for the image to be tilted at an angle. You can do this by going to Modify / Documents / Canvas Size. The canvas used in this example was increased by 20 pixels in height and width. Now select a transparent canvas.

image with drop shadow
3. Select the pointer tool Fireworks pointer tool and click on the image so it has a blue selection border.

Apply the desired drop shadow by choosing Window / Effect to open the effect tool and then clicking on the Drop Shadow option. Play around with the settings for a deeper or lighter shadow than the default settings.

Applying Color to the Background

drop shadow image 3b
4. We are now going to set up a new canvas with the desired background color and copy the drop shadow image onto it: Select File / New for the new canvas. Make sure the width and height is the same as the other image including the transparent background. Choose a white canvas (we'll color it in the next step - in this case gray to match the background of the page).

5. In order to color this new image the same as your background open the background tile. Select the background pallet background pallet in Fireworks and then use the eye dropper tool Eyedropper Tool to copy the desired color from the background tile (select 5x5 pixel radius). Then select the outside of the new blank image with the Marquee Tool Marquee Tooland apply the new color to the new canvas with the paint bucket tool Paint Bucket Tool(see example on the right).

Applying the Drop Shadow to the Colored Background

drop shadow image 3
6. Select the image with the drop shadow in first canvas and copy and paste it onto the new canvas with a colored background. It should look something like the example on the right with a soft drop shadow.

We could stop here but a drop shadow image often looks better tilted (see next step).

Tilting the Image

7. If you want the image tilted, select the image then modify / transform / numeric transform and then Rotate and set it at about 4 degrees counter clockwise to move the image at a 4 degree angle (if you prefer to have it moved clockwise then select 356 degrees).

image 4
8. To align the image within the new canvas you may need to use the arrow keys on your keyboard to move it up or to the left so all of the shadow will show. Finished drop shadow effect is on the right.

Saving the Image to Edit later

9. Save the finished image in .png or whichever editable format your program uses, so you can edit it later if needed. Then export as a gif for the finished product and set up the html on your web page (you can't save transparent images as JPGs).

Lori Eldridge
Copyright © 10-13-04 - updated 10-11-14
All Rights Reserved.


Google



order evaluation

Twitter     Google+     Facebook     linked in