|
|
Merging
a Shadow With Its Background |
 |
|
|
|
|
|
|
 |
|
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
|
