Photoshop Files Give White Outline on Transparent Textures

Can anyone tell me how I can fix an annoyance I am having with Unity right now? When I use a photoshop file with transparency, often I get a white outline around the transparency borders. I know the issue is that when Unity converts the file, it creates the color texture where all of the transparent areas are rendered white and then it renders a transparency mask. The white outline is caused by that white area bleeding into the final masked picture. I just don't see anywhere in unity where I can specify what I want the transparent color to be so I can match it to what I need. How have you guys fixed this?

You can see what I am talking about in my screenshot below.

 

Use an alpha channel instead of relying on transparency. There's several topics already about this, which explains in more detail.

--Eric

 

In Photoshop, save the transparency selection of the color layer as a new alpha channel, then add a new layer with the background color you want.

 

Thanks for the responses guys. I can do the alpha channels thing, I was just hoping there was possibly an easier, more streamlined, way to handle this with Unity.

 

You can't, because this is not what happens:

Unity has no part in this; there's no such thing as transparency in a graphic; the white is present in the file; Unity doesn't put it there.

 

Okay, so what I gather from this issue and experiences with importing 3DS Max files is that it relies on the software that it was created in (in this case Photoshop) to convert the file to what unity needs (like a JPEG or whatever unity works with). And since it happens in that program, Unity has no way of manipulating certain parameters such as what the "transparent" color is rendered as. So in order to get around that I have to manually create the alpha mask. How close am I on that?

 

Nope. Then you'd have to own Photoshop to use Photoshop files in Unity, which is not the case; it has a native importer. (Also certainly not JPEG...lossy compression = bad for source files. It's just uncompressed image data.)

Actually you can set the matte color to be something other than white; e.g. in Photoshop you can export for web and save as a PNG, where you get to choose the matte color. However, then you have the annoyance of exporting instead of just saving the file. Also, it's usually better to have direct control over the alpha channel anyway, since having a single matte color is often not enough.

--Eric

 

Interesting. I did have issues importing 3DS files without 3DS Max installed on my system. It could have been an anomaly or maybe only 3DS files need 3DS Max to convert to an OBJ file. Anyway I guess I will stick with the slightly laborious alpha chanel. I'd prefer to keep the raw files and no duplicate exported files to keep my project as neat as possible.

 

You should think about it more in terms of layers. When you have no background, then whatever else you have is blended in to the checkerboard pattern using a mask (alpha channel). The pixels themselves are not a mix of the foreground and background. In some applications, layering will carry over, and you won't have to worry about fringes. Unity is not one of these; Unity has to use a flattened RGB image, along with an alpha channel, if necessary. When flattening,the pixels actually do get mixed with the background, even though Photoshop doesn't tell you what that background is. Why this happens, I have no idea; it seems stupid that it wouldn't keep the actual colors, but that's the way things are, for the time being.

 

Unity imports .3ds files natively, but it needs Max installed in order to convert .max files to .fbx.

--Eric

 

@Jessy
Hopefully we get some improvements in Unity or Photoshop (whoever is responsible for this import madness) to better render the RGB image. I don't see it in my build of 3.0 though so likely that wont happen any time soon.

@Eric
That makes sense then. I have heard the .max file format is not known to anyone but Autodesk therefore the only application that can convert it to any other file would be Max. Thanks, thats good info to know.

 

It's certainly not UT; it might be Adobe. The only thing I can think of for why this is the way things work, is that if you don't use the alpha channel of the image, it will still look like the right shape, instead of having a blocky outline. But I have no idea of the scope of what all RGBA images are used for. Maybe this was more important in ye olden days?

 

Perhaps. Things sure were wild in ye olden days. Forsooth the true secrets of RGBA images are lost in the days of yore.

 

From what I understand .max files store data for max to create the object procedurally so often the final object isn't entirely stored in the file.

I once had a utility that could read the meshes without max but only if the object was static and saved with the stack collapsed to a mesh with no modifiers.

 

You should work with TGA file.

We already spoke about it here :

http://forum.unity3d.com/viewtopic.php?t=60594&highlight=mask

And 3Devils did a tutorial of all my explanation here :

http://www.3devils.com/creating-alpha-channel-textures-for-unity

This not a Unity issue but yes the PSD convert mode if Unity is not a great one for many reason you will understand in the tutorial ...

 

You should not. Instead, sama.van, you should learn how to actually use alpha channels. Your methods are ridiculously overcomplicated and time-consuming.

 

Both the Photoshop and the PNG files seem ok in this example, saved from the same image,
both set to Transparent/Diffuse in Unity.

 

Little easy to say that to a guy his website is full of 3D models. :wink:

Maybe more practice than you on the subject to understand what is better for a 3D artist workflow?

I just say that in case...

 

There's no reason not to use a .psd; if you don't, you're wasting time. It doesn't matter how many models you have; you'd have time to make more models if you learned how to do it properly.

 

lol because you create texture without PSD?

 

PSD = one file, no exporting, no scripts, just hit Command-S. Easy, takes no time, nothing extra to manage, perfect results as long as you use an alpha channel, which gives you the best control anyway.

--Eric

 

I dunno your workflow to create games but I mine is more about :

- Game project (=Unity) containts game data only.
- Work project (=Maya) containts working data only.

After I don't know really know about :
- freestyle (PSD + game data etc.. in the unity project)
- lazy style (no need of photoshop Javascript script or some Maya melscript)

Maybe I need to learn about it. You are welcome to do some tutorial then I can understand better your way.

But all companies I worked for in the past or other clients as freelancer they always asked to me to separate Game Datas from Work Datas. Then I learned from that first.

 

I woulnd't like to have a 200Mega or more psd files in a game project.

I don't think it matter file you use , you do as your workflow work best for you , export a png or whatever inside unity is matter of one click if you make a script for it in photoshop (and well you need to do only once).

So well different people different way to handle things, as long it work for you, it'all that matter :wink:

 

The white lines in transparent files are usually the case of bad edge clean-up. So, cleaning up an image with a soft eraser brush will usually leave 10%-20% opacity areas that you won't notice unless you're really careful. It might look clean in Photoshop, but you'll notice them when you overlay them over a different color/ material.

Any decent importer reads the "transparent" bit of a file as an alpha color so that shouldn't be the problem here.

Not the best of examples (a bit dark) but the girder is a transparent tiff file:

It looks just as well from up-close and initially it was a "transparent" PSD.

 

If I understand it correctly problem is that the color of your borders doesn't match the color of transparent pixels which are nearby. This is how it works: all pixels have color and transparency/alpha (i.e. RGBA). When Unity/DirexX/OpenGL calculates lower mipmaps it blends colors of nearby pixels, so in some pixels you get the average of border color and nearby transparent pixels.

The solution to this is to change the color of transparent pixels. There are several ways:
1) Some programs have "save color of transparent pixels" option (when converting to single layer format, i.e. png and so on)
2) Some formats have extra field - background color.
3) The most reliable thing and the thing that i use is to and an extra layer at the bottom of your image fill/paint it with your desired color(s) and set transparency to 1%.

If you could post your texture I could check if that's the problem in your case.

 

Not so.

I decided it was time to make a video about this, considering how often this issue comes up, and how poorly it seems to be understood. So I did. And then, right afterwards, I found this! :x

Blurst's Action-based method is a much better idea than doing this manually, as I did, but I go into more detail about the actual problem.

That helps, but the Solidify method from our videos is better.

 

So, it's a basic interpolation/ resampling issue. Makes sense and also explains why I never had this issue with Unity. I always export my alpha-needy textures with the exact size and in the final format (separate alpha or not). Guess it's an old Max habbit (a.k.a alpha hell).

Must be dumb luck that the PSD file for that image I've posted got resampled correctly.

P.S: how do you guys get used to this whole Snow Leopard OS? First day here and I find it extremely annoying to do even the most basic things.

 

Old thread, but same old problem!

In Photoshop, you can see what's happening by right-clicking on your layers and choose "Flatten Image".
This is how your image is exported from Photoshop. Transparent pixels are flatten to a white background.

A pixel may have an alpha value of 0, making it completely transparent, but it's RGB color
is actually all white (255,255,255).

This is why you get white outlines from Photoshop files using layer transparency.

 

Have a look here: http://docs.unity3d.com/Documentation/Manual/HOWTO-alphamaps.html

 

I'm trying to follow the instructions but I'm new to photoshop and have run into a problem.

Starting with one layer (background) with the alpha channel (checkered board) like in Unity's Alpha Map's page.

Steps 1-4 = ok!

Step 5: I take the duplicated layer and all of the dilation layers and merge them using Ctrl-E (Windows)

Step 6: I click on the icon "Create New Layer" from the "Layer" tab (next to the Channels Paths tabs). It's just a checkered board. I use the paint bucket and make it red (the closest color to my image).

Creating the Alpha Layer (yea the steps start over at 1 in Unity's tutorial)

Step 1: I select the background layer (currently at the top in the Layers tab) and then ctrl-click to get the selection of my character
Step 2: I switch to the channels tab (with the background layer selected)
Step 3: I create a new channel it's black with the selection ants but solid black (I think this is where my problem is)

Screenshot of Layers Tab: http://i.imgur.com/7k82K.jpg

Screenshot of Channels Tab: http://i.imgur.com/jjJOn.jpg

Thanks for your help!

 

There are good reasons and I can't follow where this (commonly used) method using alpha channels should be time consuming. In fact it is the only logical usage to seperate color and mask.

 

I am have the same transparency problem. I used the GUIStyle set the normal image only .After that create the button the transparency problem solved for me . I don;t know this is the perfect solution but it's works for me.

 

For anyone having any extra edge issues that aren't addressed in this thread, I would recommend this tool, Dilate Many Times, recommended by Unity support. It expands the edges of your image, and avoids any color edge issues you might still have even when using an alpha channel: Unity - Manual: Applying Edge Padding to Alpha Textures (unity3d.com)

 

easiest way is to disable mipmap of that texture but it's not a good idea!