Tutorial - Create your "Zoom-in" Sprite

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 - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

At last... I've decided to create other english tutorials. Why? The questions is "Why not?" (I made myself that question). I can pratice my english with this... other can learn about spriting... and Imageshack will get more images (?). So I haven't reason to decline that idea.

Well... this is my fourth tutorial (second in english) and I've finished it fast because I change my opinion soon. However I'll not create other tutorial until I've finished my sprites... but in that moment I'll take my time because I'll do "officials" request in the Spanish section, so I don't know how much days will passed until other tutorial. So this maybe will be a "stop" in my tutorials (this is more big than the first one, so you can "entertain" more...) but anyway I hope than others tutorials from other users will help you too... Well, lets go to the important:

This tutorial doesn't explain some details than they are in my other tutorial. If you want to see it I'll leave it here:
http://aaonline.fr/forum/viewtopic.php?f=30&t=4093

Ok, then... lets start (and again I'm sorry if I can't explain well with my english. Maybe I should to ask someone how know Spanish/English to revise this...):
Spoiler : Tutorial :
1- This steps is relatively "easy". Just search you "desk-slam" sprite to edit. (I've used my "objection" sprite because the "deskslam" pose from my character isn't side face)
Image

2- We aren't interested in the small proportion, but we don't know how much bigger we must draw the character. It's that so, just search some Zoom-in sprite from AA and copy you sprite with the correct proportion.
ImageImage

3- Now, draw the lineart (guide lines) again while following the line.
Image
When it was finished, it will be something like this:
Image

4- Now it's time to be patien because we will coloring some "Base Colors" (You don't need to paint the skin yet, but I've done it because I prefer to do it... but it's more pratice if you don't do it. Some steps foward you will see it)
Image
Note: Yap, I forgot the necktie, but I fixed with some yellow lineart.

5- Shades... I know this is heavy, but it's necesary. First use some medium dark color for every section to make your shades guides (or brightness if is the case)
Image
6- Guiding by shades, use other darker color (or lighter in brightness) to define your shades bit to bit. Keep in mind the forms of clothing and hair (this is intuitive I think, so I can't explain it... My apologies... But I'll try to tell you some tricks)
Image
-----6.5
Image
A- This is my favorite trick, but more dangerous and heavy. Use all tones than you can to define the shades and brightness... if you can do it 10 or more times you will get a gradient effect. Interesting, right?... but watch out, this will steal you a lot of space for your colors (Try to don't cross the 256 colors, I've done it one time and I lost my work... so I've had to edit it in that moment) and your "energies" (I don't know how to explain it in English...) so maybe there's a posibility than you will leave the sprite in the process.
B- Other alternative (and in AA sprites they use this sometimes) is to use "pixel gradient". Just paint with some pixels of space between each same tone.

7-Ok... the black guide isn't aesthetic indeed. Well then, draw other line with some color similarity than the color wich is near to.
Image
-----7.5
Image
Remember the "jumps" between pixels and how to solve it.(Review the tutorial "How create your mouth sprite & animate it")

8- This is what I was saying. Use the old sprite to guide you in the creation of the face.
Image

9- Draw again some guide lines approximately. They will be our eyes/eyebrows, nose and mouth.
ImageImage

10- Shades again... How exciting, right?. Anyway, use the protocol 5 and it will be ok(but I'll give you others tricks to give realism)
Image
-----10.5
Image
In this case, the light will be in the top (It's dificult to see it, but the light impacts with some inclination angle from the front... It's in the space (R^3) and not in the plane(R^2)... but it's only a comment, it's not important in this tutorial I think but maybe it usefull to know)
A- The eyelid usually give very good impression because they give profundity to the sprite. But it's not necesarry if you don't want... But other alternative is try to use a line to define it.
B- Other shade than can give profundity. Normally the mouth it's not plane, so it makes some shades... If you want, do it... but remember maybe you'll must to create other shades for the "talking" sprite too.
C- This shades it's only for the aesthetic. The blood usually accumulates in some "corners" in the body (That's why the nose becomes red when it's cold) and in a light skin person you can see it (nose, fingers, elbows...). If you're character is a man, you don't need to do it.

Uhm... Is this tutorial big? Maybe you should to take a break, because it's not over...
11- I'll not explain again the guide again because maybe you're bored of that. So I just tell you somethings:
- Dark guide will be in the top. Middle between the others.
- Normal guide will be inside the eyelash
- Light guide will be under and at the ends.
Image
-----11.5
Image
A- Paint the eyes with the color than you want. Remember the brightness in the eye ball. It's usually under.
B- Draw the eyebrows. Use the darker shades to lighter in the direction of the arrow (because the eyebrows becomes more skinny at the ends)
C (Maybe this must be the "B")- Paint a gradient in the arrow's direction. Remember than the pupil must be in the middle (obvious, but I prefer to say it). If you prefer... you can paint it with a plane color (the same color) in all the eye. Ah! Other detail. Under the eyelash it's more dark, so paint other shadow there.
D- I've done this before because I know where it will be, but I'll explain it now because it's more easy to paint it in this moment. Normally the bridge of her nose and eye sockets should create some shades, but if you paint a dark shadow maybe the character will seem than he hasn't slept. So use a light shadow to define it... but this is maybe innecesary because it's difficult to see anyway...

At finished, it will be something like this:
Image
Note: The original design of my character has this form, but usually the pupil should be a circle.

12A- The nose... I don't know how to explain this exactly but I'll try give again some tricks. Usually the small nose in the women is beatifull than the biggest, but if you draw a small nose it seem she hasn't nose. In that case, use normal/light colors from the middle to outside maybe it can give a smaller effect without the effect "noseless". In the male case, medium or big nose it's ok (with shades, of course)
ImageImage

12B- In my case, I've decided a nose with angle... but if you prefer you car use other inclination to see others details in the nose. I didn't draw it, but I'll leave a sketch...
Image

13- About the mouth... not much to say. Just remember the steps from the other tutorial (but now we have more space to work. This is good and bad at same time). Well, like always I'll comment somethings...
Image
-----13.5
Image
A (female only)- Now we can paint other brightness(top) in her lips because we have more space. But don't exaggerate it, ok?
B - And again... the light impacts comes from the top. That causes more clearly above the mouth and down shade it. In the upper lip you can draw some dotted lines to mark the lip... but this isn't neccesary if you don't want, it's difficult to see it too.

Finished. Our work may seems something like this:
Image

Now just animate it with the steps in the other tutorial (second section). One thing about... You don't need to create "talking/closing eyes" sprite because I didn't see any zoom-in with that. Other one... Usually in the Zoom-in's Mode the characters are talking more fast than usual, so maybe the time interval will be small (but do it if you want)
Image
Well then... only hope this help you in something. (Huh~, "breaktime" now...)

One more thing. Now if you have your "Zoom-in", maybe it's usefull to create your "VS screen". If you're insterested, check this guide by E.D.Revolution:
Spriters' Guide: Making an AAI style VS. Screen
Last edited by Hikari Yamija on Thu Oct 21, 2010 6:00 am, edited 2 times in total.
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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

Well, this is a very good guide to getting the Zoom-in sprite. However, you've made one major mistake: it's the desk-slam that's the base of the zoom sprite. too bad I can't sprite at all... Maybe I can refer this for Dypo for this guide...
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

I don't understand... Did you mean it was better than desk-slam be the base?

Edit: Oh... Now I understand. Yeah, maybe that is the mistake in my tutorial. The reason by the I've used the objection sprite it's because the deskslam of my character she is in front of the screen, but maybe I should have mentioned it.
I appreciate it, thank for tell me that detail.
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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

Necesito clarificar. La base del "zoom-in sprite" es normalment el sprite de "desk-slam." Esto es el caso cuando el sprite es en el estilo de AA. Si su base es en el estilo de AAI dependente de su caracter. Para el estilo de AAI, puede usar "objection sprite" como de la base. Para Edgeworth, sí, es su "objection sprite." Pero, para Shi-Long Lang, su "zoom-in sprite" es un combinación de "erk" y "glare" sprites. Puede usar objection para sprites en el estilo de AAI. Usar desk slam para sprites en el estilo de AA.

Let me clarify this. Usually, the base of the zoom-in sprite is the "desk slam" sprite. That's always the case in AA-style sprites. For AAI-style sprites, the base of the zoom-in sprite is, I actually do not know. I know the base for Edgeworth's zoom is Objection pose. However, Shi-Lang's zoom sprite is based on his "erk" and "glare" sprite. For AAI-style, you can use Objection. For AA, it must be desk-slam.

(I hope my spanish isn't bad. Mine's the equivalent of 5th grade spanish.)

EDIT: (You edited your post before I posted this one up...)
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

My apologies, but yes... You're right, I forgoten that. But I guess it's not necesary to reply again, so I'll comment your spanish level...
Your Spanish isn't bad indeed, I understand perfectly in the context... but it's not perfect (just details like complements or prepositions) but enough to be here sometime (I hope my English be as good than your 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"
Phantom

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Phantom »

This is a really hardcore guide! I'm sure many spriters will enjoy this tutorial :D
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 - Create your "Zoom-in" Sprite

Post by Dypo deLina »

Indeed. I can surely use this for my future projects. :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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

Hikari, I also remembered that you commented on my Spriters' Guide (The VS screen thing).

Do you think the same concept can be applied to VS sprites? Check the zoom sprite and the VS sprite (it's under other Graphics in CR) in order to see my point. Because if this technique can be applied, I'd like for you to post it in my guide so that I can change the last part of the guide.
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

Uhm... Yes, I did it. And indeed, this guide can be applicated to VS sprites (If you let me edit my tutorial with your url to "Spriters' Guide: Making an AAI style VS. Screen" I'll prefer it... It something like "complement each other" in terms of helping users). But anyway... what do you want me to post?
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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

Basically, how about you make a miniguide of how to make a VS sprite out of a zoom sprite. And I give you permission to link to my guide.

If you notice, the VS sprite is the same as a zoom sprite, but the sizes are different. That's why I asked if the same concept can be applied from making a zoom sprite to making a VS sprite.
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

"Miniguide"? Something like I use to do in my tutorials?
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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

I don't know what you used to do in your tutorials.

What I mean by miniguide is a mini-tutorial. A quick guide that's related to the main tutorial. See my VS screen guide. The miniguide I have there is creating a vs sprite from a zoom sprite (using simple resize methods.)
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

Uhm... I mean a tutorial with images and tricks...
However I've checked it and I don't know exactly how I can explain that... but I'll try.
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
E.D.Revolution
Posts: 5743
Joined: Mon Jul 26, 2010 9:00 pm
Gender: Male
Spoken languages: English and decent Spanish
Location: Across dimensions, transcending universes

Re: Tutorial - Create your "Zoom-in" Sprite

Post by E.D.Revolution »

Gracias por agregando el miniguide a mi thread, Srta. Hikari. :pearlhappy:
Image
User avatar
Hikari Yamija
Posts: 291
Joined: Wed Sep 15, 2010 11:18 am
Gender: Female
Spoken languages: Español
Contact:

Re: Tutorial - Create your "Zoom-in" Sprite

Post by Hikari Yamija »

The appreciation is mutual. I hope this helps someone.
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"
Post Reply