When I create an image with an alpha background I get a outline of either white (when saved as png) or black (when saved as tiff). I know there are a few tutorials on how to remove this for photoshop but I am using Pixelmator and can not quite follow them. Are there any tutorial to get true alpha background to show up in Unity using Pixelmator to create the image?
The actual trick here is that the edge pixels of your image are stretched, or extend past the borders of your alpha. How you get there is up to you.
There are plugins to do this automagically in Photoshop, but the results can easily be duplicated by hand.
If you have a smudge tool in Pixelmator, you could just smudge out the edges of your image past the boundary of your alpha.
Well I am relatively new to 2D artwork as I have really only focused on programming since now. When you say “the edge pixels of your image are stretched, or extend past the borders of your alpha” what do you mean by the borders of my alpha? The alpha is just the transparent background (at leas on the image I am creating).
Take a look at the image.
The top is what your color map looks like, the second is what the alpha looks like. This is prone to exhibiting the white/black halo you see in game. If you extend the color portion outside the edges of the alpha (third section down) we allow the alpha to handle the blending like we see in the bottom portion.
Did that help?
Well the thing is that if I make the image wider, the black/white trim on the image just moves with it. Do I need to create a separate image that is just my alpha map?
Also, it is not possible to have sharp images with alpha? I mean where I have a black pixel and then the alpha instead of it fading to alpha?
Could you post, or PM me the image you are having problems with? At this point it would be easiest for me to debug your issue when I can see the file in question.
This is the file, this one has a white border in Unity.
In this case, I would switch from a PNG to a TGA with an Alpha channel.
The key is that the background, or the previously transparent pixels, are now the same color as the edge pixels in your image. This eliminates the pixel bleed of the transparency showing the white halo.
Here is a good read on how this happens posted by the Blurst guys:
http://technology.blurst.com/remove-white-borders-in-transparent-textures/
As far as I can tell Pixemator does not give you any control over the separate alpha channel so it does not seem to be possible to get rid of the border. I’m trying to find a solution to this myself so if I find one I’ll post it. Pixelmator uses masks only but might be a way to convert them on export. Here’s hoping.