How to import transparent Photoshop textures into Unity

Unity does a great job of automatically importing Photoshop files. but it has an issue with transparency that, while easy to resolve, is poorly documented in my opinion. Here’s my attempt at writing the definitive guide on the subject.

The Problem

To illustrate the problem I’m going to use the following texture that I created in Photoshop:

The text 'Unity 3D 4TW!' in blue on a transparent backgroundd

I also made a little demo scene that has a plane positioned to face the camera. I then created an unlit, transparent material with the image I made above as a texture, and applied that to the plane:

The Unity Editor showing a plane and the property inspector for the shader applied to it

Here’s what the texture looks like in the game view:

The text 'Unity 3D 4TW!' on a gray background with white fringes showing at the edges

Notice the white fringes around the border.

Why this is happening and whether Unity Technologies should fix it is the subject of some debate, but here’s what I was able to gather:

  • The problem happens with anti-aliased pixels that lie on the boundary between opaque areas and transparent ones. These pixels will be partially transparent.
  • When exporting images with such pixels to a format that supports transparency, Photoshop assumes that the background behind these partially transparent pixels is white, which causes the white fringes seen above.
  • When importing Photoshop files, Unity will faithfully follow the same procedure, effectively acting as if the file in question was exported from Photoshop to a transparent image format like PNG or TIFF.
  • My guess is that Unity is doing this to be consistent with Photoshop’s way of doing things.

That is all good and dandy, but it doesn’t solve the problem. Fortunately there is a relatively simple way of working around it, although it does require some legwork.

The Solution

There are two components to the solution:

  1. First, we will need an appropriate background for those semi-transparent pixels so that when Unity imports the file, it won’t default the background color to white.
  2. Since we will no longer have a transparent background for our image, we will need another way to communicate transparency information to Unity. This is easily done with an alpha mask.

I’ll illustrate the solution using this slightly more complex texture:

The text 'Unity 3D 4TW!' in red and blue

First the background: I’ll need to create a new layer underneath the text, and then manually paint red behind the the red pixels and blue behind the blue pixels. After some wrestling with the brush tool, I ended up with the following:

Screen shot of Photoshop showing an red blob painted over a blue background

Now for step number two: Creating an alpha mask. For this we will need to use Photoshop’s Alpha Channels

To create an alpha channel, you’ll first need to hide everything except the layers that will be visible in Unity. In my case this will mean hiding the background layer that I’ve created above. So my image will now look like this:

Screen shot of Photoshop showing the text Unity 3D 4TW! in red and blue

Then open the Actions panel, look for an item called Alpha Channel from Visible Layers under the grouping Video Actions, and run it by selecting it and pressing the little play icon at the bottom of the actions panel:

Screen shot of Photoshop with the actions panel open

A dialog box will appear. Click the “Continue” button. The action should finish almost instantly. Now switch to the Channels panel and notice the new alpha channel that was added there:

Screen shot of Photoshop with the channels panel showing a channel named Alpha 1 set to invisible

Notice that it is set to invisible. Make sure to make it visible before continuing, as shown below:

[Screen shot of Photoshop with the channels panel showing a channel named Alpha 1 set to visible

Finally, make the background layer visible again:

Screen shot of Photoshop with a red semi-transparent blob smeared over the text Unity 3D 4TW! in red and blue

Save the file and view it in Unity. In my case I used the same demo scene from before, and here are my results:

Screen shot of Unity showing the text Unity 3D 4TW! in red and blue and without fringes

Notice that although the image preview looks completely wrong, the actual texture in the game view look correct and doesn’t show any white fringes.

And that’s it!

Too much work?

Unity Technologies also provides a Photoshop action that automates the whole alpha channel creation process. I have never used it myself, but I think it should be able to produc acceptable results for most simple images.

 

Leave a Reply