Search Unity

White Borders around Transparent PNG

Discussion in 'Editor & General Support' started by PavolM, Nov 23, 2013.

  1. PavolM

    PavolM

    Joined:
    Sep 4, 2012
    Posts:
    37
    Hello everyone, First of all i want to say i read other articles about this issue and nothing seems to help me with my problem
    I try soldify B
    Download and install the Flaming Pear "Free Plugins" pack (near the bottom of that list)
    Open your PNG in photoshop.
    Go to Select -> Load Selection and click OK.
    Go to Select -> Save Selection and click OK. This will create a new alpha channel.
    Now Deselect all (Ctrl-D or Cmd-D)
    Select Filter -> Flaming Pear -> Solidify B
    (not sure if i saved it right, I just pressed ctrl+s, but in unity image appear as from solid color I try playing with import settings nothing help)
    next turning off mimaping - dindt help,
    importing in PSD white borders are still there
    or transparent cutout(this works but i get ugly borders)

    so if u can suggest any other solution please do :) (I saw PNG to TGA on assets store but i really dont want to pay for this)
    Here is Images from Photoshop (every color is on different layer)
    $photoshop.jpg
    Here is Image imported to Unity (still colors on different layers)
    Notice that you cant see white border on solid black layer because I use Color adjusment to Black on Sprite renderer (this make edges more pixelated ) however if I use it for any other color then solid Black white edges are visible...
    $white lines.jpg
    and here are import settings
    $import_settings.jpg
    and Sorry for my English Its not my native language
    So if anybody can figure out where is a problem please help :/ this gives me lot of trouble...
     
    Last edited: Nov 23, 2013
  2. Xenome

    Xenome

    Joined:
    Oct 29, 2013
    Posts:
    54
    Try selecting the image and set its rendering to GUI, or just make it advanced and play with options?
     
  3. PavolM

    PavolM

    Joined:
    Sep 4, 2012
    Posts:
    37
    I tried playing with importing settings before nothing changes...
    but how to set rendering to gui ?
     
  4. Fuzzy

    Fuzzy

    Joined:
    Feb 11, 2011
    Posts:
    266
    When editing your image in photoshop create an alpha color channel as the mask of your current image.
    Now create a new, empty background layer and fill it with the gray color tones that those white spots in unity are supposed to be. It's best if this background layer has no transparent pixels at all and is completely filled.
    Now save the file as .psd and import this into unity. Select "Alpha is Transparency" if it's used as Texture and click apply. Didn't use it for sprites yet, but should work the same way.

    Now those white spots should be gone. The alpha channel now does it's job and the background doesn't think it fades into white.
     
    gotiobg likes this.
  5. PavolM

    PavolM

    Joined:
    Sep 4, 2012
    Posts:
    37
    thanks but if it works i have to use psd files which are much biggers then png, is it only solution ?
     
  6. Fuzzy

    Fuzzy

    Joined:
    Feb 11, 2011
    Posts:
    266
    That filesize should only matter on your project folder and make no difference for a compiled project since the unity importer converts it, doesn't it?
    And as you're keeping the psd for editing anyways and don't have to export it to a png, you should actually save disk space.
    Also if you double click those psd files in the unity Project window, it will automatically open up photoshop with that file for you to edit it. So it's a lot more comfortable than searching for files outside the Asset folder and export them manually to some place in the Asset folder all the time.
     
  7. PavolM

    PavolM

    Joined:
    Sep 4, 2012
    Posts:
    37
    Thanks for your help, Im going to try it. :)
    And thanks to Xenome too because when i create new material with GUI/Text Shader and swap it with Sprites-Default material white edges are not visible now, however Fuzzy's solution is better so I will try to do it the way you suggest :) thanks
     
  8. Torbach78

    Torbach78

    Joined:
    Aug 10, 2013
    Posts:
    296
    Photoshop has unprofessional compression tools; they are not as flexible/sophisticated as the PNG format offers (i.e. RGBA4444). Transperant pixels during run line have RGB data thrown out and compressed to white. 3D software filters the textures (bi/tri) and you get white bleeding into the color data.

    two tricks so you don't resort to Psd version control which with big psd's will get crazy

    1) Gaussian blur a duplicate under the original by 1 and set opacity of it to 1% -- this will force Photoshop to acknowledge the existence of color data around your edges, by adding an unnoticeable hint of opacity.
    $psBlur.jpg

    this isn't ideal but anyone can quickly edit an image like this

    or

    2) use the Super PNG plugin (free) to author a professional Png format (also use "Open As"->SuperPng to retrieve alpha channel)
    http://www.fnordware.com/superpng/
    THIS is ideal
    $superPng.jpg


    results
    $pngs.jpg
     
    Last edited: Nov 25, 2013
    Gamba04 and PhannGor like this.
  9. PavolM

    PavolM

    Joined:
    Sep 4, 2012
    Posts:
    37
    Thanks that is even better, however i find out why i get white edges I want to share it if someone else have same problem.
    It was because my Textures was bigger then 4096 I have to cut it in Photoshop and then "save for web" and i choose PNG-8 not PNG-24 so this is why i get this white edges :)
    Thanks for help I really appreciate that
     
    cam415 likes this.
  10. illinar

    illinar

    Joined:
    Apr 6, 2011
    Posts:
    863
    I thought the white border problem was gone, but now I see it again in 2018.. No solution for PSD files? I edit a lot so I need to use PSD. Can Unity team please make an import fix?
     
  11. sandolkakos

    sandolkakos

    Joined:
    Jun 3, 2009
    Posts:
    284
    You can execute that method and you will still continue keeping your image files as PSD in your Unity projects :)
    https://docs.unity3d.com/Manual/HOWTO-alphamaps.html
     
    illinar likes this.
  12. illinar

    illinar

    Joined:
    Apr 6, 2011
    Posts:
    863
    Thanks, that's cool, not ideal of course. 9 step process and a lot of it needs to be redone on every change. I'd rather have a script for saving as PNG every time I save the source PSD. Default PNGs from Photoshop work well.
     
  13. sandolkakos

    sandolkakos

    Joined:
    Jun 3, 2009
    Posts:
    284
    The negative point in my opinion (about saving as PNG) is that you will have to store the PSD files in another repository and if your team is not organized, they will not find the PSD to edit something necessary in the future.
     
  14. illinar

    illinar

    Joined:
    Apr 6, 2011
    Posts:
    863
    Why another repository? I actually do it in the same folder atm.
     
  15. sandolkakos

    sandolkakos

    Joined:
    Jun 3, 2009
    Posts:
    284
    I understand, but your project will have both PSD and PNG files. If it is a big project now or in the future, I think it is not a good strategy.

    Also, I think your developers can start using PSD instead of the PNG, and if you want to remove all PSDs from the project, you will face a lot of problems with missing references.
     
  16. digitalStudio

    digitalStudio

    Joined:
    Jan 30, 2015
    Posts:
    4
    I had the same problem. In my case, a texture with smooth antialias. I just selected my png in Project View, then Inspector, and declare to Unity that my "Alpha Is Transparent". Works soft and perfect. That eliminate the slim white border in my texture.
     
  17. S_Affi

    S_Affi

    Joined:
    Oct 27, 2018
    Posts:
    2
    Change the Wrap mode from repeat to Mirror in the Image Properties. It will remove the white line in the edges.
     
    halinc likes this.
  18. sandolkakos

    sandolkakos

    Joined:
    Jun 3, 2009
    Posts:
    284
    When I saw your post, I went to Unity as soon as I could to try it and unfortunately, this doesn't work. But it was good because I ended up finding a new option that was created exactly to fix this issue. The Remove Matte (PSD) worked nicely for my PSD. Look at the images below how it was before and after using this new option.

    sprite-white-borders-01.PNG

    sprite-white-borders-02.PNG
     
    Faikus and Deleted User like this.
  19. TheQiwiBoy

    TheQiwiBoy

    Joined:
    Dec 19, 2019
    Posts:
    2
    Thank you so much
     
    sandolkakos and mvilano like this.
  20. spider853

    spider853

    Joined:
    Feb 16, 2018
    Posts:
    42
    Is there a remove Matte for PSB? Having the same issue for a PSB import as sandolkakos