Well; you have a picture and you've used the cleaning tutorial to get it nice and clean and you've merged the image/images visible down to one layer. Now you're thinking you want to put it on a web page but you want the background to show through instead of having a background on the image itself.
There ARE unsurmountable drawbacks to gifs and globes with a transparent
background:
1. don't apply a drop shadow anywhere around the outside of the image.
when you reduce an image
from millions of colors to 256 colors which is the maximum number of colors
in a GIF file, you are going to get some pixelation. Regardless of
how smooth using millions of colors can make your image seem - the fact
is that you are still using itsy-bitsy SQUARE pixels to develop the image.
At 72 pixels per inch, the outer edges can look awfully jagged if they
aren't square or rectangle.
2. You will have to choose a color for the transparent background
that is no where else in your image.
3. The larger the image, the more jagged it will be.
Let's get started.
We will start with your already cleaned, trimmed and prepared image.
Or you can grab the SmilePak for a simple walk
through. Or you can grab the SwanPak if you prefer; steps are
the same for either.
If you choose the Swan LayerKit, the swan is already cleaned, sliced, diced and layered. I've included the bow selection.psp, the rose, I used the SwanLayerKit I used and the water lilies I used and all are sized proportionately. You will have 4 layers on the swan; you will activate the flowerfill layer and copy/paste in the rose; open the bow selection and paint however you like and copy/paste it onto the bow layer, turn and position as you please; merge all visible add new layer, open the water lily image; copy/paste them onto the new layer and scoot them around as you please or if you make the one above, you will paint in water and smudge it around and then add the layer for the water lilies and then merge visible.
If you chose the SmilePak, you will open the Smile selection image and flood fill it with whatever you choose and then DESELECT.
We are ready to work.
Step 1
After you image is merged visible, drag a selection around the image
close to the edges but leaving a little room and then from the image menu
choose CROP.
Step 2
From the Layer menu, add a new raster layer, name it 'backer'.
From the Layers palette, 'backer' is active - click on it and drag it below
the other layer. Backer layer should be 'active'.
 |
|
Step 3
Look at your image and choose a color that is not present in it for
the transparency color. In PSP7, the top styles color is your
flood fill color.
Using the flood fill tool (the bucket), click anywhere in the image.
Step 4
In the Layer palette, activate the top layer.
Step 5
Using your selection tool, from the Selection menu choose 'Select All'; then click anywhere in the image to set the selection.
Step 6
From the Color menu, choose Decrease colors/256.
You will get the screen below, click OK; notice how your color
palette changed.
Step 7
From your Color menu choose 'Select Palette Transparency'.
You will get the window below; move it where you can see the background
color on your image.
Click the background color, then click OK.
Step 8
From your Color menu, choose View Palette Transparency to see your
gif without the background color.
Step 9
While the image is still selected, from the Selection menu, choose
Save to Alpha Channel.
You will get the window below, click OK.
Next, you will get the window below, click OK.
Step 10
Deselect (from Selection menu, choose Select None.
Step 11
Save your image, select the folder you want to save in, name
the graphic and drop down the 'Save as type', find GIF and click it; click 'Save'.
You may be done now but you may not be happy with it. When the Gif color reduction changes the colors, it uses a blending method. This is why we saved the selection to Alpha Channel - to give you a chance to check the image and undo if necessary.
Using your ZOOM tool (the magnifying glass), click on you image and
look at the edges real close - see if there are any little jagged pixels
of an undesirable color.
You can see that there are tiny dark pixels around the edge of the swan
image. This might look okay on a medium to dark background, but not
on a light or white one. The smile image has tiny white pixels which
is great on a white or light background but not on a dark one. The
best way is to know ahead of time what background it will go on or be prepared
to choose a background that will work with it. You don't always have
this choice. Here's where you have to make a choice and I don't envy
you that - I have to do it all the time with the GIF format. I hate
it!
Step 12
Correct it. From the View menu, choose Normal. UNDO until
the selection is back and the background color is visible OR from the Selection
menu, choose Load from Alpha Channel.
You will get the window below. Sometimes you will have several
selections from the same image but here, you should have only one.
Click OK.
With your Dropper tool, click in the background area; from the
Selection menu choose Invert.
Using your Brush tool, match the settings below.
Brush over the edge of the image with the middle of the brush tool.
This is easier if your tool is set to precision and brush outline under
the screen tab in the image above. Deselect.
Using you ZOOM tool again, click on the image and look close at the
edges - you may not want to save this one at all but I like saving it until
I can compare them on an actual background.
To save, from the File menu choose 'Save as'; add a 2 to
the end of the name before the '.gif' and click the save button.
Now you are prepared with a choice to use on the backgrounds.
Depending on the colors you chose, you should have something like this
when you view them in your html pages.
To see them on black, click HERE to open a
new window with a black background.
Tutorial written by CSGreen, March 22, 2002
Close Window when Finished.
* I do not generally compress my graphics but for the sake of loading time - the tutorial graphics are compressed!
