I Can’t Make a Transparent PNG

IA
Posted By
i_am_jim
Jul 19, 2007
Views
722
Replies
14
Status
Closed
I can’t seem to get the transparent area this image to be transparent. It alway comes out white.

http://img168.imageshack.us/img168/6567/nonamepb0.gif

I’ve tried saving normally and for the web — same result.

If I save it as a gif it works.

What am I doing wrong?

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

DM
Don_McCahill
Jul 19, 2007
Are you checking for transparency in Internet Explorer? That program is broken and doesn’t do PNG well. Test in Firefox and see if you get the transparency.
IA
i_am_jim
Jul 19, 2007
On Thu, 19 Jul 2007 00:05:44 -0700,
wrote:

Are you checking for transparency in Internet Explorer? That program is broken and doesn’t do PNG well. Test in Firefox and see if you get the transparency.

Thanks very much for your reply. I guess that’s the answer.

Actually I was checking in IrfanView and FrontPage (which is IE based), and it does not work in either of these After your reply checked it in browsers, and it works in Firefox and some work in IE6 — others not.

Thanks again.

PS It seems like PNG’s pretty useless given it has so little support.
SP
Sid_Phillips
Jul 19, 2007
We use PNG primarily for PowerPoint and Flash. Comes in pretty handy there. Not so useful for other apps.
EH
Ed_Hannigan
Jul 19, 2007
If you are using it on a web page a handy javascript added to the HTML will force Internet Explorer to display transparency correctly. This problem is supposedly fixed in IE 7.

<http://homepage.ntlworld.com/bobosola/>
IA
i_am_jim
Jul 19, 2007
Thanks for all the replies.

I was only using PNG to reduce file size. It’s too much trouble. I’ll just use GIF.
CH
clifford_hager
Jul 19, 2007
The problem is definitely the fault of IE6 and earlier. For the black square you show in your example. .gif will work fine. But .png files will allow gradient transparency while .gif will not. Check out this page… http://www.cmhager.com/test/test.html and drag the size of your browser window to see the results. This page is "hacked" to fix the problem with IE6. It works fine in all other browsers including IE7.

The results are MUCH better than you can achieve with a .gif which will only allow one color to be transparent.
IA
i_am_jim
Jul 19, 2007
On Thu, 19 Jul 2007 09:02:38 -0700,
wrote:

For the black square >you show in your example. .gif will work fine. But .png files will allow gradient transparency while .gif will not.

I was trying to use it because with larger and more complex images PNG makes smaller files than gif.
EH
Ed_Hannigan
Jul 19, 2007
So use it and use the javascript if needed.
DM
dave_milbut
Jul 20, 2007
gif will limit you to 256 colors…
L
LenHewitt
Jul 20, 2007
Clifford,

with a .gif which will only
allow one color to be transparent.<<

Actually you can make as many or as few colours present in a .gif transparent – what you can’t do is make any of them translucent. They will be either ‘on’ or ‘off’ – 100% or 0% opacity.
EH
Ed_Hannigan
Jul 20, 2007
Rather than setting colors to be transparent in a gif I prefer to have transparent areas in the psd before Save For Web. Much better control.

IF you must use gif.
IA
i_am_jim
Jul 20, 2007
On Fri, 20 Jul 2007 05:09:23 -0700, wrote:

I prefer to have transparent areas in the psd before Save For Web. Much better control.

I didn’t know there was another way. See link in original post.
EH
Ed_Hannigan
Jul 20, 2007
There is, but in the case of your file it is not applicable. In the Save for Web dialog you can select colors to be transparent, which some people do.

I was addressing the posts by Len and previous. Sorry.
CK
Christine_Krof_Shock
Jul 20, 2007
Great article for how to get rid of the big blue box in IE when you want to use png

<http://www.creativepro.com/story/howto/25593.html>

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections