Fix / Explanation: PNG transparency artifacts when importing Photoshop Exported into Content

Alyatirno
Sat, 14 Dec 2024 18:39:59 +0000
Asset Creation

This problem was doing my skull in so I decided to take a deep dive into it because I wanted to get to the root causes and how to address it.

PROBLEM: PNGs exported from Photoshop will bring “garbage” color information when imported into Unreal.

EXPLANATION: Photoshop by default, preserves the color information in the image the PNG, and where the alpha is fully transparent, it saves white (R255,G255,B255), otherwise it saves whatever color that pixel has. Other programs such as Affinity Photo, erase that color information, if there is any transparency, it saves black (R0,G0,B0).

This posts suggests to use SuperPNG where you get a little more control over the Export which is a good suggestion, specially if you plan to use that texture with Pre-Multiplied Alpha (AlphaComposite), which is cheaper than translucent, I hear.

https://forums.unrealengine.com/t/fix-white-border-around-imported-ui-elements-using-png-alpha-transparency/1968557

However that does throw the Color information arbitrarily away. And you may want to keep it.

For instance, you will get a much better mask if the color data on the Image matches the one that is going to be transparent. if you are using translucent or masked.

Take this image for example:

If you simply save that as a PNG and import into unreal you will get this

If you use SuperPNG to clean it

However, if you use a Masked Material or a Translucent material you will notice a darker edge on your alpha, especially against a background that has the opposite value of the alpha.

Masked Result

Ideally, the color information there would be the same color that you are making transparent, so those edge artifacts will disappear.

To achieve that, what you can do is Save your transparency as an Alpha Channel

but ensure that the pixels that you are going to be masking are the same color as the ones that are not

Then, use SuperPNG to save that PNG, with Alpha for transparency but without “Clean Transparent”

Here are the results three different workflows

Simon_A: Default Photoshop Behavior
Simon_B: SuperPNG with “Clean Transparent”
Simon_C: SuperPNG with the transparency saved in the Alpha Channel and no Clean Transparent.

2 posts - 1 participant