Exporting PNG's with Alpha Channel from Photoshop - How?
by Dave Calabrese · in Technical Issues · 12/14/2005 (10:47 am) · 30 replies
This is nagging the heck out of me since I did it just last night... and now I can't do it!
Ok, so, I'm trying to make a .PNG where only portions of it have environment mapping on my .DTS model. I've done this before, and I know the way to do it is your PNG _MUST_ have an Alpha Channel on it, and it has to be set up properly in Max and all that. When you load your saved .PNG back in to photoshop and you look at the Channels tab, there MUST be an alpha channel. This I have done before... and now I can't make it happen! No matter what I do, when I save my .PSD, with an alpha channel, as a .PNG or a SuperPNG, the alpha information NEVER saves!
Could someone please give me exact steps to do this so I can see where I may be going wrong?
Thanks,
-Dave C.
Ok, so, I'm trying to make a .PNG where only portions of it have environment mapping on my .DTS model. I've done this before, and I know the way to do it is your PNG _MUST_ have an Alpha Channel on it, and it has to be set up properly in Max and all that. When you load your saved .PNG back in to photoshop and you look at the Channels tab, there MUST be an alpha channel. This I have done before... and now I can't make it happen! No matter what I do, when I save my .PSD, with an alpha channel, as a .PNG or a SuperPNG, the alpha information NEVER saves!
Could someone please give me exact steps to do this so I can see where I may be going wrong?
Thanks,
-Dave C.
About the author
Recent Threads
#22
03/09/2007 (1:36 pm)
For all the time I've spent fiddling with Torque art, I never realized that, in order to use PNG alpha to affect reflectivity, you had to actually delete Photoshop's default PNG plugin and replace it with this SuperPNG plugin. Or this specific old version of the plugin (which is still available here, btw http://fosters.realmwarsgame.com/tools/SuperPNG.zip). Wow. I guess I never *needed* to use the env map this way, so when I'd mess with it, I wouldn't get too hung up on it not working. One of those little potholes that can really trip up artists trying to use this engine.
#23
03/09/2007 (1:38 pm)
That makes me wonder, does/could Torque support TGAs? That's the format that I most often see used in other engines when a separate alpha channel is required.
#24
I guess where you could say this is an issue with Torque is it uses the Alpha channels to understand where to render reflectivity / special effects (same goes for TSE), however this is something that a skilled engine programmer (read: not me) might be able to modify to work like many other game engines, where they use different graphics to achieve this. (For example, the Doom 3 engine uses greyscale images in places that TGE/TSE would use the alpha channels.)
03/09/2007 (1:40 pm)
This is actually not an issue with the Torque engine - this is a problem with Photoshop itself. Adobe busted the proper exporting of alpha channels around version 4.5 and never correctly fixed it. To prove this, save out your PNG and open it with another program, or even photoshop - notice your alpha channels are gone! Now save it with SuperPNG and you will see your alpha channels are there.I guess where you could say this is an issue with Torque is it uses the Alpha channels to understand where to render reflectivity / special effects (same goes for TSE), however this is something that a skilled engine programmer (read: not me) might be able to modify to work like many other game engines, where they use different graphics to achieve this. (For example, the Doom 3 engine uses greyscale images in places that TGE/TSE would use the alpha channels.)
#25
03/09/2007 (1:45 pm)
@Spencer: I'm pretty sure that Torque does support TGAs, however I'm almost positive it's going to have the same alpha channel requirements of PNGs. But here is a neat trick, one that we used to greatly reduce the download footprint of TubeTwist, which might be expendable in some fashion - You can use JPGs as a transparency matte. What you do is create 2 JPGs. One is your image. The second is a greyscale matte. Now name the first 'myImage.jpg' and the second 'myImage.alpha.jpg'. Apply the 'myImage.jpg' to a model, and it will automatically use the alpha matte for transparency. I have no idea how expendable this is, however it could be a start to what you want if this has more in-depth abilities than I'm aware of.
#26
Just use the proper png plugin and be happy. (the old SuperPNG plugin is available somewhere on TDN too, but can't be bothered to look up the exact link).
What Dave brings up about jpg is a good point though, we had a long discussion about this on the IRC channel just yesterday. Using myImage.jpg and a greyscale myImage.alpha.jpg can save you a lot of space (it works exactly like loading a png with alpha, just that the channels are split up. It should work on everything from models to GUIs to whatever too). What I suggest doing is to develop with pngs and later if the file size proves to be a problem, just write a small batch or script to convert your pngs into the two jpgs. With jpg you can control the file size a fair deal by messing with the rate of compression.
03/09/2007 (3:21 pm)
And I'm pretty sure torque does NOT support TGA. Not out of the box anyway (should be reasonably easy too add though, the TGA format is extremely straight forwards. Should take a programmer about 15 minutes to write a loader, heck, takes ME about 15 minutes to write a loader if I had to). TGA _really_ isn't a good format though, the files are huge. Yes, it supports compression, but only RLE compression which basically means it only works well on images with large areas (actually, technically, long lines) of the same color.Just use the proper png plugin and be happy. (the old SuperPNG plugin is available somewhere on TDN too, but can't be bothered to look up the exact link).
What Dave brings up about jpg is a good point though, we had a long discussion about this on the IRC channel just yesterday. Using myImage.jpg and a greyscale myImage.alpha.jpg can save you a lot of space (it works exactly like loading a png with alpha, just that the channels are split up. It should work on everything from models to GUIs to whatever too). What I suggest doing is to develop with pngs and later if the file size proves to be a problem, just write a small batch or script to convert your pngs into the two jpgs. With jpg you can control the file size a fair deal by messing with the rate of compression.
#27
03/09/2007 (3:37 pm)
One note I'll add to the JPG / alpha.JPG trick that I found in actually implementing this is that any blurred edges, like those that you might have on the edge of a fading border or drop shadows, can sometimes look a little wonky after doing this conversion, so you may need to play with things and adjust some of your alpha.jpgs to get the originally intended PNG/Alpha effect. If you download the TubeTwist:QFE demo, and look VERY closely at the dropshadows on the GUIs, you can see how they don't look exactly like how you would expect drop shadows to look. I ended up just working around this for my TubeTwist art. Anyway, just thought I would note this so you are aware of it!
#28
03/09/2007 (3:44 pm)
Yeah, jpg compression can be pretty nasty especially in faded areas. You can probably minimize this problem a bit by not compressing the alpha image quite as much as the color one.
#29
While the current default Photoshop approach to PNGs might be busted with regards to Torque's use of PNGs, I actually like it for most other things (one man's bug is another man's feature :). I'd rather work directly into transparency than deal with a separate alpha channel if I can help it.
For anyone else reading this, Photoshop's current approach is to - as Magnus pointed out earlier in this thread - give PNGs transparency instead of alpha. So PNGs in default Photoshop are treated like any layer, in which if you erase into them, you see the checker pattern show through.
I can see how, when Adobe moved to that method and away from a separate alpha channel, they tripped up people using tools like Torque - tools that depended on a discreet alpha channel.
But if you're doing something like web graphics, you don't really need that discreet alpha channel. It's easier to just edit that transparency directly.
For my uses, however, I don't work directly into the PNG file. Instead, like most game artists (and web artists too, probably), I work into a Photoshop file, and do a save-as to produce my PNG. This being the case, the SuperPNG will be a real lifesaver.
Still, it is a little awkward to have to dig up and use an old PNG plugin. And it's not obvious: I'm pretty sure in all the tutorials I looked at, none of them said, "go find this old plugin before you try this." They just said export PNGs this way, to get the env map to work this way... And seeing mention of "alpha" I just figured it meant "transparency." Well, I suppose that's why the docs are in a wiki (TDN) now: so I can go fix them myself instead of complaining.
BTW, the separate alpha channel as JPG is a good idea, though it complicates the pipeline in that I can't just do a save-as to spit out a game file from a working file. I suppose I could create a Photoshop action that would do something like that in one step, though... That's where I get a little left behind: anything that involves anything like scripting :).
Magnus, I envy your ability to whip up scripts and code changes as you need them.
03/09/2007 (4:15 pm)
@Dave, While the current default Photoshop approach to PNGs might be busted with regards to Torque's use of PNGs, I actually like it for most other things (one man's bug is another man's feature :). I'd rather work directly into transparency than deal with a separate alpha channel if I can help it.
For anyone else reading this, Photoshop's current approach is to - as Magnus pointed out earlier in this thread - give PNGs transparency instead of alpha. So PNGs in default Photoshop are treated like any layer, in which if you erase into them, you see the checker pattern show through.
I can see how, when Adobe moved to that method and away from a separate alpha channel, they tripped up people using tools like Torque - tools that depended on a discreet alpha channel.
But if you're doing something like web graphics, you don't really need that discreet alpha channel. It's easier to just edit that transparency directly.
For my uses, however, I don't work directly into the PNG file. Instead, like most game artists (and web artists too, probably), I work into a Photoshop file, and do a save-as to produce my PNG. This being the case, the SuperPNG will be a real lifesaver.
Still, it is a little awkward to have to dig up and use an old PNG plugin. And it's not obvious: I'm pretty sure in all the tutorials I looked at, none of them said, "go find this old plugin before you try this." They just said export PNGs this way, to get the env map to work this way... And seeing mention of "alpha" I just figured it meant "transparency." Well, I suppose that's why the docs are in a wiki (TDN) now: so I can go fix them myself instead of complaining.
BTW, the separate alpha channel as JPG is a good idea, though it complicates the pipeline in that I can't just do a save-as to spit out a game file from a working file. I suppose I could create a Photoshop action that would do something like that in one step, though... That's where I get a little left behind: anything that involves anything like scripting :).
Magnus, I envy your ability to whip up scripts and code changes as you need them.
#30
There is one additional problem with saving transparency rather than a separate alpha, the background color isn't saved when using transparency! This can create white "outlines" around the edges when using these png files as textures (most common place you see this is in foliage textures and similar things with small details), with a proper alpha you can control this behavior by putting a more sensible color than white in the background.
re: separate alpha jpgs; Yes, it makes it a bit more complicated, which is why I said to just save the stuff as png and worry about converting stuff later if the file size becomes a problem.
03/09/2007 (4:44 pm)
Yep, I definitely agree, for "web stuff" the photoshop way of saving pngs is just fine. For games (or as textures in any other 3d graphics for that matter) it's not good to do it the way photoshop does it.There is one additional problem with saving transparency rather than a separate alpha, the background color isn't saved when using transparency! This can create white "outlines" around the edges when using these png files as textures (most common place you see this is in foliage textures and similar things with small details), with a proper alpha you can control this behavior by putting a more sensible color than white in the background.
re: separate alpha jpgs; Yes, it makes it a bit more complicated, which is why I said to just save the stuff as png and worry about converting stuff later if the file size becomes a problem.
Quote:Magnus, I envy your ability to whip up scripts and code changes as you need them.That thing is both a bit of a blessing and a curse... I DO write a lot of scripts and gizmos that help speed up my workflow (sometimes saving me hours, days or even weeks of painful manual labor), but on the other hand doing that stuff is damn boring. Every artist should get a complimentary tool programmer to just sit there and fix stuff when you need it if you ask me. =)
Torque 3D Owner James