meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Clearly Impossible?

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.)

40 Responses»

    • #1
    • Comment
    • Thu 1 Sep 2005
    • 1849
    Lachlan Hunt wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 1927
    Sebastian Redl wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 1936
    Screwtape wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 1949
    hemebond wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 1952
    ant wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2110
    Anthony wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2125
    Steve Clay wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2138
    Anthony wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2234
    Anonymous Coward wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2253
    hemebond wrote in to say...

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

    • #11
    • Comment
    • Thu 1 Sep 2005
    • 2334
    another anonymous coward wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2338
    Anthony wrote in to say...

    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
    • Comment
    • Thu 1 Sep 2005
    • 2345
    John wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0117
    Anonymous Coward from comment #9 wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0329
    Jonathan Stanley wrote in to say...

    “Keep It Simple, Stupid!”

    IE6

    • #16
    • Comment
    • Fri 2 Sep 2005
    • 0331
    Jonathan Stanley wrote in to say...

    “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
    • Comment
    • Fri 2 Sep 2005
    • 0450
    Mitz Pettel wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0521
    Maniac wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0835
    Jan Eichhorn wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0849
    Mircea Botez wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0926
    Olly wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 0928
    Olly wrote in to say...

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

    • #23
    • Comment
    • Fri 2 Sep 2005
    • 0952
    John West wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 1026
    Anonymous Coward from comment #9 wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 1151
    David wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 1153
    Will Rickards wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 1355
    E, Lass wrote in to say...

    David, your PNG comes up gray in IE6 SP2.

    • #28
    • Comment
    • Fri 2 Sep 2005
    • 1449
    Josh Peters wrote in to say...

    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
    • Comment
    • Fri 2 Sep 2005
    • 1936
    Mike Dougherty wrote in to say...

    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
    • Comment
    • Wed 7 Sep 2005
    • 1347
    Kevin Goldman wrote in to say...

    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
    • Comment
    • Sun 11 Sep 2005
    • 1717
    Ian Dunlop wrote in to say...

    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
    • Comment
    • Mon 12 Sep 2005
    • 0134
    Dub Dublin wrote in to say...

    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
    • Comment
    • Tue 13 Sep 2005
    • 1706
    Michael Chang wrote in to say...

    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
    • Comment
    • Wed 14 Sep 2005
    • 2033
    Laurens Holst wrote in to say...

    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
    • Comment
    • Wed 14 Sep 2005
    • 2050
    Laurens Holst wrote in to say...

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

    • #36
    • Comment
    • Sat 17 Sep 2005
    • 0935
    Wesley Mason wrote in to say...

    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
    • Comment
    • Mon 19 Sep 2005
    • 1509
    Nan Liu wrote in to say...

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

    • #38
    • Comment
    • Wed 21 Sep 2005
    • 2209
    shorty114 wrote in to say...

    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
    • Comment
    • Thu 24 Aug 2006
    • 1124
    Nick wrote in to say...

    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
    • Comment
    • Mon 15 Dec 2008
    • 1754
    Casey wrote in to say...

    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.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


September 2005
SMTWTFS
August October
 123
45678910
11121314151617
18192021222324
252627282930  

Sidestep

Feeds

Extras