Developing a Realistic/Semi-Realistic VN Sprite

by Meagan

In my previous post, I described the research process I go through when designing a character.  Continuing in that vein, I wanted to share the steps I take to make the character sprite itself.  Consider this a digital painting tutorial of sorts.

1.  Sketchbook 

Another ugly phone photo.

After some experimenting, I decide on a pose that represents the character's personality in some way and draw a very basic contour sketch.  I like to do this step in my sketchbook as opposed to Photoshop, because my hand has more freedom of movement on paper than when I'm working with my (really small) tablet.  It's just a personal preference.

Next, I either scan or take a photo of the sketch so I have a digital copy of it.  Quality doesn't really matter, so long as I get the whole sketch and there aren't any obvious distortions.


2. Digitize 

My next step is to paste the digital copy into Photoshop and trace the outline as a new layer over a toned background.  The background can be pretty much any color, but I usually go with a medium to medium-dark neutral.  It's just for color reference.  

It's generally a good idea to make this "master" image significantly larger than what you'll need for the actual game sprite.  It's just nice to have big art assets around in case you need larger images for promotional materials later.  For example, Mephisto is around 2000 px high here, but her resized game sprite is only 800 px high.

At this stage, I make any necessary adjustments to the outline, correcting proportions, etc.  I also add in the smaller details like fingers, hair, and facial features.  (The facial features go on their own layer, so they can be easily swapped out for different expressions!)  On my Faust: Scene II sprites, I experimented with exaggerating the faces and hands, so that their expressions would be more readable if the game is played on a smaller screen.

It's probably worth mentioning here that I like to fill in the main shapes with a solid "base" color.  With sprites, this often helps a lot with transparency issues that I'll talk about later in this post.  I usually paint the base color for the skin something drastically different from what the final local color will be.  This helps give the skin more depth, so to speak.  Skin is made up of multiple translucent layers of tissue, and I try to emulate this in the way I paint it.  Having a red or purple-ish hue as your first layer can mimic the look of blood and muscle under the skin.



3. Adding clothes

I hadn't drawn her codpiece yet when I took this screenshot, I guess.

This step is pretty straightforward.  I sketch clothes on a new layer or a few different new layers. This allows for easy experimentation with different outfits.  It's also important if you have a costume change at some point in the story.


4. Painting

When painting, I tend to work back to front, doing the "underneath" stuff first.  I guess this is a carryover from my oil painting training and probably doesn't matter as much with digital.  I also erase or blend in parts of the outline as I go wherever it makes sense.  Again, remember to paint the face on its own layer so it can be easily swapped out.


5. Handling expressions

That creepy effect when you turn off visibility on certain layers...

To make things easier for myself, I like to paint parts of face that aren’t likely to change much on their own layer so that they stay consistent.  Here you can see how I did that with the nose, chin, and jawline.  (Yes, in real life these parts will in fact move slightly as a person's expression changes.  Keeping them the same in a game sprite is a time-saver.)  

Another trick I use with expressions is creating an extra copy of my first one and pasting it in place to use as a reference.  Drawing on a new layer directly on top of your reference helps you anchor your eyes, mouths, etc. so your facial features aren’t floating around.  For example, the corners of the eyes should always be located in roughly the same spot.  Otherwise, your eyes are going to look like they're moving up and down the face in a way that doesn't really make sense.



5. Checking transparency

Before patching.

After patching.

Sprites need to be at least mostly solid so the backgrounds don't show through conspicuously when you put them in the game.  As such, one of my final steps is to turn visibility off on the background and look for spots where the white/gray checkerboard pattern is really obvious.  I then patch these areas by creating a new layer behind everything and filling the transparent spots with the same color as the toned background I used.  I don't bother filling in the edges of hair when I do this, since thin clusters of hair appear translucent in real life.

After that, it's mostly just a matter of cropping and resizing to game dimensions.  Done!  

Mephistopheles’ Sprite: Reinterpreting a Familiar Character

by Meagan

Mephistopheles and four of her expressions

The Faust legend, and thus the character of Mephistopheles, has been around for centuries – Goethe wasn’t even the first to write about it.  So my challenge in designing Meph’s sprite was this:  How do you take a character that has been reimagined countless times over hundreds of years and really make it your own?  While I’m not sure I can answer that question definitively, I’d like to share a little of the thought process I went through in creating Mephistopheles for Faust: Scene II. 

Preliminary Research:

Source

My first step was to pull up my preferred search engine and do some visual research.  If you want to make something a little different from what’s already out there, you have to know what’s already out there, right?  Look at what others have done.  Think about what works and what doesn’t, what you might want to pay homage to, what you want to deviate from.  (It was at this step that I found out it’s actually not uncommon for Meph to be played by a woman in modern performances of Faust.  Pretty cool.)

Next, I consulted my source material.  The first thing Meph does when she shows up in this scene is describe what she’s wearing, so clearly I had some imperatives when designing her outfit.  I needed to include at least gold braid, a sword, and some kind of hat with a feather in it, and red should be the predominating color.  From here, I had some decisions to make about the costume’s style.

Period Costume, But Not Really:

Source

While vaguely medieval in setting, the Faust legend draws on sources from several different time periods.  I wanted to reflect this in Meph’s outfit, so I researched historical clothing from the 14^th, 15^th, and 16^th centuries.  Most of the designs I found, however, I felt were way too impractical for her character - especially the women’s clothing!  I settled instead on a RenFaire- ish look for its theatricality and visual appeal, taking some cues from rapier fencing costumes.  This would allow her to move around a lot, theoretically (I imagine her as a very animated person), and help the sword make more sense.

Designing a Demon:

Source

I wanted Meph to be a recognizably feminine and maybe even somewhat pretty humanoid, but with something a little “off” about her.  So keeping with the medieval theme, I looked to some medieval and Renaissance artwork depicting demons for ideas.  Temptation of St. Anthony paintings were really useful for this.  It surprised me how often demons are shown as these reptilian or even frog-like creatures.  Playing off of that, I gave Meph’s skin a greenish cast with sharp highlights for a subtle slimy look.  I’m also really in love with the classic goat-like concept of a demon – horns, cloven hooves, and such.  Given that Meph’s wearing a large hat and you only see her from mid-thigh up, though, none of the typical features would be visible.  My solution was to give her goat-like ears.  I sketched out a couple options, since goat ears are actually pretty varied. 

An awful photo of my sketchbook taken with my phone.

I got really attached to the big floppy ones at first.  They were really different from the usual depictions of goat-like demons.  However, I was worried they’d take away from her face too much.  The faces on both sprites needed to be highly visible to show the changing expressions clearly.  For this reason, I went with the smaller, pointy ears.

The Final Result:

The finished sprite in-game.

In the end, my hope is that all this piecing together of ideas and elements from different sources will result in something fresh.  Meph was actually my first attempt at a VN character sprite, so definitely a learning experience.  I'll be writing more about my sprite art soon.  I've got a couple of digital painting posts in the works that will break down my steps for actually drawing the sprite.

From character design to sprite: Personal projects

by Aviala

Last time I wrote about my character design and sprite process when working with clients but when I do work for my own projects, I'm my own boss and the way I work is different.

With my own character, I usually start with a broad idea about the character's personality. It would be better to have all the details down but I'm usually really excited about drawing the characters so I start drawing before I finish writing the backstory, etc.

Based on the basic personality and the fashion style I've established for the world the characters live in, I start sketching, usually with a pencil.

For Aifao, the character above, I knew that he was a 25-year guy who's a soldier. These are some of the first sketches for him. In Skyfish, it's very common for guys to have long hair, so I decided it was suitable. You can't see it from the sketch, but since he's related to Captain, who's a brunette, he also has dark brown hair.

After the initial sketches, I start working on the sprite. At this point I usually don't have a clear idea of what the character will wear. I start by drawing the character nude, and sketch clothes on top on different layers, like a paper doll. I often look at references for the poses. I usually leave the sprites rougher under the clothes and only spend time on refining the visible parts.

I try out different base colours for the clothes by drawing them on different layers and fiddling with the hue, saturation, etc. The design above might not be the final one, but I had a feeling that she needed a long skirt. She's also not very rich, so the colours aren't very bright for the most part, and her outfit is clean yet simple.

The "professional" way to do everything would be to do separate character and outfit designs properly, and draw separate sprites based on them. But because I'm in charge of my own project and this method seems to work for me, this is the way I work.

Charon here is from a wealthy family so his clothes have brighter shades like blue, and he has some embroidered details on his hat. 

And last but not least: When I need to design new outfits, I hide most of the layers and just doodle on top with different colours. I don't know why, but this method has produced some of my favourite outfit designs. The key thing is probably that they're really fast to draw on top of the naked sprites so if something doesn't work it doesn't take long to come up with something new.

From character design to sprite: With clients

by Aviala

This is the first part of my character design and sprite process series.

When I work with clients, there are a few things I need to keep in mind when I start doing the designs. I make certain assumptions about the preferred style and "feel" of the characters based on the genre, and of course, the client's requests. For example, for an otome game I'd probably choose a cuter, more manga-inspired style, and for a grim story about WW2 I'd choose a painted, semirealistic style with darker colours - unless the client asked for something else.

Based on the client's description about the character, I do a very rough sketch. At that point it doesn't have colours or anything. Sometimes I do a couple of different outfit sketches.

Then, after I make changes to the sketch based on the client's request, I block in base colours. At this stage I ask the client to tell me if any final changes need to be made because it's hard to change things when the sprite is done. I usually sketch with light colours on a warm grey background because pure white is very overpowering and makes it hard to see lighter shades like the light yellow I'm using below.

After the client is okay with the colours, I either start doing the lineart or painting. Here I'm using a sprite from Our Healing Hearts as an example. The client preferred a painted anime-style look, so I skipped the lineart stage. I'm painting the clothes, hair, eyes, mouth, etc all on different layers so I can change things (like colours or details) easily if I have to.

After doing a rough painting I usually show the design to the client once again. At this stage I don't usually make any changes to the design unless I really have to, Usually this is the point where I decide the character design is done, but with Our Healing Hearts the pose happened to be suitable for the sprite, so instead of starting from the sketching stage again, I just started turning the design into a sprite.

Above is the almost finished sprite. It needs some finishing touches but it's very close to being ready for the game, Since the pose of the arms in the design was a bit unnatural I drew the hands again based on the client's request. I also drew a wheelchair for the character. I chose to draw the whole wheelchair instead of just drawing the visible parts so that I could get the structure and perspective right.

Stay tuned for next time where I'll write about designing characters for my own games.

Sunrise Postmortem: Part I (Sprite Art)

by S.

Sunrise Sprite Breakdown

The above image shows the basic stages of sprite construction in Photoshop. Sofia was the final sprite I painted, and by that time I nearly tossed the drawing stage altogether and went straight to the underpainting stage.

The approach I took with the Sunrise sprites is actually very similar to the one I use in order to paint the Tell a Demon art: a drawing, followed by an underpainting, followed by a final overpainting (example on my Tumblr, here). This basic process, by the way, is pretty similar to that of the Renaissance masters.

CGs? What CGs?

Prior to Sunrise, I was a slower digital painter, probably due to the fact that I did not have clearly defined steps before. Or, not clearly defined like I had for my traditional art. Although I spent more time on the sprites than any other part of the process, I was surprised at how quickly the Sunrise sprites went. Each one took about three evenings, including the expressions, despite that some expressions required me to re-paint significant portions of the characters' faces.

Although I painted the expressions on transparent layers, I painted the poses on an opaque layer. Later on, I cut out the sprites using masks made in Illustrator. I find this to be a faster and more forgiving method since it allows me to easily change the contours of the character and I don't have to worry about accidentally painting on the wrong layer.

Overall, I felt like my work and working method improved over NaNoRenO. Hazel-Bun also helped here by drawing concept sketches and character designs to work from and offering me feedback on the look of each sprite as I painted them.

One problem I stumbled across was the painted style. I used two Photoshop brushes for the character painting, and as a result the brush strokes look very digital. I prefer to combine digital and traditional textures for this reason, but in future I would explore using different digital tools so that the digital look wasn't so overt. I would also prefer to spend some more time on the characters; Sofia, as the last sprite I painted, began to look a little more stylized than the others.