Jinny Brown's Pixelalley Painter 5 and 6 Tutorials

Transparent GIFs
Making a Selection Over a Web Page Background Image Using Painter 6

by Jinny Brown e-mail

To make a Transparent GIF with edges that blend with your web page background:

1. Open a new Canvas and Fill it with a Pattern made from your web page background image, or if the background is a large image, like a painting, open (a copy of) the painting itself.

2. In the Objects palette, Layers section, from the dropdown menu, choose New Layer.

3. With the New Layer highlighted in the Layers list, draw a shape with any of the following selection tools found in the Tools palette: Lasso, Pen, Quick Curve, or Oval Selection.
(For this exercise, don't use the Rectangular Selection tool or create a shape with the Pen tool using only vertical and horizontal lines. The curvier and more angled the lines are, the better.)

NOTE: Rectangular and square shapes are not a problem when making Transparent GIFs, as none of the edges are angled or curved and the edge pixels don't show as "stair steps" or "jaggies". The Rectangular Selection tool is mentioned only because it is one of the Painter 6 set of selection tools.

4. In the Art Materials palette, Colors section, choose a color that contrasts with your background Pattern. The more contrast the better.

5. From the Effects menu, choose Fill. Then, in the Fill dialog box, choose Current Color and click the OK button.

6. In the Tools palette, click the Layer Adjuster tool, then click in the center of your filled selection. This will move it to a new Layer.

7. With the new Layer highlighted in the Layers list, from the Layers section dropdown menu, choose Drop and Select.

8. With the dropped shape Layer still selected ("marching ants" around the shape), from the File menu, choose Save As. Give the file a name and choose GIF from the file format dropdown list. The Save As GIF Options dialog box will open.

9. In the Save As GIF Options dialog box, choose the number of colors, depending on your image and file size requirements, click Output Transparency, then click the Preview Data button. You should see your shape on a transparent background.

10. In the Preview Data window, click OK then in the Save As GIF Options dialog box, click OK again.

Your Transparent GIF is now ready to insert into your web page over the contrasting background tile used when you created the selection.

Take a look at two sets of image selections shown first on a white background, then on the contrasting Pattern tile used when creating the shape and making the selection.

The shape you see on the left was drawn with the Lasso tool
on a Layer above a white Canvas, and Fill(ed). Then,
from the Layers menu, I chose Drop and Select.
Next, I saved the image as a GIF and, in the Save
As GIF dialog box, checked 256 Colors (too high
a number for this image), Output Transparency,
and clicked the Preview Data button to see
that the image background was transparent,
then hit the OK button.

Notice that the edges appear to be smooth. Any
pixels that were picked up from the white Canvas
during the Drop and Select step won't show
against this white background.

Below is the same Transparent GIF placed
over a contrasting background Pattern.
Notice the jagged edge pixels. There are no
darker pixels to fill in and make the edges appear
to be smooth against the contrasting background.

The shape you see on the left was drawn with the Lasso
tool on a Layer above a contrasting Pattern-filled
Canvas, and Fill(ed). Then, from the Layers
menu, I chose Drop and Select. Next,
I saved the image as a GIF and, in the
Save As GIF dialog box, checked
256 Colors, Output Transparency,
and clicked the Preview Data button
to see that the image background
was transparent, then hit the OK button.

Notice that there are some darker pixels around
the edges. These were added during the Drop and
Select step and the color comes from the
contrasting Pattern-filled Canvas.

Below is the same Transparent GIF placed
over the background Pattern to which it was
Drop(ped) and Select(ed). Scroll up and down
the page and compare the edge pixels on each of the
two shapes placed over the contrasting background.

For more details on Creating Transparent GIFs in Painter 6, see pg. 458 of your Painter 6 manual or, from the Help menu, choose Web then, in the PDF document, in the Painter on the Web section, click Creating Transparent GIFs to go to pg. 458. You'll find a full explanation of options in the Save As GIF dialog box.

.
Jinny Brown, August 16, 2000

PixelAlley.com • Safe Journey • Gallery • Fun with Brush Strokes • Character Matters
Tutorials • Net Painter • Painter Exchange