Fix: White Border around imported UI elements using .PNG alpha transparency

I wanted to share this just because this is something that I see dozens of threads about, all of which have completely wrong fixes suggested. Many have noticed this issue with .PNG files imported to UE after export from PS or other applications:

Jagged white borders around UI elements. I just wanted to post because there is (as far as I have seen) no thread posted with the correct fix for this issue, so hopefully this can help somebody googling the problem in the future…

First, some of the suggested fixes that I have seen in other threads which are absolutely wrong and which you should not do:

  • Changing the pad mode from power of two
  • Using a super high resolution image with altered compression settings
  • Changing the filter mode to something like nearest instead of the default setting

These are all hacky fixes that will cause other issues and do not directly address the real problem. The issue is caused by the way Photoshop (and some other applications as well) handle .PNG Alpha channel on save, which is solid filled on Export. The fix is to just stop using Adobe’s problematic .PNG save as functionality and instead use something like fnord SuperPNG which has an option for Clean Transparency:

And the completely clean result:

image

Hope this helps someone :slight_smile: