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

Alyatirno · December 14, 2024, 6:39pm

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.

Alyatirno · December 14, 2024, 8:03pm

If you import a PNG and you are getting “garbage” in Unreal and then open it in photoshop and it looks fine

there is a way to recover that garbage information

Go to Layer > Layer Mask > From Transparency to move that transparency into a Mask

Then set the properties of that Mask to Density 0%

and BAM! there it is, all that garbage is back!

Hurray, now how did that garbage information got created in the first place?

Well I’m glad you asked.

When an artist creates an image in photoshop and saves it as PNG, photoshop is creating that invisible color information but obscuring it from the artists, why should they care right?

Let’s say they create a Circle selection and paint it with a gradient