White Edges around PNG images?

General Moho topics.

Moderators: Fahim, Distinct Sun, Víctor Paredes, erey, Belgarath, slowtiger

heiseman
Posts: 74
Joined: Fri Apr 27, 2007 2:49 pm
Contact:

White Edges around PNG images?

Post by heiseman » Sat Jun 02, 2012 5:19 pm

I noticed this problem a few years ago, but thought they would have fixed it by version 8. I'm working with PNG images and they have white edges around them. Has anyone else had this problem? And if so, is there a solution? I tried PSD and Tiff images and they gave black edges. The problem seems to lessen when the images are scaled up. See this example link:
http://www.motionlab.com.au/temp/whiteedges.png

As you can see, the white lines are more prominent on the right 2 images when they are scaled down. When scaled up, the white edges are still there, but less noticeable. When I use the same PNG assets in After Effects, I have no problem whatsoever. The white edging only happens in Anime Studio Pro.

So, my only solution is instead of rendering the movie at 1920x1080, I have to render it out at 7680x4320 and then scale it down in After Effects. Even then, the white edges are there, but it is not as bad.

Any solutions to this would be greatly appreciated.

Thanks..
User avatar
slowtiger
Posts: 5510
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Re: White Edges around PNG images?

Post by slowtiger » Sat Jun 02, 2012 5:35 pm

Try to avoid any sharp edges. Cut around the image with a 1 px fuzzy border, the problem should vanish in most cases.

If you have AFX, export from there and use the "pre-multiply" and "no pre-multiply" option, and see which one gives a better result.
User avatar
Steverino
Posts: 37
Joined: Tue Jul 06, 2010 10:34 pm
Location: Fairfield, Iowa

Re: White Edges around PNG images?

Post by Steverino » Sun Jun 03, 2012 2:04 pm

If you create the PNG on a transparent background, as is possible in Photoshop Elements and other programs, the edges will have varying levels of transparency instead of anti-aliasing into a white background. So you'll have neither jaggies nor white edges.

EDIT: Never mind. My advice works with text saved as a PNG, but I'm getting the same kind of lines you are with a partially-rectangular PNG.
Last edited by Steverino on Sun Jun 03, 2012 2:32 pm, edited 1 time in total.
User avatar
slowtiger
Posts: 5510
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Re: White Edges around PNG images?

Post by slowtiger » Sun Jun 03, 2012 2:08 pm

Steverino: sorry to correct you here. AS has the annoying habit of showing white edges on complete clean PNG file edges, where it should be a simple matter of pixel/no pixel.
heiseman
Posts: 74
Joined: Fri Apr 27, 2007 2:49 pm
Contact:

Re: White Edges around PNG images?

Post by heiseman » Sun Jun 03, 2012 2:17 pm

Thanks Slowtiger, that works. Hopefully this will be fixed in the next update. It's a bit annoying having to do this to every PNG image I import. I have such a love/hate relationship with this software!
User avatar
slowtiger
Posts: 5510
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Re: White Edges around PNG images?

Post by slowtiger » Sun Jun 03, 2012 2:41 pm

It hasn't been fixed since v5, so I don't have much hope. But most, if not all bitmap elements I import into AS have irregular shapes anyway, so I just cut them in Photoshop with a 1px fuzzy border and don't think about it.
PeteX
Posts: 15
Joined: Sun Sep 01, 2013 8:58 pm

Re: White Edges around PNG images?

Post by PeteX » Mon Sep 09, 2013 3:27 am

Just discovered this old post, and I also have a bit of trouble with these annoying white halos at the edge of bitmaps. It becomes real noticeable when I have dark bitmaps on a dark background. Designing the bitmap in oversize and then downscaling it to something like 0.25 in AS seem to help a bit. I will try experiencing with softening the edges. Any more tips on this?
User avatar
DK
Posts: 2517
Joined: Mon Aug 09, 2004 6:06 am
Location: Australia

Re: White Edges around PNG images?

Post by DK » Mon Sep 09, 2013 4:17 am

If you are refferring to png transparency trouble you can open your image containing the transparent background in your image editing software. Select the Magic Wand tool and set it to "feather" 1 x pixel. Select the transparent background and then press delete. This should remove at least 1 x pixels worth of the offending white edge from your image. If not repeat or select the feather level higher before you delete.

Cheers
D.K
PeteX
Posts: 15
Joined: Sun Sep 01, 2013 8:58 pm

Re: White Edges around PNG images?

Post by PeteX » Mon Sep 09, 2013 3:43 pm

I have done some tests - 100 % visible pixels displays fine, and there is no problem with 100 % invisible pixels. It looks like AS has a problem with semi-transparency.

Take a look yourself:
http://s23.postimg.org/douw29lq3/test_anti.jpg

The anti-alias and blurring in the first two examples produces white halos, unlike the example to the right, where each pixel is either transparent or not.

From what I have seen, it is the same with .psd, .png and .tiff

I think I will stay away from any kind of semi-transparency in my bitmap, unless the graphic is so bright that the halo won't be seen.
User avatar
heyvern
Posts: 6964
Joined: Fri Sep 02, 2005 4:49 am

Re: White Edges around PNG images?

Post by heyvern » Tue Sep 10, 2013 4:42 pm

PeteX, What version of Anime Studio are you using?

I don't get any "fringes" when using 24 bit transparent PNG's exported from Photoshop. Even with a lot of blur, etc. I just did the same experiment you did and it rendered without white fringes.

How are you creating the images? What image editing application do you use? How are you creating the transparency in the image file? Are you using transparency masking? If you don't create the image file correctly, there will be white pixels around the edges of the transparency IN the image itself. This can be seen in an image editor without even rendering in Anime Studio.

I would like to see the ORIGINAL image you use.
User avatar
slowtiger
Posts: 5510
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Re: White Edges around PNG images?

Post by slowtiger » Tue Sep 10, 2013 5:43 pm

I don't get white fringes ever when using PNGs with fuzzy edges to transparent. I do get white fringes when I use PNGs which are filled to the border, = no transparency.
AS 9.5 MacPro Quadcore 3GHz 16GB RAM OS 10.6.8 Quicktime 7.6.6
AS 11 MacPro 12core 3GHz 32GB RAM OS 10.11 Quicktime 10.7.3
PeteX
Posts: 15
Joined: Sun Sep 01, 2013 8:58 pm

Re: White Edges around PNG images?

Post by PeteX » Tue Sep 10, 2013 11:28 pm

heyvern, you're right: .png transparency works - The fringes are only a problem when I import .psd files!
User avatar
heyvern
Posts: 6964
Joined: Fri Sep 02, 2005 4:49 am

Re: White Edges around PNG images?

Post by heyvern » Wed Sep 11, 2013 1:35 am

PeteX wrote:heyvern, you're right: .png transparency works - The fringes are only a problem when I import .psd files!
Just tested it. Apparently bringing in a layered PSD as composite (one image layer) causes white fringes.
Bringing in a PSD as individual layers doesn't create fringes.
PeteX
Posts: 15
Joined: Sun Sep 01, 2013 8:58 pm

Re: White Edges around PNG images?

Post by PeteX » Wed Sep 11, 2013 2:00 am

- and you're right again - thanks for the research!
User avatar
Lukas
Posts: 811
Joined: Fri Apr 09, 2010 9:00 am
Location: Netherlands
Contact:

Re: White Edges around PNG images?

Post by Lukas » Tue Oct 29, 2013 5:57 pm

I'm still getting the white edges, with psd (imported as individual layers), but also with png files (interlaced or not...).

This has been bugging me for years :S I just reported it to the devs. But if anyone here knows how to deal with it, I'd love to know.
Post Reply