Tutorial - How create your mouth sprite & animate it

Read and write tutorials about becoming a great artist.

Moderators: EN - Assistant Moderators, EN - Forum Moderators

User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

Well...just I've promised I'll try to teach "How create your mouth sprite & animate it" with this tutorial (and pratice my English specially... besides I can advance my sprites of my OC). This tutorial has two sections: "Create your 'mouth sprite'" and "Animate your 'talking'". I've used PS but I tried to focus in general with regard to the first section. My appologies if I can't explain correctly... anyway the tutorial is too graphic, so I hope you can understand it.

Create your "mouth sprite"
Spoiler : Tutorial1 :
Ok... We need our sprite but it hasn't any mouth (obviously because that is the target of this tutorial)
Image

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.
Image

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.
Image

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".
Image
------3.5
Image
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:
Image
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.
Image
-----4.5
Image
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:
Image

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
Image

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.
ImageImage

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.
ImageImage

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)
ImageImage

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.
Image

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.
Image
-----10.5
Image
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?
Image

When you have finished all of your sprites, it's the time to animate them.
Animate your "talking":
Spoiler : Tutorial2 :
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-Image2-Image3-Image

4-Image5-Image6-Image

7-Image8-Image9-Image


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):
Image

* 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.


Uhm... just said if you want ask me something, remember to use not dificult/ convoluted/close English (I don't mind if you prefer speak me in Spanish)
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Singidava »

Great tutorial! Though there's few things: Usually mouth is left white in AA games and personally I prefer a little slower talking. However these aren't really faults I just thought I'd mention them. Btw don't stress about writing in English. English you used in the tutorial was pretty good and I didn't have any trouble understanding it.
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

Oh, that relief me.
The speed has an explanation (in my situation) and it's when the interval of time is small the eye's moving is more "flowing" than slowest. But this is relative... you can use other intervals of time if you want.
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
User avatar
Blackrune
Posts: 3805
Joined: Fri Apr 17, 2009 3:11 am
Gender: Male
Spoken languages: English, German, Japanese
Location: The Submarine

Re: Tutorial - How create your mouth sprite & animate it

Post by Blackrune »

Well, talking speed varies even in the original games. I always decide depending on the character.
This is a really nice guide. Can we expect more guides for other things from you?

...I actually do things pretty similar to how they are described here. It's good that you didn't forget about the moving jaw, I see a lot people forgetting that.
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

Uhm... I'm not sure. It's difficult explain something like this (or in my case) in your native language, so in other for sure it's more than yours (beside... I don't know the theme than I would do it) but I'll thinking about if I'll do or not...
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
Phantom

Re: Tutorial - How create your mouth sprite & animate it

Post by Phantom »

This is a hardcore tutorial! Phantom approves!
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Dypo deLina »

As do I! :D
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

Usually every tutorial be must approved?
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Singidava »

Blackrune wrote:...I actually do things pretty similar to how they are described here. It's good that you didn't forget about the moving jaw, I see a lot people forgetting that.
If you are refering to me I don't actually forget them. I'm just too lazy... Maybe that's worse than forgetting though :XD:
Hikari Yamija wrote:Usually every tutorial be must approved?
Nah, they're just complimenting you by the "approval".
Tap
Posts: 4799
Joined: Tue Dec 15, 2009 9:01 am
Gender: Male
Spoken languages: English

Re: Tutorial - How create your mouth sprite & animate it

Post by Tap »

This is a very good tutorial, Hikari! It's much more detailed than Percei's from Court-Records but then again, his covers how to actually animate in various programs while yours focuses more on the sprite itself which is great. ;)

If we get more tutorials (I know there is a few floating around here on the Your Art forum), I'll group them in a single thread and sticky it. ;)
ImageImage
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

@Singidava: After your reply in your art section I'm sure of that. In comparation... the jaw isn't nothing next to the scratch, so I don't think he said that for you... In general maybe because I saw that detail sometimes too.

@Tap: Yeah... I prefer to focus in the general fact because everyone use their own animators (like the sprites editors), however I know just about one or two programs so I can't explain in differents plataforms.
How I said... I need to think about it, but I can't refuse that make me feel positive about to create another tutorial...
EDIT: Oh no... I thought something for a tutorial right now and I don't want to do it in this days because I need to work in my sprites... (It's about Zoom-in and I've finished that sprite)
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Singidava »

Hmm... Maybe I should create a tutorial too... about how I create my sprites. What do you think about it? Is it needed? I'd love to help with anything that's for encouraging new "from scratch" -spriters.
User avatar
Dypo deLina
Posts: 5528
Joined: Fri Apr 02, 2010 7:24 am
Gender: Male
Spoken languages: English, Dutch, German, French, Spanish, Al Bhed
Location: Exactly where you least expect me to be.
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Dypo deLina »

I wouldn't mind a scratch sprite tutorial. :D
LunchPolice was making an example as well. Maybe you could cooperate with him on this? :D
チラセ・マギタ
~Married to Evolina deLuna~ <3
~Loving father to ZetaAzuel~


Proud creator of Cynder Janice, Rex Gladiorum, and Raimpius in Endless Time.

Image Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Hikari Yamija »

Yap, I saw it and that's the why I prefer not do that theme because if we have more tutorials of differents themes... better. But anyway, everyone can create each tutorial than want.
Image
"Sientete orgulloso de tus logros... y aun mas de tus derrotas pues no es mejor el que no ha perdido sino aquel que ha sabido de sus derrotas salir victorioso"
User avatar
Singidava
Posts: 1621
Joined: Fri Jul 23, 2010 6:56 pm
Gender: Female
Spoken languages: Suomi, English & 日本語
Location: Finland
Contact:

Re: Tutorial - How create your mouth sprite & animate it

Post by Singidava »

Q:
Dypo wrote:I wouldn't mind a scratch sprite tutorial. :D
LunchPolice was making an example as well. Maybe you could cooperate with him on this? :D
A:
Singidava wrote:I'd love to help with anything that's for encouraging new "from scratch" -spriters.
Also Dypo you should do a tutorial "How to animate in GIMP". I'm sure that since GIMP is free it would be helpful to many.
Post Reply