This typically happens when mipping. Basically when the texture size gets smaller, the uvs are not neccesarily perfectly placed on the pixel you want, so a lot of times they end up in the white space.
Simple answer - add some edge padding around the box. If there is blue on a couple more pixels outside of the transparent area, then you wont notice this.
Targa, no questions asked. PNG's are extremely flimsy when it comes to using them for anything other then saving pictures for porn, so as M4D said, stick with Targa's.
png does save the alpha channel, but the transparent part of your image will auto-colored white by photoshop for the rgb channel.
so your alphamask will take, for example, a 50% of a pixel on the edge, which is not blue, but as shown in photoshop, but 50% blue and 50% white out of the rgb color channel, as photoshop saves .png this way. plus the mipmapping problem, which give you the same problem for 1 bit alphas.
to get clan results use an alpha channel and forget the masks. for your example, make the rgb blue or whatever color the box should have and copy your mask to the alpha channel. then save as .tga with alpha channel checked(32bit).
another way for multicolorstuff, like leaves for example: copy your leaf mask to the alpha channel. then duplicate the masked leaf layer, gaussian blur it a little. dulicate 20 times and order it behind your crisp original. then your edges should have about the right color. no more problems.
I do want the bleeding, actually, but I want it to be a specific color rather than white. The problem isn't with the PNG file format or mip-mapping; fade1 nailed it when he said
png does save the alpha channel, but the transparent part of your image will auto-colored white by photoshop for the rgb channel.
So, what you're all saying is that there is no way to save a non-white transparent pixel unless I use an alpha channel in the PSD? I prefer layer masks because they allow me to see the end result while working on the image...
oh, yeah, your using pngs and just leaving the background empty arent you? Ick. I've had nothing but problems doing that. I would suggest using targas and make an alpha channel.
I would also avoid the png format. Edge bleeding + regular alpha channel is the cleanest way (so .tga or proper .dds format)
The only workaround i've found with .png is to save is with a layer with the colors you want at 1 percent opacity. It's ok when used as mask, because the little opacity is cropped, but it's noticeable with regular alpha.
Also to see the ending result, put all your layers in a group and create a mask on it. When you're done, copy this mask in the alpha channel and desactivate your group mask.
I'm stuck with PNG's in my work, so I normally save Opacity into a separate Grayscale map. You can preview it as a layer mask in your Diffuse, but when it comes time to save, just dump it to it's own single-channel map. When it comes time to compile it, our programmers merge the Opacity into Diffuse on their end, and the results are much better. It's dumb, but so is using PNG. /shrug.
oh, yeah, your using pngs and just leaving the background empty arent you? Ick. I've had nothing but problems doing that. I would suggest using targas and make an alpha channel.
This a thousand times. Since that's your only layer, as far as the exporters are concerned the transparent areas have nothing, so how would it know what color to fill the rbg portion with? White just happens to be what Photoshop does, maybe some programs fill with black, etc. But the way to fix this is hilariously easy. Just make a layer underneath everything and fill it with whatever color you want, and make sure you create an alpha channel like gsokol said. From a couple tests this seems to work perfectly for TIFF and TGA files, but not for PNG files since apparently those rely on doing the transparency by actually having the areas empty (which will produce a white background).
Also you don't really need to use the Save for Web and Devices thing. The regular exporters for TIFF and TGA work just fine.
One note is that the exporters use the final composited color, so to speak, of the image. So, if you have one layer with a 50% transparent red dot over a green background, with alpha channel showing this 50% red dot, your exported image will have its 50% transparency, but the red will be mixed with green, rather than the red being simply 50% transparent. This probably makes no sense the way I'm describing it haha, and it's unlikely to ever be a problem anyway, but just thought I'd mention it.
I had this problem before. As you stated Photoshop saves the RGB pixel color of transparent pixels white.
To fix this I created an export script that exported saved a TGA with my alpha channel, Then the script used Nconvert command line (by the makers of XN view) to convert the TGA to a PNG.
The benifit of this was that Nconvert leaves the pixel color alone and only changes the alpha value of the pixel. So I just made a background layer with whatever color I wanted. Usually black.
Let me know if you need help putting an export script together. Your programmer may be able to do it pretty easily. I can't share my own since there is a lot of our project specific code in it.
You dont need to export your photoshop files at all in unity. Just put your psd's in the Assets folder, and dont use transparency, create an 4th channel in photoshop which will be used as the alpha channel.
Not sure if this thread is dead or not, but I just googled across a few posts on some other forum talking about a free plugin called SuperPNG (http://www.fnordware.com/superpng/). You remove Photoshop's PNG plugin and replace it with SuperPNG, and images saved in PNG alpha STAY in PNG alpha, without deleting or "whiting-out" your un-alpha'ed portions.
This could also maybe solve the UDK and ZBrush issues of not approving PNG's?
It appears some apps like it and some don't. PS and Max both say it works, I haven't tested it anywhere else. Started a new thread for that here: http://www.polycount.com/forum/showthread.php?t=86951 so as not to thread-jack.
Replies
This typically happens when mipping. Basically when the texture size gets smaller, the uvs are not neccesarily perfectly placed on the pixel you want, so a lot of times they end up in the white space.
Simple answer - add some edge padding around the box. If there is blue on a couple more pixels outside of the transparent area, then you wont notice this.
Even if you exported it the way you had it setup you will get black pixels bleeding on the edges, so give some edge bleed like gsokol mentioned.
You could look for better png exporters, but personally I just use the targa format.
so your alphamask will take, for example, a 50% of a pixel on the edge, which is not blue, but as shown in photoshop, but 50% blue and 50% white out of the rgb color channel, as photoshop saves .png this way. plus the mipmapping problem, which give you the same problem for 1 bit alphas.
to get clan results use an alpha channel and forget the masks. for your example, make the rgb blue or whatever color the box should have and copy your mask to the alpha channel. then save as .tga with alpha channel checked(32bit).
another way for multicolorstuff, like leaves for example: copy your leaf mask to the alpha channel. then duplicate the masked leaf layer, gaussian blur it a little. dulicate 20 times and order it behind your crisp original. then your edges should have about the right color. no more problems.
I do want the bleeding, actually, but I want it to be a specific color rather than white. The problem isn't with the PNG file format or mip-mapping; fade1 nailed it when he said
So, what you're all saying is that there is no way to save a non-white transparent pixel unless I use an alpha channel in the PSD? I prefer layer masks because they allow me to see the end result while working on the image...
The only workaround i've found with .png is to save is with a layer with the colors you want at 1 percent opacity. It's ok when used as mask, because the little opacity is cropped, but it's noticeable with regular alpha.
Also to see the ending result, put all your layers in a group and create a mask on it. When you're done, copy this mask in the alpha channel and desactivate your group mask.
This a thousand times. Since that's your only layer, as far as the exporters are concerned the transparent areas have nothing, so how would it know what color to fill the rbg portion with? White just happens to be what Photoshop does, maybe some programs fill with black, etc. But the way to fix this is hilariously easy. Just make a layer underneath everything and fill it with whatever color you want, and make sure you create an alpha channel like gsokol said. From a couple tests this seems to work perfectly for TIFF and TGA files, but not for PNG files since apparently those rely on doing the transparency by actually having the areas empty (which will produce a white background).
Also you don't really need to use the Save for Web and Devices thing. The regular exporters for TIFF and TGA work just fine.
One note is that the exporters use the final composited color, so to speak, of the image. So, if you have one layer with a 50% transparent red dot over a green background, with alpha channel showing this 50% red dot, your exported image will have its 50% transparency, but the red will be mixed with green, rather than the red being simply 50% transparent. This probably makes no sense the way I'm describing it haha, and it's unlikely to ever be a problem anyway, but just thought I'd mention it.
To fix this I created an export script that exported saved a TGA with my alpha channel, Then the script used Nconvert command line (by the makers of XN view) to convert the TGA to a PNG.
The benifit of this was that Nconvert leaves the pixel color alone and only changes the alpha value of the pixel. So I just made a background layer with whatever color I wanted. Usually black.
Let me know if you need help putting an export script together. Your programmer may be able to do it pretty easily. I can't share my own since there is a lot of our project specific code in it.
Hope this helps.
This could also maybe solve the UDK and ZBrush issues of not approving PNG's?
It appears some apps like it and some don't. PS and Max both say it works, I haven't tested it anywhere else. Started a new thread for that here: http://www.polycount.com/forum/showthread.php?t=86951 so as not to thread-jack.