Alpha-channel/transparency in PNGs - but yet unsolved issue
by Tolstiy · in Artist Corner · 09/18/2012 (9:23 am) · 14 replies
Hey guys!
Here is the problem that I've been trying to solve for a while now but yet came to a half-solution.
What we have: a PSD file with an image (this time - these are digits from 0 to 9). The idea is to use the digits on the background, thus, we need them with alpha-channel (transparency). And here come the trouble.
I've tried (Photoshop CS3 for Mac):
- save for web with PNG24
- save as PNG
- d/l superPNG plug-in
Both of these methods give me crap - no transparency but pieces of the background of something really unexplainable - where did all these come from.
I've uploaded the original PSD and the "great" (hm-hm) crappy result I've got - http://www.sendspace.com/file/259add
Any ideas?
Thanks!
P.S. Yep, I've tried searching the forums and found the superPNG method which didn't work out for me. And all the articles out there with "that's easy, just 'save for web' it" just simply don't work.
Here is the problem that I've been trying to solve for a while now but yet came to a half-solution.
What we have: a PSD file with an image (this time - these are digits from 0 to 9). The idea is to use the digits on the background, thus, we need them with alpha-channel (transparency). And here come the trouble.
I've tried (Photoshop CS3 for Mac):
- save for web with PNG24
- save as PNG
- d/l superPNG plug-in
Both of these methods give me crap - no transparency but pieces of the background of something really unexplainable - where did all these come from.
I've uploaded the original PSD and the "great" (hm-hm) crappy result I've got - http://www.sendspace.com/file/259add
Any ideas?
Thanks!
P.S. Yep, I've tried searching the forums and found the superPNG method which didn't work out for me. And all the articles out there with "that's easy, just 'save for web' it" just simply don't work.
#2
09/18/2012 (9:53 am)
EDIT: site double post bug! 
#3
09/18/2012 (10:01 am)
I didn't mess with the psd. I just threw the png in the torque art directory. 
#4
09/18/2012 (10:01 am)
As I 'understand it' there may be an issue with the way Photoshop saves PNG files and transparency. I've heard it can cause issues like this. Try using another graphics package to test. I do all transparency textures in paintshop pro as I had similar issues and it works fine as PNG format using that.
#5
I've figured out that I can edit PNGs in Paint.net using the Eyedropper on a proper image with transparency and than using the Paint Bucket to fill those places where I want to have transparency in my images. But! There is an opinion that using a Bucket or whatever makes the image edges rough - just didn't have a chance to test it in the game.
This is why I was thinking that there might be (lets wait for more answers to come) a way to save a PNG file from a PSD source in Photoshop not damaging the original quality and the like...
09/18/2012 (10:15 am)
Guys, thanks for the fast replies.I've figured out that I can edit PNGs in Paint.net using the Eyedropper on a proper image with transparency and than using the Paint Bucket to fill those places where I want to have transparency in my images. But! There is an opinion that using a Bucket or whatever makes the image edges rough - just didn't have a chance to test it in the game.
This is why I was thinking that there might be (lets wait for more answers to come) a way to save a PNG file from a PSD source in Photoshop not damaging the original quality and the like...
#6
Ron
09/18/2012 (11:29 am)
Photoshop has been notorious for not handling PNG transparency correctly. I had MAJOR issues with a past project and I switched over to GIMP a few years ago. I have never looked back. As for your issue with the paint-bucket "jaggys", if you do a similar task in GIMP, you have to option to anti-alias the final image. It's a free program, I recommend you give it a go.Ron
#7
Sorry for the silence - autumn is here, so, caught a cold :(
Ron, I'm a bit lame with programs - I just re-translate the problem from the artist who doesn't speak English.
So, I save a PSD file in photoshop with two layers - the image itself and transparent background. Then I load the PSD in GIMP. Export it to PNG - everything is cool, the background is transparent, but I have very rough borderline of the image where it 'touches' the background. How can I use anti-alising here?
Many thanks for your help!
10/07/2012 (2:14 am)
Hi guys!Sorry for the silence - autumn is here, so, caught a cold :(
Ron, I'm a bit lame with programs - I just re-translate the problem from the artist who doesn't speak English.
So, I save a PSD file in photoshop with two layers - the image itself and transparent background. Then I load the PSD in GIMP. Export it to PNG - everything is cool, the background is transparent, but I have very rough borderline of the image where it 'touches' the background. How can I use anti-alising here?
Many thanks for your help!
#8
Any ideas?..
10/07/2012 (3:02 am)
Quick update: Ron, I figured out how to apply anti-aliasing, but it didn't help much - the border of the image looks pretty bad and spoils the whole picture.Any ideas?..
#9
Can you put an example PSD and the best PNG you managed to get out of it on the web somewhere for people to look at?
10/07/2012 (5:46 am)
When Photoshop says "24-bit", it really means that. 8 for each of red, green and blue, no alpha. In addition it also treats PNGs like PSDs. That means it contains what you expect from a PNG and the layers in extra data. Not recommended art for import into a game - export for web sorts that out, once you figure out how to export with transparency :)Can you put an example PSD and the best PNG you managed to get out of it on the web somewhere for people to look at?
#10
There is an example in the upper post, but lets take another image which shows the same problem: http://www.sendspace.com/file/a4a1bm
The achieve has both the original PSD with a transparent background and the resulting PNG (crappy one).
I did take a look at PNG24 and got the idea of 8x3 for RGB and nothing left for alpha. But, as said above, I also used save as option and just picked PNG.
Another thing to add: our designer works on Mac and I'm on PC. In Photoshop or Viewer on Mac everything seems to be perfect. When we look at the PNG on PC, I've figured a quick way to check it.
I use ACDsee (or basic Paint of WinXP). I do know that both of these progs don't support alpha channel, but testing showed that if the PNG image has the proper transparency, those parts of the pic are black. But making the parts of the pic just black, of course, doesn't give us transparency in the engine :))
10/07/2012 (7:19 am)
Ronny, thank you for your answer.There is an example in the upper post, but lets take another image which shows the same problem: http://www.sendspace.com/file/a4a1bm
The achieve has both the original PSD with a transparent background and the resulting PNG (crappy one).
I did take a look at PNG24 and got the idea of 8x3 for RGB and nothing left for alpha. But, as said above, I also used save as option and just picked PNG.
Another thing to add: our designer works on Mac and I'm on PC. In Photoshop or Viewer on Mac everything seems to be perfect. When we look at the PNG on PC, I've figured a quick way to check it.
I use ACDsee (or basic Paint of WinXP). I do know that both of these progs don't support alpha channel, but testing showed that if the PNG image has the proper transparency, those parts of the pic are black. But making the parts of the pic just black, of course, doesn't give us transparency in the engine :))
#11
Inspecting the image, it certainly looks like anti-aliasing has been applied to it. But something in the export process has messed with it before that point, maybe. My PS knowledge ends here, so no idea how to fix it :/
10/07/2012 (7:45 am)
I think I know what the root cause of the jaggedness could be, then: I'm guessing the artist probably uses vector formats internally in Photoshop, which means he can scale the hell out of it without fugly edges. But the saved PSD looks like it only has a bitmap image when rendered in Preview on Lion:Inspecting the image, it certainly looks like anti-aliasing has been applied to it. But something in the export process has messed with it before that point, maybe. My PS knowledge ends here, so no idea how to fix it :/
#13
10/10/2012 (3:33 am)
Personally I use Macromedia (now Adobe) Fireworks, have done for years, PNG is its native format. When creating/editing textures, I always begin with a transparent background. The difference from what I read is, that the alpha channel is only available in PNG32, not 24 or less. There is a preview window in Fireworks that allows me to see what the texture/picture will look/render like, and its exported size. I've tried other programmes including Photoshop, Gimp, Paint, Paintshop Pro etc, but come back to my tried and 100% working Fireworks.
#14
Thank you all for you comments and thoughts!
10/11/2012 (10:31 am)
Problem solved - thanks to these discussions, I've managed to talk the programmer into taking a closer look at the engine and its work on PNG with transparency. Long story short - it was the engine's problem which has been solved.Thank you all for you comments and thoughts!
Associate Michael Hall
Distracted...