Clearly Impossible?

Published 19 years, 2 months past

I’ve been pounding my brain against a problem in Photoshop CS for the last few months—no, not continuously—and I’ve given up.  Now I turn to the PSD experts in the crowd for help.

What I want to do seems simple enough.  The goal here is to have a PNG where the alpha channel coincides precisely with a visible pieces of the image.  In other words, if the visible image is a large black diamond, then I want the alpha channel to be in the same shape and intensity as the diamond.  That way, in IE/Win, there will be a big black diamond.  In other, more capable browsers, there will be a transparent diamond with a white mask, so I can set whatever background color I want.

Here are two images that, I hope, illustrate what I’m aiming to do.  The first image is what IE/Win would render, and the second is a representation of what another browser would render (the gray checkerboard pattern representing the transparent parts of the PNG).

I’ve fiddled with combinations of masks, layers, alpha channels, and more until my head feels ready to explode.  No matter what I do, I can get either an image that’s opaque (read: no alpha channel) in all browsers, or an image with a full alpha channel, where the alpha portion is filled with a light silver-gray in IE/Win.

It seems like there has to be a way to do this, and that someone out there knows what it is.  So how in the name of the sweet Virgin Mary do I get this to work?

Update: I sense that people aren’t getting what I want to do.  What I effectively want to do is take an image of the diamond—a GIF, a TIFF, whatever—and, in turning it into a PNG, add an alpha channel such that the diamond gets “knocked out” in programs that understand the alpha channel.  In those that don’t, like IE/Win, the regular image should just appear, with no alpha-channel effects.  Just the black diamond.

And I want to know how to do it in Photoshop, which is the tool I use.  Telling me how to do it in GIMP would be incredibly useful if I hadn’t thoroughly hated GIMP’s UI, and thus uninstalled it about ten minutes after installing it, back when I did.  (To be fair, it might have been the X11 UI that I hated, but since GIMP was the only X11 application I’ve run… you see where I’m headed with that, I hope.)

Comments (40)

  1. I believe the issue is really all to do with IE’s broken PNG implementation, there is nothing you can do with the image to get it to change the way it’s rendered in IE.

    The only choice you have is to use the IE PNG hack in the page (like you used in S5) so that it renders it transparently, or use content negotiation to serve a transparent PNG to descent browsers and a GIF to IE. (IE includes image/gif, but not image/png in its accept headers, so any descent content negotiation system will do that. e.g. Apache Multiviews)

  2. I’m not quite sure what your issue is. Your problem seems to be that the wrong background colour is saved in the PNG (silver-grey instead of black), causing IE to show that silver-grey, while other browsers correctly display transparency. Is that it?
    If so, choosing black as the background colour before exporting the image in PS should suffice.
    In other words, this image:
    http://stud3.tuwien.ac.at/~e0226430/graphics/diamond.png
    should work. But since I’m running Linux right now, I can’t test in IE. (It is transparent in Firefox.) I also can’t tell you exactly how to do that in PS, as I did it in the Gimp 2.2.

  3. I don’t know about Photoshop, but I just did it in about five minutes with the GIMP:

    * Create a new image, RGB.
    * Right-click on the background layer, “Add alpha to layer”.
    * Use the Eraser tool to draw a diamond shape.
    * Set the background colour (you know the overlapping-rectangles foreground/background colour widget) to black.
    * File -> Save as PNG.
    * In the PNG Options dialog that appears, I made sure “Interlacing” and “Save background color” were ticked, and everything else was unticked.
    * Create test HTML page with the CSS rule body { background: red; } and an <img> tag that points to the PNG I just saved.
    * Presto! All done!

  4. Hmm. I don’t know about Photoshop, but Gimp lets you save the background colour which shows up in the transparent area in Internet Explorer. I’ll keep trying in Photoshop.

  5. The simplest explanation I can come up with:

    IE composites alpha PNGs onto a solid background colour, which is usually grey but it’ll use the PNG’s bKGD chunk if there is one.

  6. Interesting predicament. It seems like Photoshop will only consider layer transparency when making the PNG, not giving you the option to just pick an Alpha Channel to use for that transparency instead. (Which is lame because layer transparency is really just an alpha channel hidden from the user.) You should theoretically be able to have anything in your image data and anything in the alpha channel when making the PNG. Maybe there is a third-party plugin or software that lets you do it.

  7. Start with your image in a layer. Delete the background layer if it exists. Make a layer of all white beneath the image. Select the image layer and use Select: Color range… Click on the black and pull the fuzziness all the way to the right. Click OK. Now select the all-white layer and hit delete. Now delete the image layer. It seems the only way to save variable opacity is via File: Save as.. and it saves as a 24-bit PNG. When I view this in IEwin, the middle isn’t black, it’s a light blue… One of my system colors? Macromedia needs to hook you up with Fireworks for better alpha PNGs. ;)

  8. p.s. I just tried it in piece of high-end compositing software that would actually let me take a a version of your diamond file and with no transparency and set up an alpha channel which would be the only place it could get it’s transparency. I exported the PNG from there and when I open in PS the black color information in the RGB channels is gone. It might be something about the PNG spec that make apps write it this way. (Though after seeing the “light silver-gray” effect in IE, I wonder if this isn’t more about how IE is handling it, since it’s actually not really ignoring the alpha, which is what you were hoping for I think. If it were, I don’t know what would be there since there is no color information in RGB, but it does see the diamond somehow.)

  9. Anthony may be right. From the spec:

    The alpha channel can be regarded either as a mask that temporarily hides transparent parts of the image, or as a means for constructing a non-rectangular image. In the first case, the colour values of fully transparent pixels should be preserved for future use. In the second case, the transparent pixels carry no useful data and are simply there to fill out the rectangular image area required by PNG. In this case, fully transparent pixels should all be assigned the same colour value for best compression.

    Maybe Photoshop just assumes the second case. Though we can’t know for sure unless somebody tries to directly read off the different channels in the file.

  10. There doesn’t seem to be any way to add a bKGD in Photoshop. Photoshops PNG support has always lacked apparently.

  11. Look at the tabbed navigation at the top of this page: http://www.chevrolet.com/cobalt/ – those are transparent png’s with a slight alpha gradient applied – with a css background-color swapped out on hover (same image). Is that what you’re trying to achieve?

  12. May be some clues here. I’m not sure. :-)

    Might also be working looking at the Photoshop SDK if it has info on how Save As PNG works, I don’t know. Just a guess.

  13. I thought I’d be clever and try this out in CS2 and ImageReady, but yeah, Photoshop does not seem to have good PNG support. SuperPNG, a plugin for Photoshop, also does not seem to directly support what you want, but I have yet to test it.

  14. Well, I guess I was wrong, I don’t think it’s Photoshop’s fault after all. Looking at how IE renders images with varying transparency like the W3C PNG test and the image used here, it’s clear that IE first composites the PNG onto a grey background, then displays the whole thing as an opaque image. Serves me right for shooting my mouth off without knowing enough about the subject.

    However, there is a solution, though you can’t do it in Photoshop. If you use an 8-bit paletted RGBA image, IE renders only those parts which are 100% opaque, and anything below 100% opacity become transparent. Which will work for your diamond image, and you’ll be able to switch its colours in IE as well. Fireworks can do this, or you can use pngquant to postprocess your PNGs. For an example, look at these toucans in IE and a better browser.

    A disadvantage is that you have to reduce your colour space to 256 colours. In IE, that makes it exactly like a GIF. Oh wait, why aren’t you doing this with a GIF in the first place?

  15. “Keep It Simple, Stupid!”

    IE6

  16. “Keep It Simple, Stupid!”

    IE6</Win can cope fine with 8bit paletted PNGs with a single colour set as transparent, which apart from fileformat are the same as transparent GIFs.

    Using the full 32bit RBGA PNGs, IE6</Win will attempt to make sense of the alpha channel (and failing), hence that nasty semi-transparent blue-grey mess.

    So the solution would be to use an 8bit paletted PNGs and all browsers will get the nice transparent effect (assuming you don’t care for alpha-transition on possibly anti-aliased bits) or use two images, send IE6</Win the opaque one which has the black diamond and 32bit RBGA PNG capable browsers (includes IE7/Win) get the fancy PNG with full 8bit transparency.

    *Oops, forgot to entitise stuff and having WP eat my post, bleh.

  17. Here’s what I did in Photoshop 7.0:

    1. Open png-base.png
    2. Choose Layer > New > Layer From Background, make sure mode is Normal and opacity is 100% and click OK
    3. Choose Layer > Add Layer Mask > Reveal All
    4. Choose Image > Apply Image, select Source: png-base.png, Layer: Layer 0, Channel: RGB; note that the Target is png-base.png (Layer 0, Layer Mask); Blending: Normal, Opacity: 100%, and click OK
    5. Choose File > Save As…, Format: PNG; Note that it will save as a copy since layers cannot be saved (but transparency will be saved!); Type a name and click Save.

    I’m sure it can easily be turned into a Photoshop (or perhaps ImageReady) action.

    Note only that since your original is antialiased, some of the black fringe will show around the transparent hole in browsers that support transparency.

  18. I think such an image won’t help you. Even if you get pixels that are ‘black but fully transparent’ IE won’t draw them black. It would work if IE just ignored transparency but it tries to use and does it wrong. Odds are hight that instead of black you’ll get some dirty brown-ish color.

    But it’s just me guess, I don’t have WinIE by hand to check it.

    BTW. For simple images you can save PNG in indexed format with 256 colors. IE seems to understand transparency in indexed PNG’s, it’s TrueColor that drives it mad.

  19. Or:
    – open image
    – copy the whole image, go to channels and paste as alpha channel (create a new channel and paste)
    – if needed Strg+Klick on that Alpha-Channel to make selection, get back to layers and use Layer > Add Layer Mask > Reveal selection to apply this Alpha-Channel as a Layer Mask

    Cheers,
    Jan

  20. If you don’t like the Gimp UI (and many of us don’t) you might want to give GIMPShop a try.
    It’s a Gimp hack to make the menus, toolbars, layout just like in Photoshop. Download and screenshots at the link above.
    (a bit offtopic, but since someone pasted a solution for Gimp…)

  21. I know what you’re trying to do. You want the image to show a black diamond in IE and an anti-aliased transparent background in good browsers, right?

    IIRC, I have read that the grey that IE uses is a colour set somewhere in the PNG file. Unfortunately, I don’t think Photoshop can set this colour, but some other software can. Hold on…

    And a bog of googling got me here which leads on to here. Works as a PS plugin apparently.

  22. Or indeed TweakPNG – look for the KBGD setting of your PNG file.

  23. I think you really are attempting the impossible. Photoshop can easily give you a .PNG with an alpha channel, but if I understand correctly you then want IE to ignore it and show the image as if it didn’t have one. Photoshop/GIMP/anything else can’t change the IE behavior in that way.

  24. Ah, TweakPNG works! You have to Insert > bKGD to set the colour, and then IE uses that as the background instead of grey.

    I believe Olly’s found the perfect solution.

  25. I took your image and made it a mask in Macromedia Fireworks MX. It appears to work, please somebody let me know if the IE silver/grey bug is affecting these images:

    PNG: http://www.controlbooth.com/users/dvsDave/punch_out_diamond.png
    GIF: http://www.controlbooth.com/users/dvsDave/punch_out_diamond.gif

  26. The tweakpng and bKGD thing has been on this page for a while.
    http://phoenity.com/newtedge/png_degradability/
    (Not my page just was in my bookmarks)

  27. David, your PNG comes up gray in IE6 SP2.

  28. Hi Eric, I think I’ve figured out a solution to your problem. After reading some of the comments and seeing the problem was that Photoshop doesn’t set the bkgd chunk up, I downloaded TweakPNG (http://entropymine.com/jason/tweakpng/) and used it to set the bkgd chunk up on a png I created in photoshop. The effect is a black diamond in IE, and transparency in other browsers. Here’s the file http://josh-peters.name/diamond.png

  29. Are you ignoring IE’s filter on general principle?

    We’re using PNG files for the verses on our cards, which can be imprinted in various colors – that way we don’t have to create/maintain a separate file for every color a verse may be printed in. The IE filter has it’s own problems, but at least you get the desired effect.

  30. I’ve run into the same problem on this project that relied on alpha PNGs. The end result is that IE will correctly (correctly as it can : ) and fully drop out any pixel that has an alpha as if it were a transparent GIF, while Firefox and others that support alpha pngs will display the alpha.

    The solution could not be created in Photoshop. As far as I know, this is a known limitation of Photoshop PNGs. I had to create the PNG files in Fireworks.

    Note that getting the vertical background tiles to be seamless is much harder when working with so many variables. Variables include: (a) seamless alpha tile (b) seamless IE tile and (c) seamless color tile.

    As part of this process I’ve realized Fireworks produced slightly smaller images that look better than Photoshop”s (Image Ready”s) “save as web”. I tend to use Fireworks more often now for slicing images.

    Giving credit where due : ) this article helped get me on the right track.

    If you really want check out the details on this project”s random switching of the background images on each page and the Mambo CMS integration written by Graham Spice, the developer responsible for the project.

  31. Was searching the web looking for a solution to my alpha issue. Noticed that you have a problem. I apologize if this does not help, didn’t have time to read everything fully. However…

    I think it’s best to split your problem into two parts – what PS is doing PNG wise and viewing it on the web. I recently solved the PS png/alpha problem.

    Do a Save As Web. Select PNG over on the right, pick a reasonable number of colors. On the bottom right select the palette entries (one at a time) that you want to be transparent and using the little -> right arrow menu pop up – toggle it’s status between transparent or not.

    This will give you explicit control over what palette index is transparent or opaque.

    This will at the very least give you a correct PNG with transparency. The web, that’s another problem…

  32. Eric:

    I haven’t tried these Photoshop directions (http://www.axialis.com/tutorials/tutorial-misc001.html), but I have used the analogous Corel/JASC PaintShopPro instructions, and they work great for creating alpha-blended images. As you’ve discovered, this can be quite tricky, especially since almost every application I’ve tried has significant quirks in the way it handles alpha transparency, including frequent inconsistencies even within a single program. Generally, alpha support is only partial, regardless of what you might otherwise think.

    Give it a try and let me know how it works…

  33. This is currently impossible with GIMP, because it doesn’t save the correect chunk. What you need is a "tRNS" chunk to be saved set to the colour of your bullet — GIMP doesn’t do this at the moment. Reference: thread "PNG binary transparency"; gimp-user, thread, aproximately dated September 12-13, 2005.

    A suggested workaround is to use ImageMagicK to set the tRNS chunk, after making the bullet in GIMP. However, you shouldn’t even be taking advantage of this bug in MSIE’s implementation of the PNG format — just use regular transparency (which is possible in GIMP).

  34. Ah, tweakpng and bKGD is really nice! Now the logo on my website blends in better with the background in IE :).

    So far, I”ve been using 8-bit paletted PNGs with one fully transparent colour (like GIF, but then a smaller and better format) (in Fireworks: export to 8-bit PNG with exact colours and alpha), which works nicely as well.

    ~Grauw

  35. Eric: I think what you want to do is for that image, to set bKGD to black (using TweakPNG).

  36. You could just use the IE specific alpha channel filter for PNG’s in your CSS, but filter it out for other clients so the CSS is still standard. It’s a server side hack but it’ll work in everything.

  37. GIMP with Photoshop UI: http://freshmeat.net/projects/gimpshop/

  38. If you didn’t like GIMP’s interface, you might want to try gimpShop. GIMP, but with PhotoShop menu setup and such.

    http://plasticbugs.com/?p=241

    If you mean the looks of the X11, then if you have a Mac, Apple’s X11 isn’t too bad looking.

  39. There are also two photshop plugins I know of that let you set the bkgd color value:

    pngout – http://www.ardfry.com/png-plugin/index.html
    web image guru – http://www.vimas.com/ve_guru.htm

    Sadly, both cost $

  40. I see that in IE6 — but I use the basic pngbehavior.htc trick to force IE6 to render pngs properly. Which works just fine on Windows xp with IE6.

    The same graphic in IE7 (Vista) renders first with a black fringe before the htc behavior kicks in and fixes everything. While it does fix things, it’s ugly as sin when you are using something like jquery to fade things in and out (jquery’s fadeIn, fadeOut effects)

    It seems to happen even if I make the png graphic in Fireworks, although that may also be a factor of the “improvements” to both Photoshop and Fireworks from our friends at Adobe in CS4. I just recently installed the Master Collection CS4 on my (ew) Vista desktop and have started using it there.

    Fireworks has always let you set the background or matte of a 32bit png export but adjusting that doesn’t seem to (now) have any effect.

    I’m eager to find this answer, too.

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview