How to apply a drop shadow to an image over a tiled or colored background
- 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.
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
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.
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
5. In order to color this new image the same as your background open the background tile. Select the background pallet in Fireworks and then use the eye dropper 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 and apply the new color to the new canvas with the paint bucket tool (see example on the right).
Applying the Drop Shadow to the Colored Background
We could stop here but a drop shadow image often looks better tilted (see next step).
Tilting the Image7. 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).
Saving the Image to Edit later9. 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).
Copyright © 10-13-04 - updated 10-11-14
All Rights Reserved.
Main Tutorials Page | Photoshop Tutorials | Fireworks Tutorials
Other Graphics Tutorials:
How to Make a Watermark on Photos | Straighten Distorted Photos | Emboss Images | Feathered Edges How to Design a Gradient Background | How to Design a Textured Background
How to design a Vertical Background | Applying a drop shadow to a tilted object over a colored background | How to Make An Animation