Visual Novel Basic Art Tutorial: canvas size and sprites composition.

2017.11.12, written by Kuna

Recently I received a message from instagram user yangxixiah, who asked about canvas resolution for assets design and I decided to make a quick tutorial out of it. So, if you ever thought about painting sprites and backgrounds for your visual novel game but didn’t want to mess up and create wrong sized assets, I’ll try to make a post where you can gather information about it. ^ ^ I’ll be honest, I know very few about it, so every comment correcting or completing my method is welcome. I’ll just show what works for me.

What I use:

Game screen resolution: 1280×720 pixel.

Painting software: Paint Tool SAI.

PPI Resolution.

First of all, let’s cover this issue. Generally, you would want your assets to be as big as possible to shrink and manage them as you wish. To achieve this, be sure to insert a high value of PPI resolution as well, when starting a new canvas. PPI means “pixel per inch” and it’s the way you measure the density of details in your picture.

Now, what’s the best value to write there? I usually go for 350 pixel. Honestly, I don’t like to work with extremely huge files because I don’t have time to paint them and they considerably slow my PC too. There may be people who work with 600 pixel, I prefer go for less. 

What’s the difference in choosing one resolution rather than another, you may ask. Well, usually, your art program gives you a default dpi resolution of 72. That’s the “web resolution”. Usually pictures that are that low in PPI are also small in size and won’t zoom in nicely. 

I converted my 350 PPI illustration into a 72 PPI one. The file got smaller in size and lost sharpness when I zoom in on the details.

When you turn a picture from a high resolution to a low one (for example, from 350 to 72) you get a smaller file in size and in weight. You can use this loss to get lighter files to share on the web, to say one.

Canvas Size.

Resolution alone is not what makes your art smooth to view. You may need to have larger canvas in size as well : ) Note that the larger your canvas, the more time it will take to be painted. Organize your work and method, depending on the amount of time you have to spend on it. 

These are the canvas sizes I use for each type of asset:

Background/CG art: 5200×2900

Character sprite (adult): 5700 in height. I use a 4 pixel brush for the lineart, and a 6 pixel one for the silhouette/outer lineart. 

Game screen resolution.

Since I’m creating a classical visual novel game which requires the player only to read and choose to advance in the story, I decided to save a lot of time by choosing a game screen resolution that isn’t that big and doesn’t necessarily work in full screen as fine (1280×720). This said, I think one should decide their game resolution and assets size depending on their own personal taste for the final result. A small game screen can provide entertainment at the same level of a larger one.

Sprite composition

Now, I’d like to cover how I compose sprite art into different poses : ) This is a simple change of pose I made for Doc. Isahai without drawing him again from scratch. I just changed the position and gesture of his right arm.

In order to do this, I simply made sure to draw arms and body (even clothes upon them) separately.

Therefore, my characters’ arms will be displayed only when I check the folder for “arm 1” or the one for “arm 2”. Otherwise, the sprite will lack the right arm part. 

For Doc. Isahai sprite I currently have 4 parts to assemble, and I drew them on separate layers.

Thank you for reading this basic tutorial, hope it can help : >