Home

Web Design Services

Website Evaluations Evaluation Testimonies Website Redesign Web Design Portfolio 1 Web Design Portfolio 2 Web Design Portfolio 3 Experience, Testimonies Web Design Rates Web Design Quotes Christian Web Designer

Web Design Tips

Menu Samples HTML and CSS Tips Align Images with Text Form Buttons - No Space Add Borders to Boxes Red Hearts in CSS

Internet Hosting Scams How To Move Off Free Host Web Page Hijackings How to Find 302 Hijacker Report 302 Redirects Stop Content Theft How to find Scraper Directory Link Submission Scams Domain Registration Scam Triangular Linking Schemes

SEO Tips

Search Engine Faq Submitting to Search Engines How to Find Backlinks Backlinks to Avoid How to find Web Designer Keyword Ranking Strategy Keyword Ranking Faq Directories that Pass PR Directories to Avoid

Graphics Tutorials

Fireworks Tutorials Straighten Photos Vertical Background Tutorial Drop Shadow Tutorial Animated Tutorial Photoshop Tutorials Embossed Images Textured Background Feathered Edges Tutorial Gradient Background Tutorial Textured Background Tutorial

Graphic Designs

Free Graphics Landscape Photos Winter Landscapes Image Manipulation Logos Designed Logos Designed 2 Animations Graphics Portfolio Mountain Panoramas Textures and Backgrounds Applet Displays Collages Web Safe Color Chart

A tutorial on how to apply a drop shadow to an object
over tiled or colored background in Fireworks 2

This drop shadow tutorial will work for either an object on a tiled or embossed background or plain colored background in Fireworks 2 and possibly above. If you have ever tried to apply a drop shadow to an object on a tiled or colored background you may have encountered any of the following problems:
Once the object 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 and embossed background the 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 either.	A transparent image with a drop shadow applied loaded to a web page with a colored background produces a shadow that is opaque and not softened as you can see with the following image placed over a white background:
The following drop shadow tutorial provides a solution to all these problems.
Applying a Drop Shadow 1. Open the object that you would like to apply the drop shadow to (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 by going to Modify / Documents / Canvas Size. The image used in this example was increased by 20 pixels in height and width. Select a transparent canvas. 3. Select the 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. You can change the settings for a deeper or lighter shadow than the default settings.
Applying Color to the Background 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). 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 6. Select the image with the drop shadow in first canvas and copy and paste it onto the new canvas. It should look something like the example on the right. Notice the difference between the softer drop shadow of this image and that of the first image at top of page which had a hard edge. 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 modify / transform / numeric transform and then Rotate and set it at about 4 degees to move the image at a 4 degree angle counterclockwise (If you want it moved clockwise then select 356 degrees). 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 so you can edit it later if needed and then export as a gif for the finished product and set up the html on your web page. Lori Eldridge Copyright © 10-13-04 - updated 6-13-05 All Rights Reserved. Return to the Tutorials Page Other Graphics Tutorials: 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 Other Grapics Pages: Free Graphics for Artists, Custom Designed Graphics Logos Designed and Landscape logos Other Drop Shadow Tutorials using CSS CSS Drop Shadows Other Fireworks Tutorials Playing with Fire