1. Illustration Processing

You can also download the latest Cubism Editor here.

You will learn the first steps to process an illustration when moving it in Live2D.
In this video, we are working with Photoshop.

The following drawing tools are recommended when creating PSDs.

  • Photoshop (Adobe)
  • CLIP STUDIO PAINT (Celsys)
The drawing data is imported into the Cubism Editor, but in rare cases, depending on the drawing tool you are using,
Please note that normal reading and writing may not be possible.

 

Basic Tutorial List

  1. Illustration Processing
  2. Prepare to move the illustration
  3. Let's add facial expressions
  4. Let's get our bodies moving
  5. Facial XY motion attachment
  6. Let's add motion

Tutorial Video in Japanese

English Tutorial Video

Chinese version Tutorial Video

Please refer to the following URL for the Chinese version of the video tutorial.

https://www.bilibili.com/video/BV1DV411p7dv?spm_id_from=333.999.0.0

The import PSD created in the video can be downloaded here. Please refer to.
Script for Photoshop => DL here
The completed sample model of “Hiyori Momose” appearing in the video => Click here for DL
* Some browsers may not allow you to download the file even if you click the link.
 In that case, please right-click and save the link.

Video Review

Processing an illustration is the first step in moving an illustration in Live2D.
The processing of your illustrations will make or break your model, so learn it all here!

 

About processing illustrations

The illustration moved by Live2D looks like a single illustration when it is still, but in reality it is divided into parts such as hair, eyebrows, eyelashes, and ears.

By separating the parts, the character can be made to move, for example, to shake its hair or blink.
It is possible to move an illustration in Live2D without separating the parts, but if you want to move the character in an attractive way, you need to separate the minimum number of necessary parts.

First, prepare materials for processing illustrations.
Please prepare the illustration you wish to process, or download the data used in the video from here.
* Please be sure to read the license agreement for the material provided free of charge before handling the data used in the video.
* Some browsers may not allow you to download the file even if you click the link.
 In that case, please right-click and save the link.

The illustrations are roughly divided into three categories: hair, face, and body, but from there they are further subdivided.

 

Part with one's hair

The hair will be divided into three sections: bangs, sides, and back.
If the hair is split to the left or right, such as sideburns or twin-tails, use separate layers for each side.
Also, if you have ahair or other hair that you want to move, separate it into separate layers to make it easier to move it around.
When dividing, do not forget to add the parts that were hidden in the original drawing.
If there are no additions, the part will appear disconnected when it moves, as shown in the following image.

It is possible to adjust the illustration after it has been modeled, so you can watch it in motion.
If you have trouble making multiple adjustments to an illustration, it is recommended that you make larger additions to the drawing from the beginning.

 

Put in a good face

The face will be divided into eyes, nose, eyebrows, mouth, contours, and ears.

Eye parting

Separate the eyelashes, eyeballs, and whites of the eyes.
Lashes are easier to transform if they are separated from the bouncing part at the corner of the eye.
The white eyes can be used as clipping material, and don't forget to add the white eyes because the part hidden by the eyeballs is visible when the eyeballs are moved.

Separation of eyebrows and nose

Since it is not a component that can be significantly deformed, it does not matter as long as it is separated on its own.

Speech sharing

Separate the lips at the top and bottom.
It also separates the mouth, as the mouth should not be visible when closed.
When dividing the mouth, make the drawing one size larger than the original state.
However, since the mouth protrudes from the line as it is, a skin-colored area should be added to the lips.

TIPS
It is possible to create a mouth using the mouth as clipping material
as well as eyes, but with the following disadvantages.

Clipping masks are used extensively, resulting in a burden when installing the masks.
• Mouth parts may protrude beyond concealment in line drawings of the mouth
• The more deformation of the mouth, the more man-hours required for its production and adjustment.

(In the image below, the mouth is subtly protruding from the line drawing.)

Rather than using clipping on the mouth, we recommend using skin-colored paint to conceal the mouth.

However, clipping can be used effectively in the following situations.
Use different types depending on the original image and the application.

• For applications that do not care about the capacity of the model, such as videos, etc.
• Thickly painted or unevenly painted around the lips, depending on the painting style
• Simple with little deformation of the mouth

 

Outline and ear division

The outline should be painted so that the area hidden by the hair is also painted and only the skin color is used.
A round head makes it easier to get a sense of the three-dimensionality of the model, and it also makes it easier to add movement when modeling.
Although it is acceptable to treat the ears as the same parts as the contours, we will separate them this time because it is possible to control their movements more precisely and the quality of the model will be higher if they are separated.

Distinguish oneself

It is sufficient if the body is divided into neck, torso, arms, and legs.

The neck should be drawn more so that it is not visible cut off when the face is moved.
It is sufficient if the drawing is added up to the mouth area.

Neck partitioning

How to divide the torso

Keep the body separate if there are ribbons that you want to shake.
Separating each collar and cardigan makes it easier to add movement and improves quality, but there is no problem if they are grouped together.

How to separate arms

The arms should be separated by the upper arm, forearm, and hand.

How to Separate the Legs

Legs are divided by skirt, left leg, and right leg.

This concludes the processing of the illustration.

This is enough separation to move the character at a sufficient level.

 

About Editor import

Finally, prepare to load the file into Editor.
When importing PSDs into the Editor, line art and paint must be combined into a single layer, not separate.

It is also easier to manage the parts in the Editor if they are roughly divided into groups.

 

If you are using Photoshop, we recommend that you use the merging scripts that are available.
When saving data, please save it in PSD format.

This concludes the tutorial on processing illustrations.
The video includes audio for better understanding, so please watch it along with the text!

 

TIPS

■ Please refer to the following pages for more information on processing illustrations. Detailed instructions are also provided.

Cubism Editor Manual: Material Separation

Cubism Editor Manual: Notes on PSD Creation

 

■ In addition to the method of dividing and processing from a single illustration, there is another method of dividing the parts layer while keeping in mind that the illustration will be moved in Live2D at the stage of drawing.

 

The next step is to prepare to move the illustration.
Go to the next page “2. Preparation to move illustrations”.

© 2010 - 2022 Live2D Inc.