dmj's Graphics Tips: Soft Shadows for HTML

dmj's graphics tips: soft shadows in web pages

I like soft shadows, even though they're used a lot and are probably getting just a bit trite. Still, they can be used to add depth to a web page, and they're easy to do. Usually you see soft shadows on a plain background, which is just done by filling the background of the image with the same color as the web page and applying the soft shadow normally.

Adding soft shadows over a textured backdrop, though, is a bit harder to do with HTML, where you can never guarantee a particular alignment of image and background. Depending on your background, you might be able to get away with the simple technique used for solid colors, but that's rarely the case.

This trick works best with backgrounds that have a fairly even color to them, with only slight variations. (Sort of like the backgrounds I use on these pages.) Start out with the image you want to make a shadow on, like this:

Open up your texture in another window and use the color probe to determine its color. Picture Publisher has a convenient tool here (the second color probe that lets you determine the average color of an area. Then fill your image's background, behind the text, with this color. I usually leave the text as a floating object, to make this sort of thing easier:

Now make your soft shadow. I do it this way:

1.	Make a new black image - any size, as long as it's bigger than the object.
2.	Click the "alpha" button in the lower right corner of the Picture Publisher window to select the alpha (mask) channel.
3.	Copy the text object from the original image into the alpha channel.
4.	Fill this object with white.
5.	Combine all objects with base.
6.	Apply a Gaussian Blur effect, with a strength of 5-10.
7.	Click the "alpha" button to return to the image, then Copy.
8.	Paste this shadow onto your original image, and move it below your text object. Adjust position and transparency to taste.

Now all you need to do is combine all the objects together (very important), convert to 256 colors and save as a GIF. When you save as GIF, you will need to make sure "Use Transparent Color" is checked and that the color shown is your background color (double-click the color box to change it). You'll want to double-check the new image in your browser to make sure you've chosen the right color.

[ Menu | Next Tip ]