Under Development

This tutorial page is currently under development. Content will be updated regularly.

Live2D Tutorial

TOC

Making Live2D Model Tutorial

Intro

There are some software to make 2D Vtuber models, but the most famous one is Live2D cubism!

In this video, I'll introduce how to make 2D VTuber model, starting from how to draw VTuber art to how to rig a VTuber model!

However, some Live2D beginners think it's difficult to understand how to make a Vtuber just watching a video, so I made a free downloadable model you can edit while watching this tutorial!

Let's start to learn how to Live2D model.

How to separate Digital art for Live2D model

Make sure you drew and separated Vtuber art with digital software before starting to rig a Vtuber model.

In this tutorial, I draw digital art by Clip Studio Paint( CSP ).

You need to prepare the character art before rigging a Live2D model. I only explain some simple advices about designing Live2D art and setting up CSP in this video because I intend to mainly exprain how to use Live2D cubism.

Canvas size

The digital art canvas size is important to draw VTuber art.

Make sure you set the canvas size around the wedth is 3000px and hight is 5000px and dpi is 300.

VTuber art is only shown up the upper body or around the face part in Live streaming, so you make sure you prepare high-resolution art that doesn't deteriorate image quality when zoomed in.

Symmetrical Art

You make the VTuber posing symmetrical because you can save time to rig a Vtuber by some symmetrical editing tools on Live2D editor

Illustration positions

Make sure you put the art in the center part in the canvas. It makes easy to rig the art in Live2D cubism.

Separating a VTuber art for Live2D rigging

In this model, you need to separate the Vtuber's head parts in detail more than the other body parts, because we mainly show the avatar's face part on the Live streaming.

Things to keep in mind when dividing into parts

You separate the Vtuber art to make facial expressions, hair jiggles and body motions. When the Live2D model moves, hidden parts appear. Therefore, you need to draw these hidden parts when you separate the original art to avoid the void parts appearing.

Groups you separate the original art for Live2D rigging

Hair separating

You split the hair into bangs, side hair, and back hair. If the hairstyle has a tied part like pigtails, you should separate the part from the other hair parts to move the tied parts. Also, if the back hair is hidden by the shoulders and body, you need to draw the hidden parts. If there were no additions, the part would appear disconnected when it moves

Eyes and eyebrows separating

The eyes are separated into Upper eyelash, side eyelash, under eyelash, white eye, iris, eyebrow, and highlight. Also, you separate the eye group into the right eye group and the left eye group. I recommend you use the symmetrical guide tool to draw symmetrical eye shapes, except highlights, because you can easily copy and paste the one eye's motions to the other eye on Live2D cubism.

Mouth separating

The mouth parts are separated into upper lip, under lip, upper mouth mask, under mouth mask, upper teeth, under teeth, a tongue, and inner mouth. For hiding the inside of the mouth, you need to use the two masks. The area overlapping the lip line is divided into upper and lower masks along the lip lines. The parts outside the lip lines are separated by straight lines. This mask's color isn't important because the masks set 0% opacities and use them as invert mask parts. I'll explain about the invert mask function when I explain the mouth rigging.

Nose separating

You prepare one nose line as a nose part.

Head separating

You separate the head into face, face line, a right ear, a left ear, and neck.

When the bangs sway, the hidden face parts appear, so you need to draw the parts additonally.

Also, you need to draw the hidden neck by face parts. When the face moves, the hidden neck appears.

Body separating

The upper body separating ways change depending on the outfit's shape. if you want to make a simple model, you don't need to separate the upper body parts except accessories.

Arms separating

The arms are separated into upper arms, forearms, and hands. Make sure you separate the arm group to left and right groups.

Legs and waist separating

The under body is separated into the waist, the upper right leg, the upper left leg, the under right leg, the under left leg, the right shoe, and the left shoe.

How to import VTuber art

Only psd file can be imported to Live2D Cubism.

You have to convert the separated Vtuber file from .clip file to .psd file if you use Clip Studio Paint.

The importing method is easy. You just drag the .psd file to the Live2D canvas.

Resolution settings

If the size of the psd being loaded is too large, a [Confirm] dialog box will appear.

Make sure you set previewing the image at half the original size, as working with the image displayed at full size may result in slow operation.

Even after the image has been loaded, it can be changed from the [Show] menu -> [Show Quality (Show Model Guide Image)].

Automatic Mesh generator

When you import the file to the Live2D editor, You have to set up Artmesh on all parts.

You can easily add fine Artmesh setting on each imported part. First, press [Ctrl + A] to select all ArtMeshes. Select the Auto ArtMesh generating icon. The [Automatic Mesh generator] dialog box will appear.

Select [standard] on the preset dialog and click on the text box portion (anywhere) in [Setting] and press Enter. A mesh has been created with the set values.

What to do when the texture display disappears after automatic mesh generation

The automatic mesh generator may cause the texture display to disappear when there are meshes that are not closed.

In this case, the texture display can be restored by changing the value and automatically generating the mesh again, or by canceling the automatic generation with Undo.

Face parts Rigging

If you can't understand how to rig the face parts, I recommend you to use some references: 3D tool and my Live2D assets ( on Live2D tree)

How to make the keyframe

If you click the 3 points keyframe create button, you can easily make three keyframes; representing left turn, Center turn, and right turn, on each parameter.

Why do we need to create warp deformers

For making face angle motions, I don't directly add face xy angle parameters. I newly made a warp deformer for adding face angle motions. If you make the warp deformer, you can separate each artmesh motion and whole face angle motion, so you can overlay overlay multipule parameters without complicated setting.

For example, if you added all parameters; angle X, angle Y and eye open, you needed to edit all pattern shapes each parameter has three shapes and three parameters assigned to the eye part so the total shape are (3 ways x 3 ways x 3 ways = 27 ways). It's so difficult to rig all parameter's keyframes, but if you use the deformer, you can separate the shape settings and automatically generate eye open and close shapes in each face angle by warp deformers.

Therefore, you can save time creating many keyframes' shapes if you use warp deformers.

Setting up Warp Deformer Conversion divisions

By setting the object's parent to a warp deformer, the object inside can be deformed.

Size and opacity can also be adjusted.

After creating a Warp Deformer, you can set up the Conversion divisions.

I recommend making the number 5x5 or 9x9 because the large number of conversion divisions makes the computer struggle to calculate the division points' motions, but the trend is different between Japanese creators and overseas.

Japanese trend and Overseas trend

Among Japanese creatars, there is a tendency low conversion divisions is better because

we can save data amount, and clients can easily use the model on a tracking app if their pc specs aren't high.

The more conversion divisions you set up, the more detailed deformation you can do, but if you are a beginner, I'll recommend you to set it up to a low number of conversion divisions, 5x5, 9x9, because the warp deformer control is easier than the large number of conversion divisions.

Add X direction movement Face left and right

Select the warp deformer and add three keyframes to Angle X by clicking the three keyframes generating button.

Move the whole warp deformer to the left side of the screen, and adjust the shapes to make the face move side direction.

I recommend you to refer 3d model or the facial angle's 2D references if you can't come up with a good face line. Following the perspective theory, the back side of the face part gets thinner and the front side of the face gets wider. this theory applies to all facial parts

When you make the side face, you should keep in mind the perspective insight to create beautiful face shape.

Once the deformation is applied so that the back side is slightly narrower and the front side is wider, the rest can be fine-tuned to the desired shape.

Reflect horizontally

After completing rigging the one side face shape, you click the three dots icon and click the [Reflect motions]. The box appears, and you select horizontal reflect and enter.

you can automatically make a reflected face shape. Now, you are completely done.

Add Y direction movement Face look up and down

We basically repeat the whole process.

We newly creates Face up and down parameter. And you add 3points keyframes: representing down, Center turn, and up, on each parameter.

After setting up keyframes, we make head motions. You move and deform the face parts' meshes by the face warp deformer.

Tips making face up and down (Deformer brush and drag + shift)

Initially, you move the face deformer downward without deforming any parts. Then, you deform the center part of the face deformer by deformer brushes. The Brush tool is really useful for transforming the warp deformers and Artmeshes at once.

Select a brush using the buttons in the Tool Details palette.

The two types of brushes each have different target objects that can be adjusted.

IF you use the Deformer brush, you can move multiple intersections in a warp deformer, so you can save time transforming the deformer. You can adjust the size of the deformation influence range.

It is recommended to use [B] + drag to change the brush size.

Also, it's really important to drag the brush perpendicularly. Shift + drag the brush can make the brush only move vertically or horizontally. You can easily make clean face motions.

After moving the whole face deformer, you should reform the center part of the deformer downward more. Generally, when you make a look-up keyframe motion, you also deform the center part of the face deformer upward more by using the deformer brush tool. (You can clearly transform the center part of the deformer upward and downward by Shift + drag )

Automatic Generation of Four Corner Forms

After completing turning right and left and up and down keyframs, you have to make four corner keyframes.

When you click the chain icon on the left side of the Angle X and Angle Y parameters. You can generate a square-shaped parameter by linking with Angle X and Y. On the parameter, you can see the four corner keyframes. The four corners represent diagonal face keyframes, but the diagonal face shapes weren't created yet. You can automatically create the diagonal face shapes by a Live2D function.

Click on the [Modeling] menu -> [Parameter] -> [Automatic Generation of Four Corner Forms]. The [Automatic Generation of Four Corner Forms] dialog box will open.

For [Parameter 1] and [Parameter 2], select the parameters to which you want to apply the blend. In this case, use "Angle X" and "Angle Y" to create a face orientation XY.

For [Parameter Value to Reference], specify the form to be used as a basis for blending. The two settings that can be specified are [Default value] and [Center of Parameters].

You click Enter on the dialog. You can confirm the generated face forms on the diagonal keyframes.

Adjusting the diagonal keyframes

The diagonal forms were created by the Auto generation function, but the function isn't perfect. If you weren't satisfied with the diagonal face forms, you could Adjust the face forms.

The modification methods are different depending on each person. I explain a method I recommend.

Making Eye and mouth motion

Eyes open and close

Directly add keyframes to eye parts Artmeshes because you need to make detailed motions of the Artmesh's vertices. If you made eye's open and close motions on a warp deformer, you can't add the detailed motions.

The eye motion related parameters are the eye open and the smile parameter. At first you Select one eye part and add keyframes on the Eye open parameter by the two keyframes generator.

The value +1 is opening eye status and the value 0 is closing eye status. After completing making face parts, select the same eye parts and add two keyframes to the smile parameter by two keyframe generator. Create the eye smile shape on the eye open value 0 and the eye smile value +1.

Multiple key settings

You can easily set up the defromations on multiple keyframes by Multiple key setings.

After, click the parts which you want to edit on part palette. You click menu bar on the keyframe palette and select [multi keysettings].

The multi-keyframe setting tab displays the keyframes which you assigned to the parts. You select enter after selecting the keyframe which you want to keep the defromations and statuses like multiply, screen and opasity.

As a result, You can keep the statuses of the parts on the selected keyframes.

Deform Path Edit vs Temporary path

Deform path tool is useful to make facial expressions. The tool can deform multipule vertises in an ArtMesh at once, and express soft deformations such as eyelashes, eyebrows and mouth, you can use deform paths to create deformations easily and cleanly.

To use defrom path functions, you select the eyelashes ArtMesh and click [Deform Paths] button.

On the [Tool detail] pallete, you select [Add control point] button and Clicking on the canvas in this state will place a control point (green dot) along the eyelashes line.

After setting the control points, you turn off the deform path edit and select the nnaj curcol to move the eyelashes. the default eye shape is [open eye] so you deform the eyelashes to [close eye] by move the deform path control point.

Deformed brush tool (drag + B)

You have deformed large parts of eyelashes by using Deform path tool. You need to abjust the detail shape of the close eyelashes. Deformed brush tool is suit for deform many vatises smoothly. You can edit each vertex by the normal curcol but it takes long time to move each vertex so I reaommend you to use deformed path tool.

You can abjust Deformed brush tool range by [drag+B]. You abjust the effective lamge and deform the detail part.

You also deform the other eye parts like the eyelashes editing way.

After completing making eye close shape, you move the keyfram to +1 on [eye smile] and deform the eye to smile eye shape like the method.

The eye reproducing and reflecting

It's bothering to create the other eye's open and close motion so I reproduce the eye parts already having motions to save time creating the other eye motions.

At first, you create a rotation deformer without selecting any parts. Select all eye parts you already assigned to the eye motion parameters and duplicate them. These parts should be gathered into a folder on the parts pallet to easily detect the duplicated parts.

Next, move the duplicated parts into the rotation deformer. Select only the rotation deformer and click [edit]> [Reflect]. Now, you have completed duplicating and reflecting the eye parts, so you return the reflected eye parts to the original place, in the face warp deformer.

Deform Eyebrows

You create the warp deformer on each eyebrow. You assign [Eyebrow Y] and [Eyebrow Angle] to the warp deformer. Regarding the eye brows, I don't add parameters to the ArtMesh directly bcz you don't deform the eyebrows too complecatedly.

Preparing to move the Mouth motions (Hiding Inner mouth parts by inverted mask)

Before starting to add keyframes, I prepare the "Inverted mask" setting. The inverted mask is a function that inverts the clipping mask. the normal mask function hides a part of the masked Artmeshes outside the masking Artmesh, while the inverted mask function can hide the part of the masked Artmeshes inside the masking Artmesh.

By using the inverted mask, hide the inner mouth parts when the mouth closes. You prepare the upper mouth mask and the under mask parts to hide the inner mouth parts.

At first, you select the upper mouth mask used as a mask part and copy the ID. Then you select inner mouth parts used as clipped parts and past the mask part ID to Clipping box in the [inspector] palette. You can set multiple mask parts on a clipped part so that you also paste the under-mouth mask as used a mask part to the inner mouth parts like the upper mouth mask.

Now, you can hide the inner mouth parts inside the mask parts.

Preparing to move the Mouth motions (connecting the mouth outlines and the mask parts)

Now you have completed setting the mask, but when you add mouth motions to the lip parts, the upper and under mouths don't move following the lip motions, and some hole parts appear between the lips and the masks. The mask parts can't hide all the inner mouth parts.

To avoid the problem, you have to connect the lip and mask by using the glue functions. Glue is a function that binds (adheres) the vertices of two ArtMeshes together.

You can deform the mask parts following the lip parts without adding keyframes.

You select the upper lip artmesh and the upper mouth artmesh on the parts palette at once.

The mouth opens and closes

You add the mouth motion's keyframe to [Mouth Form] and [Mouth Open] parameters. At first

You add two keyframes to the [Mouth Open] by [adding two keyframes] button and deform the lip's vertices. To deform the lip's Artmesh, I recommend you use the [Deformer Path Edit] tool.

You select the tool in the Toolbar and set control points on the ArtMesh. You can move vertices collectively simultaneously.

You deform the mouth's Artmesh to make the mouth's open shape and close shape by moving the control points. You assign the mouth open shape to +1 value of the [mouth open] and you assign the mouth close shape to 0 value of the [mouth open].

After setting the [mouth open] keyframes, you also set the [Mouth Form] keyframes. At first, you

Hair motions (Angle X and Y parameters)

Hair warp deformers are assigned to each hair strand. On the hair warp deformer, angle motions and swaying motions are added to the hair warp deformer.

Initially, I select all hair warp deformers and the Angle X and Y parameters are assigned to keyframes. Then, I transform the shape of the hair warp deformers. It appears that the hair is turned to the left and right.

Hair physics parameters (Swaying parameters / blend shape)

Finally, I add hair swaying motions to the hair warp deformers. I created hair swaying parameters; [Hair physics X1] [Hair physics X2] [Hair physics Y1] [Hair physics Y2].

I can't assign new parameters to the hair warp deformers because I have already assigned two angle X and Y parameters. Generally, assigning over three parameters to one object is not recommended. I'll make the swaying parameters as blend shape parameters because you can assign over three blend shape parameters to one object.

Hair swaying motion (X + drag)

Next, I add the hair swaying motions' keyframe to the blend shape parameters. [Hair physics X] group is assigned the swaying motions taken moment effects following the face Angle X motion. [Hair physics X1] parameter is assigned to make the sway motions using the root of the hair as a fulcrum. [Hair physics X2] parameter is assigned to make the detailed swaying motions on the hair ends.

Like the [Hair physics X] group, the [Hair physics Y] group is assigned the swaying motions taken moment effect following the face Angle Y motions. [Hair physics Y1] parameter is assigned to make the swaying motions using the root of the hair as a fulcrum. [Hair physicsY2] parameter is assigned to make the detailed swaying motions on the hair ends.

Temporary path deformation to make hair physics

This is a method to rigging hair jiggle motions by using Temporary Path deformation.

Temporary path deformation can smoothly defrome warp defromers.

You can use the deformation with an object with vertices selected, click [Modeling] menu -> [Temporary deform tool] -> [Temporary path deformation]. Alternatively, click on the [Form Animation] menu -> [Temporary deform tool] -> [Temporary path deformation].

Setting up hair Physics settings

You can make similar environments with a Tracking app by External application integration

Torso rigging (Angle X)

To rigging body motions, you make an warp deformers and move all of upper body parts.

The defference between head rigging and body rigging is you don't assign some detail motions to body ArtMeshes like eyes' open and close motions, and mouth open motions.

Also, the facial expressions of the Vtuber model are most important and atract veiwers atentions.

Therefare, you mainly assign body angle's deformations to the body warp deformers.

Warp deformers are suit for making rough motions and deform ArtMeshes included in the warp deformer and you can assign these body warp deformers to murtiple parameters.

Next, you assign body Angle X parameter and body Angle Y perameter to the body warp deformer including all the upper body parts.

you should select deformer brash tool or deformer path tool the tool palette for deforming many deforming points at once.

At first, select keyform on the body angle motions. You select the deformer brash tool and select thn center parts of the body deformer and shift drag the pionts to the derections you want to move

Arms rigging (Angle motion)

Regarding arm motions, I'll add 3 rotation deformers on each arm joint to make arm jiggle expressions. The parent deformer is located on the armpit. The second warp deformer is located on the forearm joint. The last rotation deformer is located hand joint.

Also, you add a rotation deformer to make angle motions on the armpit, and this rotation deformer contains all rotation deformers to make hand sway motions.

At first, you make arm angle motions. You select the rotation deformer located on the armpit and assign three keyframes to the [Angle X] parameter and [Angle Y] parameter. On each angle keyframe, you move the rotation deformer in the same direction as the model body is facing.

Arms rigging (Physics settings)

You make arm-sway motions. At first, you select the deformer on the armpit. and you assign three keyframes to the [arm physics] parameter. Next, you select the deformer on the forearm root and assign three keyframes on the [Forearm physics]. The last, you select the deformer on the hand root, and assign three keyframes to the [Hand physics].

You select these keyframes and rotate the rotation deformers, and you open the physics tab to set up the physics values.

Legs rigging (Angle motion)

Legs motion is not too important since you don't show the whole Vtuber body while streaming so you don't need to assign too detailed motions to the leg parts, but the Y angle motion can easily exaggerate the live2d model's whole body movement, so you should assign up and down keyframes to the [body Y] parameter.

you make a warp deformer, including all leg parts, and you just extend and shorten the deformer to express body up-down motions. You also move the upper body deformers in the directions to up and down.

Set up a texture Atlas

After completing all rigging, you need to make a texture atlas to make a moc3 file to export it as a Vuber model.

You selsct the texture atlas generating button and select the size. you should select 4000px times 4000px at first.

Create a com3 file

To upload the file as a Vtuber model tracked on VTube Studio, you select [menu] > [save as com] and save the file on the [Live2D model file] in VTube Studio folder.

Website by Modiplex

youtube logotwitch logotwitter logopixiv logomail icon