Process of animation

[mhnuemhnue]

Hey all!
After mastering Flash's basics (I use Flash CS3) I wanted to create a decent little Frame by Frame animation that is both colored and cartoony.

I want to create full, living characters, which means no stick guys. Real human beings. (Cartoonish)

Anyway, I was wondering what is the process? I am not asking about the process of producing an animation that is all done and edited, I am talking about the process of the drawing and painting the animation.

I usually sketch first and animate the characters while they are only a sketch, but I feel like I'm doing it wrong.
How I do it, is I take a black colored brush (I use a tablet PC with pressure sensitivity) and lower it's Alpha channel to about 50, and just draw the sketches and keys of the characters.
Then I outline them with black lines in another layer, and then color in another layer, and then shade in another layer.
Is that a good way to do that?
Is there an easier way to do it?
How do you guys do it?

Another question is coloring. How do I know which colors to use in order to shade well? I have noticed that in the Awesome Reach animation (YouTube it) the artist uses shades that fit in really well, and doesn't just darken it.

What resolution in flash is good for YouTube? (1280x720?)

Sorry for the post being too long, please help! :D

Thanks.

[MickHarrison]

sounds like you have it worked out pretty good
All I would say is do it super rough to begin that way
you won't waste any time

[Havegum]

At 10/10/10 04:57 PM, mhnuemhnue wrote: Hey all!
After mastering Flash's basics (I use Flash CS3) I wanted to create a decent little Frame by Frame animation that is both colored and cartoony.
I want to create full, living characters, which means no stick guys. Real human beings. (Cartoonish)

okay

Anyway, I was wondering what is the process? I am not asking about the process of producing an animation that is all done and edited, I am talking about the process of the drawing and painting the animation.

I haven't really done anything too long, but I figure I'd first start sketching the key frames of the entire movie. Then from there, I'd probably start sketching the beginning frames, finish the first few frames, sketch some more, and so on.
After I would be done with the entire outline, I'd start coloring and filling in.

Another question is coloring. How do I know which colors to use in order to shade well? I have noticed that in the Awesome Reach animation (YouTube it) the artist uses shades that fit in really well, and doesn't just darken it.

I'm not gonna youtube something that was originally submitted to/on newgrounds
Egotractor uses something called hue shifting. I know there isn't many (if any) tutorials or explanations on what it is exactly, but a good example of hue shifting can be found here
Copy that image, paste it in flash/photoshop and check how the shades changes from the base color.

Basically what you do, is when you're choosing a shade, you change the hue slightly towards blue. And when you're highlighting, you change the hue slightly towards yellow.
It took a bit of practice for me to get it to look right, but some practice is all it takes.

What resolution in flash is good for YouTube? (1280x720?)

Standard flash size is good
If not, then go around 600x500 or something. Too big and some people will have trouble watching it.

Thanks.

No problem, hope it helped

[mhnuemhnue]

You two helped me alot! (But I do look for further replies and opinions ofc)

Hue shifting, that's what I was looking for! Thanks!

I'm not going to show my animation with a flash player, honestly, I don't really like how it plays.
Reasons:

*Takes too much time to load.
*Animation can only be edited in flash.
*Effects are harder to produce.

and I have more reasons. My animation will be viewed in YouTube only and drawing on Flash's standard size is just too small for me to draw in. 1280x720 will enable HD.

Thanks again, for all the help.

[InsertFunnyUserName]

At 10/10/10 04:57 PM, mhnuemhnue wrote: Anyway, I was wondering what is the process? I am not asking about the process of producing an animation that is all done and edited, I am talking about the process of the drawing and painting the animation.

I'd just like to note that there isn't a particular process that everyone needs to follow or else they're doomed from the beginning. Sure, there are certainly some tactics that work better than others, but whatever works for you is what works for you. Now that that's out of the way, here's my advice:

I usually sketch first and animate the characters while they are only a sketch, but I feel like I'm doing it wrong.

Sketching is a great way to work out poses and composition, so definitely stick with that. I don't recommend that you sketch out every frame, if that's what you're doing, just because of the sheer amount of work. One sketch every seventh to tenth (depending on your frame rate) or so keyframe should be plenty unless there are rapid, complicated movements. When it comes time to draw your outlines, you can still go back and make more sketch keyframes if need to.

How I do it, is I take a black colored brush (I use a tablet PC with pressure sensitivity) and lower it's Alpha channel to about 50, and just draw the sketches and keys of the characters.

Sounds good. I use the pencil tool so that I don't have to deal with the brush tool's sometimes erratic behavior, but like I said, whatever works for you.

Then I outline them with black lines in another layer, and then color in another layer, and then shade in another layer.

That's what I do.

Is that a good way to do that?

Yeah, it sounds pretty solid to me.

Is there an easier way to do it?
How do you guys do it?

That's pretty similar to my process.

One tip that I have if you're not already doing it is this: animate towards the middle (of a movement, not an entire scene, though you can if you want). When you're animating a motion, first draw the first and the last frames (and any key positions if you need them). Then, work towards the middle frame. This helps with keeping your shapes from warping too much.

Another question is coloring. How do I know which colors to use in order to shade well? I have noticed that in the Awesome Reach animation (YouTube it) the artist uses shades that fit in really well, and doesn't just darken it.

This is color theory. I'm not that good at explaining it so you should probably look up some tutorials, but essentially, it boils down to this: instead of simply choosing a darker shade of the same color, they're choosing a color that is darker but a different hue. The color they're choosing is also dependent on the hues in the background.

[mhnuemhnue]

Great information! Thank you!

One question though,

Isn't the pencil tool a bit stiff? I mean... it guarantees a solid stroke but it doesn't give the same result as the brush... I gonna need to try that.

[InsertFunnyUserName]

At 10/10/10 05:55 PM, mhnuemhnue wrote: Isn't the pencil tool a bit stiff? I mean... it guarantees a solid stroke but it doesn't give the same result as the brush... I gonna need to try that.

They each have their pros and cons, but the reason why I like the brush tool is that it doesn't do that thing where chunks get cut out or its thickness wavers or it dramatically alters course or blips appear in the line when the smoothing glitches. The pencil tool does sometimes go slightly in a way you don't want it to, but from what I've found, not nearly as much as the brush tool. The downside is that it doesn't have pressure sensitivity. Another plus side is that you can get it down to 1px without zooming in and you don't have to adjust its size when you zoom.

[Sacros]

At 10/10/10 05:47 PM, InsertFunnyUserName wrote:

This is color theory. I'm not that good at explaining it so you should probably look up some tutorials, but essentially, it boils down to this: instead of simply choosing a darker shade of the same color, they're choosing a color that is darker but a different hue. The color they're choosing is also dependent on the hues in the background.

sup

i happened to come across this thread for info and saw the quote from above regarding colors

would you care to elaborate a lil dude? maybe giving some tags to search for? im really intrested in that

as for my own process...id say i just open flash and make things till something works :D such is the n00b way lol

[InsertFunnyUserName]

At 10/13/10 02:50 PM, Sacros wrote: sup

i happened to come across this thread for info and saw the quote from above regarding colors

would you care to elaborate a lil dude? maybe giving some tags to search for? im really intrested in that

as for my own process...id say i just open flash and make things till something works :D such is the n00b way lol

[Note: I'm covering shading and highlighting, which will probably become apparent three paragraphs from now when I start talking about light. Call me captain superfluous because you're in for a long ride.]

I used to know of an amazing tutorial, but I seem to have lost the link. And, the majority of the ones that have helped me the most seem to be hiding as well. It makes it particularly tricky that the grand majority of tutorials are aimed at portrait artists. Well, the show must go on. I'll try to do my best to explain.

This is an overview of harmonious color compositions. You need to know this before you start anything because if you have too much conflict in your color scheme, it's not going to look good. There's also a more basic overview of theory if you look back a few pages.

The other non-shading-specific but still vital piece of information that I want to put out there is that every single scene of every single animation needs some sort of color scheme. Real life may not have that, but remember that animation is not an exact replica of reality but rather a representation of reality. This is probably my biggest pet peeve about art, though it's not really a pet peeve because of how important it is.

Now, first, there are some things you need to know.

1) Ambient light, as opposed to direct light which comes directly from a source, is light that is reflected by another object. This is crucial to making your objects seem like they're a part of the image and not a picture on top of a picture.

2) Over-saturated colors are often ugly especially if they're light. Use with caution.

3) The color of your shadows can change the mood of the scene. Using cool colors will often make the area look warm (in temperature) if your dominant tones are cool. Reversely, using warm colors when your dominant tones are cool will often make the area seem cold (in temperature). Keep that in mind.

4) Occasionally the shadow or highlight will be so drastic and/or otherwise odd-looking that you'll need an intermediary tone. Use your judgment.

Now, on to actually picking a shade. Rule number one is never use pure black and never use pure white. Again, art is a representation of reality, not reality itself. White and black are terribly flat colors: they won't feel alive enough and white in particular will attract negative attention from your viewer's eye immediately. If your background is dark, then you shouldn't have anything even close to white unless there's a direct light source. What you do instead is use light or dark grays tinted in relation to your background. Clearly, outlines are an exception.

Following that vein, never shade with black or highlight with white. In the context of digital art, that means that your shadow or highlight should be a different hue, not a darker or lighter version of the same color. This will give your objects more life.

Never use the same shadow for every object. There have been a couple of threads here that show a method of shading that includes a universally applied black with a reduced alpha. I've already covered why black is the devil, but the same concept rings true for any other color. Each color is going to catch the light slightly differently and your shading and highlighting should reflect that.

The color you pick should be related somehow to your background. You can either use the method I mentioned above about the warm and cool colors or you can just pick a color that represents the direct light, the ambient light and/or the overall color scheme of the background.

Havegum mentioned hue shifting. Sometimes it works and sometimes it doesn't. If you don't have any warm colors whatsoever in your background, then shifting your hue towards the warm color spectrum may make it hard for you to find a suitable color (and visa versa, obviously).

My closing comment is this: you can learn a lot about animation from studying art theory. Color theory and composition in particular will be your best friends if you get them down.

[InsertFunnyUserName]

I knew this would happen.

At 10/14/10 05:03 PM, InsertFunnyUserName wrote: 3) The color of your shadows can change the mood of the scene. Using cool colors will often make the area look warm (in temperature) if your dominant tones are cool.

if your dominant tones are warm*

Each color is going to catch the light slightly differently and your shading and highlighting should reflect that.

slightly different*

[InsertFunnyUserName]

fffffffffffffffff

Sorry, I'm tired.

At 10/14/10 05:09 PM, InsertFunnyUserName wrote: I knew this would happen.

At 10/14/10 05:03 PM, InsertFunnyUserName wrote: 3) The color of your shadows can change the mood of the scene. Using cool colors will often make the area look warm (in temperature) if your dominant tones are cool.

if your dominant tones are warm*

If your dominant tones are warm, it'll give off the impression of a warm temperature if the shadows are cool.

[Noray]

At 10/10/10 04:57 PM, mhnuemhnue wrote:

How I do it, is I take a black colored brush (I use a tablet PC with pressure sensitivity) and lower it's Alpha channel to about 50, and just draw the sketches and keys of the characters.

Don' bother changing the alpha. Just you onion skin, it's much easier.

[InsertFunnyUserName]

At 10/14/10 08:49 PM, Noray wrote: Don' bother changing the alpha. Just you onion skin, it's much easier.

I assume the low alpha is so that he can see under the sketches when he goes to outline.

[Noray]

That's what layers are for. Or am I completely missing something?

[InsertFunnyUserName]

At 10/14/10 10:14 PM, Noray wrote: That's what layers are for. Or am I completely missing something?

If you have scratchy, messy sketches--which is a common properties of sketches--then having them have 100% alpha over your outline layer is going to make it difficult to draw good lines. I've forgotten to draw with a lower alpha and found myself having to turn off the sketch layer and redo many portions of my lines because they're either squiggly or they're not positioned right.

If CS4 or CS5 has this feature then moot point, but assuming they don't, I hope that adobe with give flash the feature of turning down the entire layer's opacity. Maybe that would be too difficult or maybe it wouldn't; I don't know. It would be helpful nevertheless.

[Sacros]

hai

thank you insertfunnyusername for your explanation about colors that is going to be pretty useful in the near future

basically the idea is to make everything contrast like FUCK so it drives the viewer attention to it, i hope i got the idea right (expect for white and black for some reason)

one las quickie, what do you mean by "hue" is the three divisions u get when u open the collor pallet? i thought the left one was the dark one, right one bright and middle one some sort of "pastel"

once again, thanks bro (hope i got ur username right)

[InsertFunnyUserName]

At 10/15/10 06:50 PM, Sacros wrote: hai

thank you insertfunnyusername for your explanation about colors that is going to be pretty useful in the near future

basically the idea is to make everything contrast like FUCK so it drives the viewer attention to it, i hope i got the idea right (expect for white and black for some reason)

No, no, not at all. I'm not sure how you got that impression.

one las quickie, what do you mean by "hue" is the three divisions u get when u open the collor pallet? i thought the left one was the dark one, right one bright and middle one some sort of "pastel"

No. A hue in the context of art is any color and all of its shades. I'm not entirely sure how to explain "all of its shades" exactly, but I'll say that if color B is just a darker or lighter shade of color A, then they both have the same hue. Like, if you slide around the value bar in Flash's color picker, the hue stays the same but if you move the crosshairs on the rainbow part, the hue changes.

once again, thanks bro (hope i got ur username right)

Okay, I had a feeling this would happen because I knew I wouldn't explain it right. I'll try to clarify, this time with pictures (the hyperlinked titles are the pictures I'm referencing).

[Note: these images were drawn in photoshop because it was easier, but it doesn't matter. The same principals that apply to my sloppily drawn realism sketches apply to an animated character.]

Black and white.
The two heads on the left show why white is a harsh color (the top one is pure white and the bottom is gray). For one, attention is immediately drawn to the eye in a way that you don't want it to be. It's too bright to look natural and so it stands out against the dark colors of its background. It doesn't look like it's a part of the drawing because of how abrupt and blaring it is. The bottom head doesn't have that effect and even though I used gray, it still creates the illusion of a white object.

Color diversity.
As you can see here, the top head uses a straight gradient and the bottom uses a more diverse color pallet. This is what I mean when I talk about picking a slightly different hue for your shadow. These two drawings use the same base color (the second one in the left column of blotches) and all of the colors have the same value (value meaning how dark or light something is). All I did was change the hues slightly (with the exception of the base color which stayed the same). The effect of this is that the bottom head looks a lot less flat and a lot more lifelike than the top even though the overall skin tone and hair color remained the same. It also just looks better overall.

Chosing colors based on the background
Yeah, I know the lips on the bottom guy are weirdly disproportionate and the hair looks like a hat. I could fix it but I already closed photoshop and eh, whatever. Oh and I can't draw moons. Anyways, to get the colors that I used for my shadows and my highlights, I referenced the objects and the color schemes of the backgrounds. On the top, I used blues and purples on the left because of the sky and the moon. On the right of the sweatshirt I used a blue that, due to the fact that it's butted up against that purple, looks almost like teal because I'm shifting my shadows down towards the green-blue of the tree.

On the bottom I took the yellows from the bottom of the sky and that pinkish-purple highlight on the sweatshirt is me shifting my hue towards the salmon of the top of the sky. If you look closely at the tree, you'll see some purple, which brings me to my next point.

But before I move on I'd just like to point out that the second darkest color on the bottom face (nixing the purple dots) and the third darkest color on the top face are the same color even though they look so different. The background that a color is placed in can affect--sometimes dramatically--the way that it's seen by the viewer.

Accenting the allusion of temperature.
This is actually the first one that I drew, so the proportional awfulness is me not having warmed up yet. Anyways, this may have been what you got confused about regarding contrast. It's not about the contrast that the cool and warm colors have, it's about the way that they interact with each other. With the exception of one minor one, both those figures used the same exact colors. It's just, in one, the cools are dominant and in the other, the warms are. Yet, the top still feels cold and the other not. You can create the illusion of temperature with all cools or all warms, but mixing them together like this will accentuate that illusion. And, they don't have to be drastically contrasting colors, though mine are in this example because I like the way it looks here. It can be subtle, as well.

I hope that clears some of the confusion up.

[hammergun]

They each have their pros and cons, but the reason why I like the brush tool is that it doesn't do that thing where chunks get cut out or its thickness wavers or it dramatically alters course or blips appear in the line when the smoothing glitches. The pencil tool does sometimes go slightly in a way you don't want it to, but from what I've found, not nearly as much as the brush tool. The downside is that it doesn't have pressure sensitivity. Another plus side is that you can get it down to 1px without zooming in and you don't have to adjust its size when you zoom.

You seem to know what you're talking about, do you think you could try to explain a glitch thing to me?
Whenever I try to use the pencil, it works fine on the first stroke, but after that the line doesn't appear until I release the mouse button. It's very hard to work like that, it made me rage-quit once. Is there a simple fix for this that I should have figured out already? Oh, and I use adobe CS3 so, is it possibly just out of date and glitching?

[hammergun]

Okay, I figured it out myself. I turned stroke hinting on.