Tutorial - How create your mouth sprite & animate it

Read and write tutorials about becoming a great artist.

Modérateurs : EN - Assistant Moderators, EN - Forum Moderators

Règles du forum

Tutorial - How create your mouth sprite & animate it 

Message par Hikari Yamija » Lun Oct 18, 2010 6:59 pm

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

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


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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Singidava » Lun Oct 18, 2010 7:12 pm

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.
Avatar de l’utilisateur
Singidava
 
Message(s) : 1621
Inscription : Ven Juil 23, 2010 6:56 pm
Localisation : Finland
Genre: Féminin
Langues parlées: Suomi, English & 日本語

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

Message par Hikari Yamija » Lun Oct 18, 2010 7:24 pm

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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Blackrune » Lun Oct 18, 2010 11:09 pm

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.
Avatar de l’utilisateur
Blackrune
 
Message(s) : 3772
Inscription : Ven Avr 17, 2009 3:11 am
Localisation : Right behind you
Langues parlées: English, German, Japanese

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

Message par Hikari Yamija » Lun Oct 18, 2010 11:28 pm

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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Phantom » Mar Oct 19, 2010 6:36 am

This is a hardcore tutorial! Phantom approves!
Phantom
 

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

Message par Dypo deLina » Mar Oct 19, 2010 7:14 am

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
Avatar de l’utilisateur
Dypo deLina
 
Message(s) : 5528
Inscription : Ven Avr 02, 2010 7:24 am
Localisation : Exactly where you least expect me to be.
Genre: Masculin
Langues parlées: English, Dutch, German, French, Spanish, Al Bhed

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

Message par Hikari Yamija » Mar Oct 19, 2010 11:10 am

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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Singidava » Mar Oct 19, 2010 11:23 am

Blackrune a écrit :...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 a écrit :Usually every tutorial be must approved?

Nah, they're just complimenting you by the "approval".
Avatar de l’utilisateur
Singidava
 
Message(s) : 1621
Inscription : Ven Juil 23, 2010 6:56 pm
Localisation : Finland
Genre: Féminin
Langues parlées: Suomi, English & 日本語

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

Message par Tap » Mar Oct 19, 2010 11:27 am

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
Tap
 
Message(s) : 4799
Inscription : Mar Déc 15, 2009 9:01 am
Genre: Masculin
Langues parlées: English

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

Message par Hikari Yamija » Mar Oct 19, 2010 12:48 pm

@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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Singidava » Mar Oct 19, 2010 1:36 pm

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.
Avatar de l’utilisateur
Singidava
 
Message(s) : 1621
Inscription : Ven Juil 23, 2010 6:56 pm
Localisation : Finland
Genre: Féminin
Langues parlées: Suomi, English & 日本語

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

Message par Dypo deLina » Mar Oct 19, 2010 1:43 pm

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
Avatar de l’utilisateur
Dypo deLina
 
Message(s) : 5528
Inscription : Ven Avr 02, 2010 7:24 am
Localisation : Exactly where you least expect me to be.
Genre: Masculin
Langues parlées: English, Dutch, German, French, Spanish, Al Bhed

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

Message par Hikari Yamija » Mar Oct 19, 2010 1:52 pm

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"
Avatar de l’utilisateur
Hikari Yamija
 
Message(s) : 291
Inscription : Mer Sep 15, 2010 11:18 am
Genre: Féminin
Langues parlées: Español

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

Message par Singidava » Mar Oct 19, 2010 2:05 pm

Q:
Dypo a écrit :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 a écrit :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.
Avatar de l’utilisateur
Singidava
 
Message(s) : 1621
Inscription : Ven Juil 23, 2010 6:56 pm
Localisation : Finland
Genre: Féminin
Langues parlées: Suomi, English & 日本語

Suivant

Retour vers Art Guides

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité