Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
Photoshop Tutorials - Free Fonts
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[About Mike]
[Related Sites]

  Merging a Shadow With Its Background
postit.gif   Note: This tutorial only covers screen displays. Some desktop publishing applications do not provide for this effect. For example, in QuarkXPress™ you have to obtain a special extension (QX-Shadow™) from Extensis® http://www.extensis.com in order to produce this effect on printed documents.

Transparent drop shadows are very popular these days. Below is an example of a typed headline rendered as a transparent GIF image over a textured background. The transparent GIF image is inside an HTML table with a textured background image:


This is the transparent GIF without the background table:


Below is an example of the same headline using a JPEG image:


And here is the same JPEG image inside an HTML table with a textured background:


The main principle behind any technique for creating a transparent drop shadow is:

In order for the shadow to blend with the background you have to render the shadow and the background together as a single image.

There are a couple of points to be made, here:

1. You can only do this on smooth or fine-textured backgrounds. This probably won't work on high-contrast or patterned backgrounds.

2. You can use the JPEG format. This format is not normally regarded as being able to produce transparent effects.

How The Above Samples Were Created

In the tutorials I'll show you how to create the drop shadow effect using Photoshop® and Deneba Canvas™. From there it can be exported as a GIF or JPEG image. Both the above samples, however, were made using Adobe® ImageStyler™. There is an important reason why I chose ImageStyler to create the GIF.

Here it is again:


Please notice how the excess background pixels have been trimmed away (you can't see the rectangular boundary of the image). ImageStyler is the only program I know of that does this in one step, but in the tutorials I'll show you how to do this with Photoshop and Canvas. This actually makes a better image for two reasons:

1. A single, transparent color in the GIF image will compress to a smaller file size than the original background image occupying the same number of pixels.

2. There is less chance of a mismatch at the boundary of the image. If the excess background pixels don't get trimmed away, then you need to make sure the color palette used by the GIF retains the same colors as background image. All too often colors get removed by reducing the number of colors in the palette when preparing GIF images for web pages.

There is a chance of a mismatch at the image boundary when using the JPEG format. In order to minimize this, you have to experiment a bit with the compression. Too much compression will create a mismatch at the boundary of the image.

How To Do It Using Photoshop 4

How To Do It Using Canvas 6


Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy