Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Photoshop Files Give White Outline on Transparent Textures

Discussion in 'Formats & External Tools' started by Derydoca, Sep 16, 2010.

  1. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    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.
     

    Attached Files:

  2. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    Use an alpha channel instead of relying on transparency. There's several topics already about this, which explains in more detail.

    --Eric
     
  3. GusM

    GusM

    Joined:
    Aug 27, 2005
    Posts:
    585
    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.
     
    noobogami likes this.
  4. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    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.
     
  5. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    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.
     
  6. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    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?
     
  7. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    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
     
  8. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    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.
     
  9. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    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.
     
  10. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    Unity imports .3ds files natively, but it needs Max installed in order to convert .max files to .fbx.

    --Eric
     
  11. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    @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.
     
  12. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    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?
     
  13. Derydoca

    Derydoca

    Joined:
    May 13, 2010
    Posts:
    189
    Perhaps. Things sure were wild in ye olden days. Forsooth the true secrets of RGBA images are lost in the days of yore.
     
  14. Tysoe

    Tysoe

    Joined:
    Jul 6, 2009
    Posts:
    577
    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.
     
  15. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,734
  16. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    You should not. Instead, sama.van, you should learn how to actually use alpha channels. Your methods are ridiculously overcomplicated and time-consuming.
     
  17. Don-Gray

    Don-Gray

    Joined:
    Mar 18, 2009
    Posts:
    2,278
    Both the Photoshop and the PNG files seem ok in this example, saved from the same image,
    both set to Transparent/Diffuse in Unity.
     

    Attached Files:

  18. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,734

    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...
     
  19. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    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.
     
  20. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,734
    lol because you create texture without PSD?
     
  21. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    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
     
  22. sama-van

    sama-van

    Joined:
    Jun 2, 2009
    Posts:
    1,734
    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.
     
  23. giyomu

    giyomu

    Joined:
    Oct 6, 2008
    Posts:
    1,094
    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:
     
  24. Tudor_n

    Tudor_n

    Joined:
    Dec 10, 2009
    Posts:
    359
    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.
     
  25. Paulius-Liekis

    Paulius-Liekis

    Joined:
    Aug 31, 2009
    Posts:
    672
    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.
     
  26. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    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.
     
  27. Tudor_n

    Tudor_n

    Joined:
    Dec 10, 2009
    Posts:
    359
    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. :oops:
     
  28. hammer

    hammer

    Joined:
    Jul 11, 2012
    Posts:
    62
    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.
     
    Last edited: Aug 9, 2012
  29. Tiles

    Tiles

    Joined:
    Feb 5, 2010
    Posts:
    2,481
  30. agentsmith

    agentsmith

    Joined:
    May 1, 2010
    Posts:
    132
    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!
     
  31. McDev02

    McDev02

    Joined:
    Nov 22, 2010
    Posts:
    664
    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.
     
  32. suresh2485

    suresh2485

    Joined:
    Nov 8, 2011
    Posts:
    1
    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.
     
  33. mdentonetc

    mdentonetc

    Joined:
    Jul 23, 2012
    Posts:
    28
    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)
     
  34. noobogami

    noobogami

    Joined:
    Jul 24, 2021
    Posts:
    44
    easiest way is to disable mipmap of that texture but it's not a good idea!