Unwanted Outlines using PNG

[nightstand]

Hello,

We are working through a short music video using AS Pro and have been encountering in our rendering outlines that we do not want to be part of the image.

For instance, we overlayed a nose and an ear on a head that was the same color as the nose and ear, and there was an outline that was not evident, when we built each component in Illustrator and use the save for web to export. It seems like it gives you a seam even though the colors are EXACTLY the same.

We are using PNG 24 as our export format with transparencies.

We are getting close to the end of the project and are concerned about these seams giving an amaturish look.

Thanks,
R3

[heyvern]

That would be "fringes" from antialiasing within AS.

It doesn't matter if it's the same color, when you save the PNG you will get that edge in AS. The only difference will be what "type" of edge you get depending on how you create the transparency.

I use Photoshop to create transparent 24 bit PNG files. I always use an alpha mask to create the transparency. For example I would fill an entire layer with a color then add a transparency mask to the layer and paint the mask to hide portions of that layer.



When saving for web to PNG and placing that image over another image layer in AS that is a solid block of the same color the fringe will be dark, because the alpha is masking to the same color. AS will be antialiasing to the same color and for some reason (a bug I think) the antialiasing will be darker instead of blending in.



If you don't use an alpha mask and just delete the transparent areas on the layer in photoshop and save a PNG, there is no color to mask to so Photoshop masks to white as a default.

Use that image in AS and you get a WHITE fringe.



There is no way around this. I haven't found a solution. It is a bug in AS that has to do with antialiasing.

Keep in mind that the larger the final output from AS the less pronounced the "fringe". If you export larger than you need and reduce the file this will eliminate some of that fringe since it is only a few pixels wide.

Larger resolution images might work as well. Also turning off antialiasing in the final AS export will eliminate this but you still may get some "artifacts" (notice the white fringe areas in the first sample using an alpha mask).

-vern

[nightstand]

Vern,
I was hoping you would be the one to respond, no offense to the others who contibute, but you always seem to have some great insights.

Very dissapointing that that there doesn't seem to be a workaround - outside of probably building small masks in the the areas of concern.

We LOVE this program, and want to use it to develop the PBS series we have been commissioned to complete, but these artifacts may cheapen the appearance.

One observation that might give you some clues as to how we can solve this - The default Anime character does not have any artifacts, and he is built with all PNG components. What do you make of that?

I look forward to your insights - and those of the other members.
Randy

[heyvern]

ne observation that might give you some clues as to how we can solve this - The default Anime character does not have any artifacts, and he is built with all PNG components. What do you make of that?

Are you speaking of the default character that loads when the application is launched?

Actually there is the same fringing, it is just harder to see. Those image files are very low res so the antialising is minimal, plus the flesh color where the limbs join is very light and hides the fringes. You have to render very large and use Photoshop levels to make the fringe show up.

If you do a render of the whole body you will see the "fringe" on the legs... where the hips overlap the legs. The default camera position doesn't render that spot so you may miss it. You need to move the camera so that area is in the render area.

I think that file was created at too low a resolution for anything more than web use or for learning the software. It is much too low resolution for anything larger than 320 x 240.

I suppose you could try to keep the image "parts" so the seams are hidden, but with something like a nose this might be difficult.

I don't use images in AS very much... not at all really for character work. However there are some antialiasing problems even with vectors. Shapes that share an "edge" will render with a white fringe due to incorrect antialiasing.

It hasn't been a big problem for me yet.

If you DRAW a VECTOR layer of the same color over ANOTHER LAYER of the same color there is NO FRINGE! You may consider this as an option depending on how far production has gone with your project. What I mean is that many of these issues with images can be solved using native AS vector art.

Maybe for specific problem areas use a vector layer if the shape is simple and could be drawn or traced from the image layer.

I wish I had more of a solution for you. Like I said, I don't use the image character technique at all, and the few times I encountered antialiasing problems they were slight enough not to be an issue for me... or I was able to find a different way to do it to avoid the problem.

-vern

[nightstand]

Vern,

We have been doing all of our character work out of Illustrator and then assembling and boning in AS. How do you create your characters?

You will see here that we mixed the characters, but found that the ability to use gradients and color match was easier in Illustrator.
Steve Jobs was built in AS.
This was a test we ran to see if we were going to build the show in AS or just assemble it in AS.
http://www.nightstandcreations.com/Test ... tsite.html

We have found the AS drawing tools to be a bit clunky - coloring, texturing, etc. which is a huge reason why we use Illustrator/ to build the show.

Again, we really would love to do the entire show with AS.
Randy

[slowtiger]

In this special case where the final position of elements is known I could think of another solution:

Create your element, and export it in at least double size than you finally need.

In Photoshop, select the flat colour with the Wand tool with a setting of zero tolerance (he he) and no feathering. Revert the selection, erase. The resulting transparency should have no half-transparent pixels in it.

Import into AS, reduce to half size.

[heyvern]

I draw all my characters from scratch in AS. I use pretty complex bone rigs with constraints and layer scripts for "flexible" 3D type characters rather than puppets.

Don't know if you saw this yet. It's my latest rig and bone layer script:

http://www.lowrestv.com/moho_stuff/scripts/aim_rig2.mov

For this character:

http://www.lowrestv.com/moho_stuff/larry_roar.jpg

You say you do your drawing in AI? You are exporting as PNG from AI is that correct?

I much prefer using AS to draw with. I have to say that I don't agree 100% with your opinion of the tools. You should look at the tool scripts created by Fazek in this link:

viewtopic.php?t=3507

Click the first link in the first post. The tools are the first link on that next page. These are replacements for all the drawing tools in AS and they save a lot of time and have many improvements. I use them almost exclusively.

I find that trying to work with AS using other drawing tools and importing is just way too much trouble and too time consuming. Hate to toot my own horn but to be perfectly honest I've gotten so good drawing in AS now that it isn't even a choice for me anymore... it's like second nature.

In Photoshop, select the flat colour with the Wand tool with a setting of zero tolerance (he he) and no feathering. Revert the selection, erase. The resulting transparency should have no half-transparent pixels in it.

This doesn't work... I tried it. The problem is that AS still tries to antialias the transparency... you get fringes... not as pronounced but still there. Also whatever size the image is from photoshop it will get "resized" in AS which causes resampling of the pixels of the image... which causes antialiasing of the edges of the transparency.

This will work but it requires using the png as a mask... so... you have to render at twice size AND have an extra image layer as a mask.

-vern

[slowtiger]

This doesn't work... I tried it.

OK, thanx for testing.

I still don't understand why one would create stuff in AI and not export it as vector? From my own experience with AI, I'd rather create the artwork in AS now. Maybe the templates could be done in AI if the artist feels more comfortable with it, but the real moving characters should be done in AS.

[heyvern]

I was thinking too that importing the AI files and binding them to bones like a puppet would give the same results as using a PNG (but with the benefits of vector in AS).

Of course there is the gradients being used... but that can be replicated in AS since they look pretty simple. I would use the shaded fill effect. If set right it creates a similar subtle gradient effect.

The characters are very simple so my impression would be to do them in AS even if importing the AI files.

Just my preference of course.

-vern

[jhbmw007]

I second (or third?) drawing everything in AS. I too hated the drawing tools in AS when I first started- and I still kinda hate them for drawing anything other than what's being animated- but now I'm getting a hang of using them correctly to make what I want. You can't just pick up your stylus and draw directly into AS and expect it to come out just the way you want. I think that's what turns a lot of people off from AS- they end up with odd looking uneven characters with curves in all the wrong spots...

[nightstand]

You guys were very convincing. We spent the better part of the day developing our animated characters for a music video we are working on using ONLY Anime Studio.

I lovde the ability to move vector points. Much better than AI in that tool. The coloring and the fills were still a little clunky, having to render for certain effects.

Anyway, it appears, that this way is also going to give us more portability regarding the use of the same characters by multiple artists.

I LOVE this forum!

Peace,
Randy

PS - any thoughts or use in developing HDTV?

[slowtiger]

HDTV isn't a problem. What I'm working on right now is (medium) HDTV, 720 x 1280. I've already done 1280 x 1920 (full HDTV), and AS performs as usual. You only need adequate hardware for this, and you have to decide for a format long before production because every bitmap element has to be created for that resolution, but also characters need to be designed for it, especially their line widths. Trying to down- or upscale later is a nightmare.

[Lost Marble]

Sorry, I'm late to the conversation. The problem you're seeing with fringes around PNG images has a solution.

PNG images are not supposed to have premultiplied alpha channels. However, when you use the Render command in Anime Studio, the program doesn't know what file format you will be saving to (or if you will be saving the resulting image at all). So Anime Studio is premultiplying the alpha channel. If it didn't, the result would be crappy-looking on screen, or if you saved a JPEG image it would look like junk.

So, the solution is to use the Export Animation command instead of Render. You can set the frame range to be just one frame if you want (set the start and end frames to be the same). With Export Animation, you set the output format at the beginning, so Anime Studio knows what the final file will be and it can do the right thing depending on which file format you choose. You shouldn't see any fringes if you use this method.

There's also a "Don't premultiply alpha" option in Export Animation. For formats that don't really define how to handle alpha channels (like QuickTime), this option lets you choose.

[nightstand]

Thanks All.

We have taken your advisement and have drawn all of our characters in ASP. We have run a new test of a music video we are working on to test most of the features available to us outside of the 3D camera/environment.

We will post it when we are done this Tuesday.

We will also test out what Site Admin recommended for the PNG files we have been working on.

Thanks Again,
Randy