Getting Emotional: Making Your Own Emotionsets
Avery
by
Avery
on
March 11, 2021
March 9, 2021

Getting Emotional: Making Your Own Emotionsets

Getting Emotional: Making Your Own Emotionsets
by

Avery

on

March 11, 2021

It's always weird when our facesets don't match the emotion your dialogue is presenting... so let's learn to make emotionsets on our own!

When we event our dialogs, sometimes you run into situations like this:

and the equally dissonant response:

While it is probably not necessary for every character and situation, some just require some more… depth. Depth we can achieve by having several emotions for our faces.

So, how do we make these?

A side note: the same tutorial would be much easier for Ace or MV, due to the different style. But since MZ is the most recent maker, it is the one we are going to work with.

The needed tools are simple: Gimp (free and convenient) and a mouse.

Photoshop has more features, but I don’t expect everyone here to have it, so we focus on what all of you can get without free programs. Also, you can use a graphic tablet if you have one.

I usually work with the busts, as you can downscale them for the faces without quality loss (unlike the other way which does not work so well).

Step 1: The separation

If you thought the actual emotions were going to be the problem, you are wrong. At least for me, the most difficult part is that the eyebrows and eyes are kinda semi-transparent above the hair.

Tip: If you have transparency issues with the files if you open them in Gimp, you can use Paint.NET (which is free as well) to open them and save them from there, to get rid of that issue.

So, to begin, we open our file, set the mode to RGB (usually it is “indexed”) and scale the image by 1000%. This makes it easier to get a clean result when drawing your own parts.

Duplicate the layer and erase everything but the front hair using a combination of the eraser and the path selection tool. I prefer the version where you use a layer mask instead of “normal erasing”, but that is up to you.

My first result looks like this:

Now we are going to restore the hair how it should look like by using the brush tool, the smudge tool and some patience:

This is your top layer, and you will need it twice.

In the next step, we are going to “clean” the face. To do so, duplicate your base layer again and use the brush and smudge tool to remove the eyes and the mouth. The nose can stay “as it is”, as most expressions won’t affect it:

Brush...

...and smudge

resulting in something that, when combined with the prepared hair, looks like this:

Here, it might be a good idea to get a better outline on the edited hair. Unless you have a graphic tablet it is very difficult to get get clean lines drawn by mouse. So, we use the path tool and add a new empty layer.

Use the handles to recreate the outline you need. Ctrl+clickingon each of the points lets you move each handle individually.

When you are done, the line will look something like this:

With “stroke path”, used with a color and size that matches the rest of the bust, you get the clean line you were looking for:

And now we need to separate and “repair” eyes, mouth and eyebrows on a separate layer.

So, again, copy the default layer and isolate the parts you are editing:

Using a layer mask, roughly separate the needed parts. For the mouth you are already done, for the eyes and eyebrows you need to continue.

Make sure that especially the parts that might be hidden below the hair are cleanly separated. Now it is time to again use the brush and smudge tools to get rid of every hair that covers these parts.

Now to assemble our separated files:

On top you have a copy of the front hair, with an opacity somewhere around 35%.

Below the face, then a copy of the hair top and below the empty face.

Now the only layer you need to edit is the one with the face parts.

2. The emotions

Creating emotions can take quite some time, so you should always make sure you know what you need. You can also use parts of other faces to mix and match for a wider range of emotions.

For our NPC, we have a default happy face, so I’d say we need:

Very happy, Sad, Crying, Angry, Shocked, Wink and Ashamed.

Tip: Use one layer for each emotion face so you keep all your possible faces and have them separated in case you need to mix and match them later.

Very happy:

Her eyes and eyebrows already work shapewise for a happy face, to make her more happy I’d go with a joyful opened mouth and move the eyebrows a bit up.

Luckily, People 2_4 has a good mouth for this that also works perspective wise. We can just copy and paste it and are done with that emotion for this character.

Sad and Crying:

For a sad face, copy the default one and redraw the eyebrows. You might also edit the eyes, so the corners point more downwards than upwards. Due to the different eyebrow position, you might also erase the wrinkles of the eyelids.

To “sadden” the mouth, pull it’s corners downwards (brush and smudge, as usual):

To make the crying version, add an empty layer above the “sad one” and draw the outlines of the tears with a white brush:

Angry:

To make your character angry, redraw the eyebrows somewhat like this:

Add wrinkles for the eyelids and have the eyes squint a bit. The mouth can be open, the corners point downwards.

Shock:

Move the eyebrows upwards and make the iris smaller to exaggerate the impression of wide open eyes. The mouth could be opened in shock as well.

Wink:

To have your character wink, simply erase one of the eyes and draw a closed lid.

Ashamed:

Combine the shocked mouth and eyes with the sad eyebrows and add some very light blush and you are done.

3. Assemble:

Save your file as .xcf in case you need to come back and change anything. Then duplicate the layers you need for every face as often as you need them and merge them to get the “full” busts for each emotion.

Then, set the mode to indexed again (you might need to play with the setting to get a goodlooking result).

Then, shrink the image to 10%.

Your full stack is now converted to the right size and style, but due to the up- and downscale you might have blurred out some of the default parts.

Now, open your unedited face again in a seperate file, copy over each layer and erase everything that has not changed.

Before:

After:

(Yes, I know, not much difference, you might also leave it as it is, if you don’t mind the slight blurryness).

As result, we have these neat busts:

To turn them into a faceset, we need to put them (again) into one file. Shrink them down by about 72% and cut out the 144x144 area that seems to be the best choice.

Make all layers “canvas sized” then and edit the canvas to “400%x200%” and then arrange the faces in that file:

And there we go:

Author’s note: To be sure this is doable with only Gimp and a mouse, I did so. And if I can do that, you can do so, too! I’d love to see you adding some more emotions to your game!

Recommended Posts

footer-map