Ok... We need our sprite but it hasn't any mouth (obviously because that is the target of this tutorial)


1- First, we need some guide for create the mouth. Use any color what you want, but if that color seems the finally color than you want... better. Make the form approximately.


2- The second step it's no difficult... just search other color more dark than the guide and make other "guide" where the shades will be approximately.


3- Ok... it's shades and brightnes time. Guide yourself with normal and dark guide to get some shades. I'll explain in the next "step".

------3.5

A- When you draw sometimes you create "jumps" withing pixels. This isn't asthetic indeed... the solution? Just use other light color than the "jumping pixels" and the sprite don't getting "pixels".
B- Draw some shades up the dark mouth side (If the sprite is female, use just a bit shades and light colors... However if is male, try to use more shades or colors more dark than the sample). This will give to sprite more "depth".
C- Again, if your charat is a girl... the sprite will be more femenine if you draw some brightnes in her under lips.

When we finished it, the sprite (mouth in this case) will be some like this:

Well, the result is nice... but we haven't finished our work.

Its the time for change the close mouth to "middle".Dont worry, this steps are easy in my opinion.
4- Open the mouth with other lines, but use the colors from the guides.

-----4.5

A- Dark guide will go down
B- Normal Guide will "draw" the form. Just image the form and follow it.
Inside- Use gray and white for the teeth (again, for women use color more light than the men)

Not difficult, right? Let's see the result:


Ok... the last one... and yes... this will be more "difficult" than before ones.
5- Recomendation: Imagine where is the jaw. A trick is the nose, behind usually it will be


6- Copy the color from the jaw and draw something like the original jaw but just a little bellow (1 or 2 pixels). Bring it when you are near the jaw.


7- Wel then... Now we must use the same protocol than 3.5-A. or copy the same color before you had up the original line.


8- Time the draw forms. Try to draw the opened mouth approximately using the protocol 4 too. Later we will change some details. (Use the close mouth sprite preferably)


9-Well.. now just use some red tones for the inside. In this case I used 2 reds. Ligths for the front and dark the rest.


I'm sorry... but this will be more "difficult" if you don't like the result in this moment...and it's more difficult because is more intuitive. Anyway I'll try to explain...
10- The guides isn't aesthetic sometimes or the form it's not nice in our oppinion. Well then... well give other form to the mouth and shades with other light direction.

-----10.5

A- The up-left side will be the most shaded (because my light direction is in the opposite side)
B- The up-right side must be shading too, but more light than A so we will use other shades tones more light than A.(I don't need explain again the female/male colors again, right?)
C- The dark guide will change to normal or light guide for the effect of light direction

Ok... it's over. Relieved, right?

Before explain the steps... I prefer to indicate some "codes" for give me some facilities in create the tutorial.

Code [Eyes/Mouth]:
1-Open/Close=O/C ; 2-Open/Middle=O/M ; 3-Open/Open=O/O
4-Middle/Close=M/C ; 5-Middle/Middle=M/M ; 6-Middle/Open=M/O
7-Close/Close=C/C ; 8-Close/Middle=C/M ; 9-Close/Open=C/O

We will not need the 7-C/C, however I've put it here to make this more "understandable". (Like a matrix)

Graph:
1-2-3-

4-5-6-

7-8-9-


Ok then... Now I'll summarise the animation by blocks (I've used the interval 0,18 seconds, but you can use other if you want):

Normal Talking (NT):
1-O/C -0,18Sec> 3-O/O -0,18> 2-O/M -0,18> 3-O/O -0,18>

Open Talking(OT):
1-O/C -0,18> 3-O/O -0,18/2 = 0,09 *(explain-down)> 6-M/O -0,09> 8-C/M -0,09> 5-M/M -0,09> 3-O/O -0,18>

Close Talking(CT):
1- O/C -0,09> 4- M/C -0,09> 9-C/O -0,09> 6-M/O -0,09> 2-O/M -0,18> 3-O/O -0,18>

Middle Talking(MT):
2- O/M-0,9> 5-M/M -0,9> 9-C/O -0,09> 6-M/O -0,09>

Final:
NT x1 times + OT x1 + NT x3 + CT x1 + NT x2 + MT x1 + NT x1

Result (Graph):


[b]* Explain= The opening/closing animation must be constant... What this does mean? The AA gifs usually talk with the same interval of time when they open or close their mouth, but sometimes they are closing their eyes too so we if you can give the animation more naturality you will use some talking+closing eyes sprite... but there is a problem. Wich one? If you put the middle and close eye with the same interval of time the sprite will have the double time when he's talking in that moment. How to fix it? Easy. Just divide the interval in the half of it (in this casi 0,18/2=0,09 sec). That's why I used that interval there.