< BACK TO ARTICLE INDEX
How to work with transparent
images
How do I place an irregular-shaped
image on a colored background, or over another image, like
this? |
Because GIF and PNG images
can have transparent backgrounds, it is possible to place them
on a colored background or over a background image on a web page
so the background shows through. (Read more about images that
allow transparency in "How
to know what type of image file is best."). However,
placing a COB photo ("cut out background"
or "cut out of background") or other irregular-shaped
image over a background can be difficult. That's because if it's
not done correctly, you will see a rough, raggedy outline around
the image, like the violin on the left and the letter "a" on
the left below.
 |
|
 |
|
 |
|
 |
 |
| The two violin
photos above have transparent backgrounds and have been placed
in a table with black cell backgrounds. The photo on the left
shows a jagged white outline, while the one on the right looks
great. |
|
The two "a"
images above have transparent backgrounds and have been placed
in a table with blue cell backgrounds. The photo on the
left shows a jagged white outline, while the one on the
right looks great. |
The way you avoid the jagged
outline problem is to use the correct Matt color in the Photoshop
Save for Web dialog. The Save for Web dialog below shows the transparent "a"
original in the upper left, a JPEG in the upper right, a GIF in
the lower left and a PNG in the lower right. The gray checkerboard
behind the "a" in three of the panes indicates a transparent
background. The JPEG in the upper right shows a white background,
since JPEGS do not allow transparency.
The Save for Web dialog below
is the same "a" viewed at 1600%. Notice how the edge
of the curve in the original has a series of transparent pixels.
This is called "anti-aliasing."
Without anti-aliasing, nonreactor shapes would all look "saw-toothed"
or jagged. In the original Photoshop image, pixels of varying degrees
of transparency are possible. However, in the final GIF or PNG
web images, transparency of individual pixels is not possible.
Therefore, the image edges must be anti-aliased for a particular
background color. This can be seen in the bottom two panes below.
The lower left pane is anti-aliased for a black background. The
lower right is anti-aliased for a blue background. The desired
background color is selected by clicking the "Matte" swatch.
As you can see, Photoshop mixes the transparent pixels in the original
with the matte color to yield various shades of two blended colors.
When the image is ultimately placed on a background color on a
web page that matches the matte color, the edges blend perfectly.
Placing a transparent image
over a solid color background like the examples above makes choosing
the anti-alias (matte) color easy —you just use the background
color. But when the background is not one consistent color, like
the image behind the violin below, it gets a little trickier. You
must find the happy medium of all the colors around the image.
The captions explain the good, the bad and the ugly.
|
|
|
|
|
|
| In
this example, the matte color is too light, resulting in a
light gray outline around the left side of the violin where
the background image is darker. |
|
In
this one, the matte color is too dark, resulting in a jagged
dark outline, especially noticeable in the upper left of the
violin where the background image is lightest. |
|
This
example shows a good compromise. By selecting a medium gray
matte color, the edge of the violin looks fairly smooth all
around. |
ShareThis