PNG White Halo (Photoshop)

[Moogie]

Hi all.

I'm a new denizen to the world of Aquaria, and so far, am enjoying my time with it immensely. I just found Li today, but decided I did not like the way he looks, so I figured I could do some editing to him.

I've read a few threads here that give tips and advice about the white halo that appears due to the PNG being flattened onto white pixels. Try as I might, though, I just can't seem to get it working right for me!

I'm using Photoshop CS3. The PNG files I'm working on are 8bits/channel (I have tried other bit-settings but they appear scrambled in-game).

I tried using an Alpha channel and the Solidify plugin, but whenever I save the PNG file it loses its alpha channel. The only way I see around this is to use 16bits/channel, but as I mentioned, that just appears corrupt.

What I thought would be a simple edit has turned into something that required me to register here to ask for help. I wish my urge to register had come from a more pleasant circumstance, but oh well. I hope someone will be able to guide me to a solution. Perhaps a short step-by-step specifically for Photoshop? (I found something for GIMP, but I couldn't translate it to PS.)

Thanks.

[Alphasoldier]

Here you go.

[Moogie]

Hi, thanks for your reply. Unfortunately I have already tried following that tutorial. It's for Targa files, not PNG.

I tried it anyway, but my alpha channel always disappears when I save the file, and I still get the halo.

[Alphasoldier]

Oh, right, well... then my advice to you, place a black "halo" around the things yourself.
AKA
You paint a pretty wide 1% visible thick line around the original graphic, that takes away the white halo.

[Guy]

I don't quite understand why this issue is happening (I mean, that's the whole point of an alpha channel, right?) but surely it could be avoided just by starting with a black background when your create your graphics, instead of white?

[Alphasoldier]

It's happening because of the antialiasing ingame. You have full transparency right next to the normal opaque pixels, which, when being antialiased it mixes the solid pixel with the (nonexistent) standard white transparent pixels.
So when you would put a black 1% opaque halo around it yourself the solid pixels mix with the black and the white pixels at the edge aren't visible because it's mixing with a 1% visible pixel.

[Moogie]

Thank you, Alphasoldier! That's exactly what I needed.


@Guy: You're probably thinking of a similar issue that happens when people try to 'cut-out' a graphic from a white background, that leaves little stray pixels around. This is different, as you start with no background at all, just a transparent area.


Result with the 1% border:

[Sindhi]

OMG love the hair; much better than the Mohawk or whatever you call it. Do you let other people use your sprites? We would love to have Li as a separate main character along with Naija but it is hard to script. I would just like him to have cute hair for now...

We are also using PNG files and either GIMP or My Paint; I have Photoshop but I don't really know what I'm doing in it and use it for some things I can't figure out in GIMP. Sometimes the extra pixels and bad erasing show up better in PS than GIMP. We've been having constant white halo problems and I am having Yogoda fix mine but I need to learn what to do in all cases so I can do it myself. Sometimes the solution goes in one ear and out the other...

[Guy]

@Guy: You're probably thinking of a similar issue that happens when people try to 'cut-out' a graphic from a white background, that leaves little stray pixels around. This is different, as you start with no background at all, just a transparent area.

No background? I'm not sure what you mean, every image has some colour in the background when you hide the alpha channel. Usually this would default to white but if you, say, add a new layer of 100% transparent pure black behind all your other layers, then when you save as png the invisible background will be black. Or am I still missing something here...

[Alphasoldier]

That's one nice haircut man, love the sprite.

Guy, any completely transparent pixel always defaults to white in PNG (I believe there's an option to not have this, but I'm not sure).
Secondly, PNG does not have a separate alpha channel, it only has transparency.

[Guy]

Okay, I'm more confused now. I understand your first comment, and while it entirely depends on the software creating the PNG, it does seem to hold true for the program I'm using too (Acorn).
I totally don't understand your second comment though. A PNG with transparency uses 32 bits per pixel (RGBA) and therefore has an alpha channel inasmuch as it has red/green/blue channels. I have another program (GraphicConverter) which seems to not handle alpha channels in the 'typical' way. Eg, I can paint black into a fully transparent area and it will remain transparent but will correctly record the pixels as black when saving. I can verify this because the same program can also 'remove' the alpha channel, revealing the true colour of all pixels in the image. Just as an example, here's a Li head sitting on a forest background but retaining the original mask, so you can't see the forest without removing the alpha channel (unless you're using IE6, which I understand won't recognise the alpha channel in the first place ):

[Lady-Succubus]

I think the problem is that while PNG has an alpha channel, Photoshop doesn't treat it like it does, instead preferring to think of transparency as places where there are no color. And where there is no color... Photoshop doesn't let you give it a color. xD

[Yogoda]

I don't know about Photoshop, but in Gimp there is an option that allows to save the color of transparent pixels when saving the picture.

Picture with alpha layer :

Alpha layer removed after saving color for transparent pixels



Alpha layer removed without saving color for transparent pixels (pixels totally transparent are defaulted to white)


So the key to remove the halo is to fill the transparent areas with black and save the transparent pixels color (I don't know how to do this in Photoshop)

[Alphasoldier]

Erm, I already gave him the solution, Yogodo and I find your explanation confusing. @_@
And guy... what I meant to say is, is that Photoshop does not make a different alpha channel in the channel list right next to red, green and blue, but it uses the transparency that's in the picture, if said transparency if completely transparent it defaults to white.

[Yogoda]

Sorry if it was confusing, just wanted to tell how it works in Gimp