Transparent backgrounds in an object

Hi Geordie,

I have Mac Logo Design Studio Pro. I have to create the image, save it as a PNG, and then it will allow me to change the background to transparent. But this is all done in the program. If you only have one image to do this to, I would be happy to convert it for you if you would like? I'm not sure that I can, but I can give it a try.

Best,
MassNative

you should use iweb already available function: Instant Alpha... there is no need for photo$$$hop.
select the image in your page, then select menu bar --> Format --> Instant Alpha
follow the HUD instruction, with any luck you should have transparent background.

Cyclosaurus,

You need to do your homework...

To compare the "Instant Alpha" with a 24-bit PNG alpha transparency is at best a disservice...

There is no comparison. The Instant Alpha has no parameter controls and has an 8-bit color table - meaning you have just 256 colors and the transparency effect draws-down/reduces the colors available for the image... "with any luck" indeed.

With PNG's 24-bit control you can create almost any transparency effect you wish on a modern browser.

Why don't we compare notes - I'll give you an image to "Instant Alpha" transparency - say with a drop shadow - and I create same image/effect with a 24-bit PNG in Photoshop?

And then we'll let viewers decide if a quality image editor ($$$) is worth its price.

Hi Geordie!

Sorry to leave you hanging - I had to logout unexpectedly and this is the first time I could get back.


To use the PNG transparency is fairly straightforward. I use Photoshop CS2 so my description may possibly vary slightly from what you see on your screen.

======
1) Isolate the desired object on the background layer and do "Layer via Copy".
2) Delete the background layer. Your object should now be displayed with a transparent background.
3) Select "Save for Web" from the file menu.

4) On the righthand side of the dialog, near the top (just under the "Preset" pop-up there is a pop-up menu to select the type of file you wish to create. Select "PNG-24" (i.e. 24-bit color). Make sure the "Transparency" box is checked (should be by default).

5) Click "Save", you go to the "Save Optimized" dialog. Near the bottom you have the option via a pop-up to save the "HTML & Image", "Image Only", or "HTML Only". Most likely you will want "Image Only".

You are done... load your PNG image into iWeb as with any other file type.


===========
Some notes:

Internet Explorer 6 or older IE browsers are not compatible with PNG transparency. All other current browsers are according to a table I have referenced.

You could use the "PNG-8" type instead of "PNG-24". This would be a good solution if your isolated image is a simple graphic (few colors) and its form consists of vertical and horizontal elements, no angles or curves. The file size will be smaller than PNG-24 (or even a GIF). The transparency is part of the color table, the more colors used for transparency the less available for the image.

For all other circumstances, especially complex selections and images go with PNG-24.

---
There is also a gamma correction as part of the PNG spec. Typically images that look great on a Mac (gamma 1.8) can look dark on Windows (gamma 2.2 or so) and images that look great on Windows can look light or washed out on a Mac.

A PNG file with this gamma tag will correct itself depending on the machine it is running on.

I have not found a setting for this feature (HTML or image) in CS2, perhaps it is available in CS3 or 4, and cannot offer further any insight here. But if you see that option in your version of Photoshop or some other editor it would be worth an experiment to see how well it works.

All browsers support this gamma tagging.