Matte lines with PNG images

[avolux]

All PNG images have a matte line around them, even PNGs saved with the no matte line option. This image shows five jaws overlapping, with the following matte settings when saved with Photoshop:
Black, green, white, none, black.

Note that the "none" setting looks like the black setting. So far, the best I can do is choose a matted color similar to the pixels on the edge, but that only works if the outer edge is all the same color. The top of the jaw has reddish lips, and the matte line becomes visible there.

[Toontoonz]

I tried to repeat what you did but could not get the fringe like you have in yours. The .png file was created in a Photoshop file with a transparent background.

Here are some shape´s I made that way, no fringe:


The black and white background was put in Moho. The color shapes are the .png file. (there appears to be a fringe around the blue - but it is just a jpeg artifact when the moho render shot was made).


What size is the .png file in Photoshop (pixels height x width) and what size is your project in Moho (pixels height x width)?

[7feet]

That happens from some of the color of the background being mixed into the edges from anti-aliasing in the program you are exporting in. As Toontoonz said, using an actual clear background would solve the problem. If that's not possible, see if there is a way for you to turn off the anti-aliasing in the graphics program.

[Toontoonz]

In Photoshop to get a transparent/clear background just choose: File > New, then when the New window pops up go to the "Background Contents" section and select "Transparent". (Other choices are white and background color.)

When one puts the image in the New file one has check the edges of the image to find and delete and/or change any stray pixels of color one does not want. There are various means in Photoshop to do that.

I believe your unwanted fringe colors are happening in Photoshop, not Moho.

[7feet]

I'm almost certain it's not in Moho, but the don't specify that they are using Photoshop. That's why I wasn't sure of the exact way they would go about solving the problem. It would help to know the specific software they are using.

[Lost Marble]

avolux, if you want to post the source PNG image, I'd be happy to take a look. My guess is that it's a badly-formed PNG file (possibly not your fault, but the fault of some software). PNG images are not supposed to have pre-multiplied alpha channels. If you do have premultiplied alpha channels, then you're going to get some color bleed like you see in your example.

If you don't have pre-multiplied alpha channels, then it shouldn't matter what color the background is - it shouldn't intrude into the non-transparent pixels.

It looks like either the software you used pre-multiplied the alpha, or the green (or black or whatever) was blended into the edges of the picture before transparency was applied.

[avolux]

Wow, what a great community; a lot of responses in a short time!

Toontoonz: I can't tell how you put the image together, but I have each jaw on a different layer, and I stretched them to make the fringe more visible. This problem first showed up in a "This Land" JibJab style cartoon that we're working on. All the PNG body parts have the fringe. My Moho file is 720X540, and the pic I posted is part of a screen cap of a rendered frame. The jaw is 112X78, and I've seen the fringe in all resolutions I've tested.

7feet: I am using a clear background when I create it; the famous Photoshop little gray checkerboard background. The PNG, when loaded into Photoshop or Microsoft Photo Editor, shows the same clear background. It looks clean in Moho as well, until I render.

LostMarble: I’ve tried Photoshop 5 and Photoshop CS to make the PNG. There is no pre-multiplied alpha channel fringe. There is always a 1-pixel-wide circle of a single color surrounding the images when Moho renders it. I am using villagephoto.com to upload the images, and they won’t accept a PNG file, so I don’t know how to post it. I have emailed the file to you instead.

How to recreate the PNG matte line problem:
In Photoshop, make a new 100X100 RGB color file with transparent contents. Make a light gray foreground color (I chose R 230, G 230, B 230). Use the elliptical marquee to make an oval in the center. Choose edit>fill and use foreground color at 100% opacity in normal mode. Hold down CTRL+SHIFT+ALT+S to Save for Web. Choose PNG-8, Selective, Diffusion, Colors 256, Dither 100%, Matte None, Web Snap 0%. Save it as oval.png. Here’s a screencap of my settings:



In Moho, choose File>New, then in File>Project Settings set the dimensions to 720X540. Choose File>Import>Images and load oval.png. In the Tools window, choose Scale Layer (or press 2), and then scale the layer to about 6 times its size. In the Layers window click the Duplicate Layer icon. In the Tools window choose the Translate Layer tool (or press 1). Move the layer down and to the right so that it overlaps the original layer. It looks fine now, but hold down CTRL-R to render. I get this:

Thanks for the replies; let me know if you can recreate this with your Moho. I have version 5.1 of Moho.

[rylleman]

The problem is that you use png8 compression, use png24 instead and the problem is solved.

edit: played around with different png-settings and the format doesn't seem to be the issue...

[Lost Marble]

Bingo! We just found the problem - Photoshop bug!

Try this instead:

Go ahead and create the image the same way. But, instead of using Photoshop's "Save for Web" option, substitute this:

1. Select Image->Mode->Indexed Color if you want an indexed image. (There's no need to do this, really. You'll get better quality if you leave the image as RGB. Either way, though, you shouldn't get the color fringe around the edges.)

2. Use File->Save As. Select PNG as the format and save your file.

Import the result into Moho and you won't get the colored edges.

I'm not sure what's going on in "Save for Web" in Photoshop, but clearly the two methods produce different results.

As rylleman suggested, saving as PNG-24 in "Save for Web" also works. I'm not sure why "Save for Web" gives you the choice of a matte color - by definition of the file format, PNG should be independent of matte color. I'm not sure if it's a bug in the "Save for Web" option (at least in indexed mode), but it's definitely an inconsistency in how Photoshop saves the PNG file.

[Toontoonz]

Here is what I did - no fringe.

In Photoshop I made the file 720 x 720 - not 100 x 100.
Saved as .PNG file (as I did in my post above) - not the save for web thing.
In Moho the Project file was 720 x 720 when I imported the file.
I then duplicated the file and overlapped the circles.
I then changed the project file size to 360 x 360 and rendered. No fringe.

I think the problem is making the small file in Photoshop (100 x 100), doing the "Save for Web" .png thing, then enlarging it so much in Moho to render.
(You took a 100 x 100 size image, put it in a 720 x 540 project then enlarged the image 6 times. I tried that and had fringe problems.)
I have found that making the file big outside of Moho and reducing works. Making the image file small outside of Moho and enlarging causes problems.

[Toontoonz]

As a side note, I took a 100 x 100 grey circle made in Photoshop CS, then I opened a new file in Photoshop 600 x 600 pixels and copied the 100 x 100 grey circle in there. I then enlarged the circle 6 times. That is what the edge looks like - not real crisp - kind of bumpy like your example.

I am sure there would be fringe if I took this into Moho.

[RASH]

I am using villagephoto.com to upload the images, and they won’t accept a PNG file, so I don’t know how to post it.

Next time, try freespace.nu. They seem to exist just for uploading images for webforums. They state on their website:

Upload your jpgs, gifs and pngs for free! Use our storage to send your images over the internet or, for example, show on an online forum or guestbook.
note: 1mb max

No registration, no hassle.

[Toontoonz]

I did some more testing and found that when in Photoshop one does "Save for the Web" and saves as a PNG 8 type file it adds a fringe around the file.
It is quite obvious in Photoshop when one selects PNG 8.
PNG 8 is the lowest quality PNG file.
The best thing to do:
1. Save as PNG file in Photoshop, not "Save for Web".
2. Create the PNG image file in Photoshop larger than the size you will use it in Moho and reduce it down. Making a small image file in Photoshop and then enlarging in a lot in Moho will cause some problems.

---------------------

As the Photoshop manual states: "The advantage of using PNG-24 is that it can preserve up to 256 levels of transparency in an image. To save an image with multilevel transparency, select Transparency. "

From what I could gather from the Photoshop manual PNG-8 is used more for GIF-type animation.

Other info relating to PNG-8:

Using masks to modify dithering

When you use masks to optimize the amount of dithering in a GIF, PNG-8, or WBMP image, white areas of the masks yield the most dithering, and black areas of the masks yield the least dithering. You can adjust the maximum and minimum levels of dithering in the Modify Quality Setting dialog box.

To use masks to modify dithering:

1. In the Optimize panel/palette, choose a GIF or PNG-8 setting from the Preset menu, or choose GIF or PNG-8 from the file format menu.
2. Click the Mask button Standard Mode button to the right of the Dither text box.
3. Choose which masks to use:
* All Text Layers to use the masks from all text layers in the image.
* All Vector Shape Layers to use the masks from all shape layers in the image.
* Channel to choose an alpha from the menu. In ImageReady, you can choose Save Selection to create a new alpha channel based on the current selection.
4. To preview the results of the weighted optimization, select the Preview option.
5. Define the dithering range:
* To set the highest percentage of dithering, drag the right (white) tab on the slider, enter a value in the Maximum text box, or use the arrows to change the current percentage.
* To set the lowest percentage of dithering, drag the left (black) tab on the slider, enter a value in the Minimum text box, or use the arrows to change the current percentage.
6. Click OK.

[bupaje]

Might be worth moving a summation of this to the FAQ.

[avolux]

Thanks for your help everybody. This is the most responsive forum I’ve ever been on.

Photoshop 5.5 won’t “Save As” to PNG unless it’s indexed first, so I used “Save a Copy” to make the RGB version, and used “Save for Web” to make a PNG-24. The PNG-RGB and the PNG-24 don’t look like they have a transparent background when loaded into Photoshop, as this picture shows:



Toontoonz, what version of Photoshop did you use that showed the fringe in PNG-8? I can’t see it in version 5.5 on a PC (see above image), or version CS on a Mac.

The PNG-24 has some strange features. It does have a transparent background when displayed in Microsoft Photo Editor. It has a light blue background in Internet Explorer. It has a white background as a thumbnail in Photoshop CS browser, but is transparent after it’s loaded. Happily, in Moho it’s transparent. I brought all three into Moho and got this:



PNG-24 is the solution, and I thank you all for your help. BTW, the reason I brought them in small and enlarged them was to make fringe more visible for this forum.

All this led to another question. If I check properties from Windows Explorer, the RGB image shows a bit depth of 24, which I assume is 8 bits per channel times three channels. The PNG-24 shows 32, which adds the 8-bit alpha channel. Why does the PNG-8, which is 1/6th the size of the PNG-24, show a bit depth of 32? Shouldn’t it be 8? I thought it used 1 byte per pixel for up to 256 colors, with one color being “transparent.” On second thought, shouldn’t the bit depth be 2? It’s got gray and transparent only.

Thanks RASH for the tip about freespace. Here are links to the images if anybody wants poke around with ‘em:
PNG-8: http://www.freespace.nu/showimage.php?l ... 621640.png
PNG-24: http://www.freespace.nu/showimage.php?l ... 621713.png
PNG-RGB: http://www.freespace.nu/showimage.php?l ... 621888.png