MEMBER: SCOTT KELBY / NAPP |
| CREATING
BACKGROUND TRANSPARENCY
USING CHANNELS |
| If
you have a Web graphic
where you need the
background to be
transparent, and
it's a solid color,
it's pretty simple
just to make that
background color
transparent. But
what do you do,
when it's not a
solid background
color? |
|

Step
one:
Open the image that contains
the object you want to appear
with a transparent background.
In this case, we want the
image of the sign (a stock
image, courtesy of PhotoDisc)
to remain and the background
of the woods to become transparent.

Step
two:
Use one (or more) of Photoshop's
selection tools to select
the object you want to remain
visible. In this case, I used
the Magic Wand tool to select
the background. I clicked
once on the forest (which
selected part of the background),
then I held the Shift key
and kept clicking on other
parts until it was all selected.
Then I went under the Select
menu and choose Inverse, which
gives you the inverse of your
selection (I had the forest
selected, but I wanted the
opposite, or inverse of it
-- the sign).

Step
three:
Convert your image into Indexed
Color mode by going under
the Image menu, under Mode,
and choosing Indexed Color.
I'm not going to explain all
the options in the Indexed
Color dialog box (that's a
whole 'nuther tutorial unto
itself), so I'm counting on
you already knowing how it
works. Click OK when you've
put your desired optimization
setting in place.

Step
four:
Go under the Select menu and
choose "Save Selection." When
the Save Selection dialog
box appears, just click OK.
Then Deselect by pressing
Command-D.

Step
five:
Go under the File menu,
under Export, and choose GIF89a
Export. When the dialog box
appears, under the Preview
Window you'll see a pop-up
menu for "Transparency From"
which, by default, has you
choosing a background color
to be transparent. Click on
the pop-up menu and instead
choose Transparency From "Alpha
1". When you do this, look
in the preview window. You'll
notice that your background
is now transparent (Adobe
uses the color gray to simulate
on-screen transparency, so
if the background looks gray,
you're there!) Now you can
save your file as a GIF, the
background will appear totally
transparent when placed on
your Web page.
|