login

Author Topic: Tutorial - Spritemaking for visual novel beginners: things and tips to consider  (Read 53020 times)

Hime

  • of Lux Visual Novels
  • Administrator
  • Member
  • Posts: 54
    • View Profile
    • Lux Visual Novels Blog
    • Email
Download .odt
Download .doc

Spritemaking for visual novel beginners: things and tips to consider
A tutorial by Hime

Foreword

This tutorial is about making sprites, the ”paper dolls” that change expressions, which are used to depict the characters in normal situations in most visual novels. The tutorial is mainly aimed at those making their first visual novel, but may also be helpful to others. The tutorial is written from the perspective of drawing the sprite digitally and strictly focuses on sprites. Instead of how to make a sprite look good, it mostly focuses on the question ”what to consider when making sprites?”. This information should be useful to both advanced and starting artists who have never made sprites before.

Please note that even if I use words like 'should', there are a million ways to do these things equally right: this is just a description of how things are done according to my personal approach, which I hope will be useful to some of you.

For all readers, happy spritemaking!

1. Height and relative size

This is probably the first thing you have to consider when making sprites. As you sketch, you might start to wonder: how much of the character should I draw anyway? Drawing a full-body shot rarely hurts and some visual novels have used that, but in most cases it is unneccessary work and may consume too much of the artist's precious time and resources.

How much you must draw for a basic sprite (not a close-up or a distant shot) basically depends on two things: the distance between the viewer and the character and the character's relative height when compared to the viewer. The distance varies from game to game and you are usually in the comfort zone of the reader as long as the character's chest shows and the knees do not. In most visual novels the sprite is depicted either from waist or hip upwards.

There should be some empty space between the tip of the head and the top of the screen. The space can be 10-30% of the screen height, but really, whatever works for you is fine. An exception to are characters who are significantly taller or shorter than the main character. Say our protagonist is 160 centimeters tall: a 2-meter tall person's head might go a bit over the screen (and we might be able to see at least some of their thighs), while a 120 centimeter child might only take half of the screen (and probably is depicted bust-up or so).

2. Expressions, poses, outfits and other variations

Expressions are almost a must for sprites while poses and outfits are optional. On top of showing what the character looks like, the duty of your sprite is to tell their feelings and in some cases, the current situation. Expressions and poses will help you with the former one and poses and outfits with the latter. Other variations may include things like hairstyle if, for instance, a character cuts their hair in the middle of the story.

Completely different poses (second sprites for the character) can always be made afterwards, but you should know whether or not you will make other variations for the sprite rather early on, or at least make sure to leave a possibility to make them if you are unsure.

If you have never drawn a sprite, you may wonder how this can be a problem. Well, in spritemaking, most problems you may encounter are ones regarding layers. Say I think the character will have their eyes open all the way through the game and draw the eyes on a common lineart layer, but realise later on that I have a scene that requires closed eyes – this is where I have a problem. Of course, separating the eyes from the layer and making them into two different sets, open and closed, is not always a problem. Nonetheless, especially if the sprite is complex and close to completion, even making little changes like this may take ridiculous amounts of time and poking around with layers, all the more so if you need to change something more complex, such as the dress the character is wearing, or if you have not handled layers in the most flexible way.

When making expressions, which is practically always the case, you should make sure that the face looks good without any of the expressive parts (usually eyebrows, eyes, mouth) on it. Make sure it looks simple and clean and that you do not, for example, draw an underlip shadow on the common skin layer, as it may not be the same for all mouth variations. You should also make sure there are not any holes in the colouring or so (this can sometimes happen if you colour the sprite wearing an expression).

If you plan on making different outfits, you should start with making a naked sprite just like you have to make a 'naked' face for expressions. Of course, unless you are specifically planning on it, you do not have to make it detailed or anything: the idea is just to make sure other clothes will look good on it as well, and that you will colour the entire skin area. Things can get a bit tricky if you draw the character in a normal outfit but later on decide you also want another outfit that reveals more skin, but you have not taken this to consideration and the skin layer is empty on some parts that should be there for the second outfit.

3. Dealing with layers

When drawing sprites digitally, it is usually worth the trouble to use layers in effective ways. Here are some tips for use of layers when making sprites. To follow the instructions you need a program capable of using layer groups (for example, Photoshop). Note that the following layer orders are examples.

Layer order
Outfit group
    - Dress 1 group
        - piece 1 of Dress 1 group *
        - piece 2 of Dress 2 group
    - Dress 2 group
Expression group
    - Special effects group **
    - Eyebrows group
    - Eyes group
        - Open group
        - Closed group
        - Happy group
        - Sad group
    - Mouth group
Naked group
    - Hair group ***
    - Skin group


* for example, this layer group could be a shirt – or a dress – or shoes... just any part of a complete outfit.
** may include things like tears, blush effects and other additions that can be added to any expression.
*** may include different hairstyles as different groups if needed. This group can also be on top of the expression group, in fact, if you have several hairstyles it is probably better to have it on top of expressions. But if you do not, you can keep it here too. It is a question of preference.

You can probably see that there is quite a lot of groups here. Why is this? Well, first of all, it is easier to navigate if you say, want to change an expression – instead of having to swim through a sea of possibly a hundred or more layers, you can just clickity click on some pretty groups and find what you need. Sprites can be done without layer groups, but not having them certainly makes it more difficult. If you cannot use layer groups, you can merge the ungrouped layers into individual ones which can be about as handy as groups, but harder to modify later on.

So, what does our individual layer group contain?

Layer order
Skin group
    - Skin lineart
        - ^Light layer
        - ^Shadow layer 2
        - ^Shadow layer
    - Skin colour


^ = clipping mask

First thing an amateur artist will notice here that is hey... the light and shadow layers are under the lineart layer? Except they are not. In fact, they are on top of the skin colour layer on a clipping mask. Clipping mask is a feature that can be found in most popular graphics programs. This feature can save you from many hours of trying to colour in the lines. By applying a clipping mask (in Photoshop, you can do this by making an empty layer on top of the base layer, clicking your right mouse button on it and choosing ”create clipping mask”) you make sure that you cannot colour over the edges of the base layer. Again, not essential, but very helpful. Main point is, each group contains the lineart layer, the colour layer and whatever effect and lighting layers you may want in between them.

4. Spritemaking tips

Avoiding transparencies in between colour layers

One mistake even an otherwise experienced artist might make when creating sprites for a visual novel is that it is easy to forget your sprite is going to be on different backgrounds. Because of this, there must not be any transparent spaces inside the character, even if you usually do not have to mind these when making normal art. You do not want that cyan sky background to show through your character's forehead, now do you? These small transparencies easily happen between the edges of two things, like the skin and the hair, and under lineart if you do not use solid brushes for that.

There are two ways to avoid this: either make very solid lineart and take care you colour perfectly in it, or my lazy way, which is to colour a little over each line in the layer that is under. This would mean that according to our example, you should colour the skin colour layer a bit over the lines to the side of the hair. This is easier and saves time, but if you do this you cannot easily change the order of the layers anymore (if you need to get the skin layer on top of the hair one for some reason, for instance), but if you planned everything well from the start this will not matter as they were initially in the right order anyway.

Easier lineart and base colouring

Sometimes base colouring can prove to be quite a headache and a waste of time, particularly if you are doing it by manually colouring in with a brush. For this one you actually need a computer average or above average in power. Fact is, some parts of  drawing – especially lineart and base colouring – are easier to do on higher resolutions. In lineart this applies if you do not make 100% solid lineart, and it helps you with base colouring especially if you prefer to make relatively thin lineart.

So, make the canvas 2-4 times larger than the final result will be, and enlarge lineart brush size as well. If you usually draw the lineart on the real resolution with a 2-pixel wide brush, do it with a 4 or 6 one instead. If you are drawing with a tablet or otherwise applying transparency to the lineart, when zooming out you will notice that possible imbalances in the transparency do not look half as ugly as usual! In fact, the reduction of size can hide some pretty hideous mistakes in the line, the more the bigger your canvas gets.

As for base colouring, when you have finished the lineart – you might have to duplicte your lineart layers and merge them together for this if you used more than one – just use the magic wand tool to select the areas you want to colour in. Expand the selection by a few pixels so that the selection will end around the middle of the lines you have drawn. Create a new layer below the lineart and paint bucket the colour in. If you did everything right, you should have most of the area coloured in by now. The method is not very precise and you will most likely need to make a couple of corrections here and there, but it can still save a lot of time.

Here comes a couple of very simple tricks. Lineart is usually easier to make when you set the sketch layer to a transparency of 10-50%. It may also help to change it to a colour different from that of the lineart you are planning to make: for example, pink or green for black, or blue for brown. This way you can easily distinct between the sketch and the lineart due to the contrast between their hues and saturations. Consenquently, it is also easier to see mistakes in base colouring if you temporarily colour the background with a shade different from those of your sprite.

Consistency between sprites

When making several sprites for a single visual novel, you might wonder how to remain consistent in style and technique between sprites. I tend to obsess over consistency so I have quite a few tips for this.

First of all, one of the most simple ways is to do the whole sprite set one step at a time. Sketch them all, lineart them all, colour them all... you get the point. This way all the sprites should have similar quality as you move straight from sketch to another straight away without letting your style or technique change for better or worse between pieces.

But if you a beginner, or an advanced artist trying to draw with an unusual style, even this might not be enough. One way to ensure your style is staying consistent is to have your older sketches next to a new one by making them the bottom layer of the file. I suggest you use a low transparency, otherwise they might disturb you too much.

Especially if you are not a very experienced artist, one easy mistake here is to forget that the lighting between sprites should be consistent as well, so decide the direction of the light early on. If you are going to display several characters at the same time, it can look really weird if the light is coming from different angles in each one. Unless your story involves each character carrying a lamp around with themselves, this is not what you want. This also applies to the glints of light in the character's eyes, which should always come from the same side both in sprites and between them.

Use several files, save all the time

Sometimes your files might suddenly corrupt, or you might accidentally save them after applying effects and edits you do not want to include in the file. If this has not happened to you, it is easy to think it never will, but come on, do you want to lose all of your precious work when it happens? Yup, you do not – so make sure to keep several process files and to save often enough. I favour the approach of saving each step in a new file like this:
Character_1.psd – sketching, sometimes lineart
Character_2.psd – base colouring
Character_3.psd – first shadow layer

Character_X.psd – the complete, full-res version
Character_final.psd – a version that has been resized to game size, layers may be merged


This approach is nice in the regard that not only you will always have earlier versions if your file happens to corrupt, but you also have stored your progress in a really nice way. The final version makes actually composing the real sprites used in the game easier, and also ensures you will not accidentally resize the full-resolution final piece, which would make it hard to edit afterwards.

The downside is, this way is not very friendly towards those with small hard drives. If you cannot afford having many files for the sprite in the long run, you should at least try to temporarily keep two files for the sprite for the duration of the actual drawing process:
Character_1.psd – first sprite file: for example, you sketch in this one...
Character_2.psd – second sprite file: ...and lineart in this one...

...and then as you base colour, you save the changes on Character_1.psd again. You save each step in the file you did not save it as the time before. This way you can avoid most corruptions while using only a little of your dear space.

Of course, it also pays off to keep backups. This means that the files are also saved in a preferably remote location that is not your own PC. This can be something like an USB stick or a server on the web. This way you will always have your files even if your PC busts and your house burns down... though in the latter case, that probably would not be your largest worry anyway...

And obviously, save save save. I just cannot emphasise this enough. It can be very annoying and impractical if your computer crashes after several hours of unsaved work.
A piece of eternal wisdom: "Viking-chan isn't a viking-chan without her beard!"
Click here for the Lux Visual Novels blog!

Midnighticequeen

  • Member
  • Posts: 9
  • Treat others the way you would like to be treated
    • View Profile
    • My Creative Abyss
Thank you for the tips :) It's nice that someone finally broke down the sprite-making for tutorials. I really appreciate it.
The only thing that can stop you from achieving your goal is you. You only live once, there's no point living that life afraid of your own greatness

Hime

  • of Lux Visual Novels
  • Administrator
  • Member
  • Posts: 54
    • View Profile
    • Lux Visual Novels Blog
    • Email
Happy to hear you like it!

One of the main reasons I wrote this is because I made a lot of mistakes when making my first sprites, and they were mistakes I knew I could have avoided if I only had known a couple of things. Many people seem to think all you need to create a sprite is the ability to draw well, but I believe there is much more into it: a lot more organisation and thinking in advance is required than when drawing your average, random drawing that does not need variation and will only be seen on the background you drew it on. As the sprite is what will represent your characters most of the time, it is important that you do it right.

It really is an art of its own that way, but a fun one once you learn to avoid making it difficult for yourself. In the end, it is rewarding to see how expressive the sprite you just drew is. Some of the sprites I have made have hundreds of expressions if you count every variation you could make with the different parts... with hundreds of variations, you can display a lot more emotions than you ever could with just one picture, from sinister smiles to tears of happiness to comical annoyance. When done with love and care, a sprite can give the character a whole new dimension of feeling, which I love.
A piece of eternal wisdom: "Viking-chan isn't a viking-chan without her beard!"
Click here for the Lux Visual Novels blog!

Vatina

  • Administrator
  • Member
  • Posts: 76
    • View Profile
    • White Cat
Hmm very true.
The first sprites I made was for someone else's project - said project never came to be although I finished the sprites, but somehow I still didn't find the work "wasted" at all. I made a lot of mistakes with something I though would be very simple to do, and found an easier way to do things for my next project ^^; Yes, I'm actually happy that those sprites were never used in the end... they were pretty bad...

And even though I have developed my own way of producing sprites over time, there were still some tips in this tutorial that inspired me to change some details. It's always interesting to see the methods that other people use :)

Midnighticequeen

  • Member
  • Posts: 9
  • Treat others the way you would like to be treated
    • View Profile
    • My Creative Abyss
I agree with everything you said. I at first thought sprite making was simple, but after my first trials, I found out it was another art forum in its own. Unfortunately at the time there were no tutorials on making your own sprites that I can find, so I found myself making a lot of mistakes before I started making progress. :P

Still, learning is learning. I think I'll try your method the next time I start making my sprites, because its way better than mine. :D

The only thing that can stop you from achieving your goal is you. You only live once, there's no point living that life afraid of your own greatness

miyod

  • Member
  • Posts: 1
    • View Profile
    • Email
Oh, this is really useful :D I have learnt most of these the hard way, but since I tend to forget, I'll have this at hand when drawing my sprites ^_^ Thank you for taking the time to write this guide!

 

anything