Lesson 1

# Importing PSDs and Editor UI

This is the text version of a tutorial series that has also been posted to Youtube. This text version may be updated as time goes, and be more up-to-date than the recorded video lessons. This tutorial series is aimed at users intending to animate/rig/model vtubers using Live2D. I will use the word "rigging" as a synonym for modeling in live2D as I do not want a "vtuber model" and "modeling in live2D" to be confused.

Each lesson has accompanying Live2D source files which can be acquired here.

This tutorial series was written using the paid version of Live2D Editor version 4.2.04

## Intro

Welcome to the first lesson of the Lua Lucky's Live2D Guide. This lesson will cover PSDs, importing a PSD into the Live2D Editor, and understanding the general concepts of the Live2D UI.

## PSD Information

To animate something with the Live2D Editor you must first have an image to animate. Live2D has the ability to import PNGs and PSDs. It is not recommended that you ever import images as PNGs, unless it is a reference image that will not change and will not go into the final model (Live2D calls this a Guide Image). This is because Live2D does not handle PNGs the same way as PSDs and makes it quite inconvenient to use them. We will only be dealing with PSDs in this guide.

PSD is the file format of an Adobe Photoshop file and has the ability to store much more complex data than a simple image file such as a PNG or JPEG. PSDs have become the industry standard for all complex image editors, and many non-Adobe, free and paid image editors have the ability to open and edit them, such as:

* Clip Studio Paint
* GIMP
* Paint.net
* Procreate
* Krita
* etc. and so-on

It is highly recommended that you become slightly familiar with an image editing program so that you can prepare the PSD before importing it into Live2D. I will insert a link to a page explaining how to prepare a PSD here. #TODO

The rest of this lesson will continue assuming your PSD has been prepared according to the above linked page.

If you intend on following these lessons, you can download the model shown in the lessons here. Each lesson will also have an accompanying Live2D source file which can be purchased here.

## Importing a PSD

To import a PSD into Live2D to create a new model, simply drag the PSD file onto the Live2D window. If you have no other model open then a new file will be created immediately.

If you already have a file open in Live2D, select **< Create new model with PSD file >**

Lets say you make a change to the original PSD and want to use the new version, but have already started the rigging process in Live2D. To update the images in your existing Live2D file, follow these steps:

1. Drag the PSD onto the Live2D window.
2. Select the name of the model you are working on and click **OK**.
3. Select **Replace [ Name of PSD.psd ]** and click **OK**. If there are multiple PSDs listed, select the most recent version of the PSD you want to replace.
4. Any new layers will be placed in a folder at the top of the Parts list and the existing layers will their images updated.
5. Save your Live2D file, Live2D will ask "There are unused source images, would you like to delete them?", select Yes.

You may notice that the model looks slightly different in Live2D. We will address this in the next lesson.

## The Parts of a Live2D Model

The PSD provides the image(s) from which the final model will be created, this is called the Source Image.

Artmesh: Each layer in the PSD becomes an **"artmesh"** in Live2D. An artmesh is each individual image/piece of the model. It is called an "artmesh" because it actually is made up of two parts: the art and the mesh. The "mesh" of the artmesh will be created by us, but by default is a box. Click on a part of your model in Live2D and you will see white dots that represent the mesh. The mesh is how we will control the movement of the art.

Parts: Groups in the PSD become **"parts"**. Parts are essentially groups or folders of artmeshes. They can also be used to hide/show many artmeshes at once, but this is not a common usage for riggers creating vtuber models, and is more common for riggers creating animations. Parts can be used to group many artmeshes' layer order, and for marking reference images as Guide Images so that they do not show in the final model.

Deformers: **"Deformers"** are the bones of the model. They move the artmeshes in various ways. We will be creating these deformers in Live2D to rig/animate our model. Deformers have a lesson dedicated to them.

There are many more parts, but we will cover those in laters lessons as needed. For now these are the key concepts for understanding the UI of Live2D.

## Live2D Editor UI

Each section of the screen is called a palette. We will outline the purpose of each palette now.

### Parts Palette

The parts palette lists all parts of the model, including artmeshes, deformers, parts, glue, etc., in the order that they are rendered. This means that items at the top of the parts palette will appear on the model on top of items below it. To the right of every part there is a number (default is 500). This number is the **"Sorting Order"** of the part. Parts have a higher sorting order will always appear on top of parts with a lower sorting number, regardless of their order in the parts list. You can use the sorting order to animate the layering of artmeshes. We will go over this later.

### Project Palette

The project palette organizes and connects the artmesh to the original PSD (source image). This panel is really only necessary to look at if you have noticed you've accidentally deleted an artmesh, or if you are doing some complex PSD merging that won't be covered here. For the purposes of this tutorial guide we won't be using it.

### Deformer Palette

The deformer palette shows the hierarchy of deformers in the model.

A hierarchy is a system a deformer's "parent" will control the movement of all of its "children". Lets use your hand as an example. If you rotate your elbow, your hand moves with it. If you move your hand, your finger moves with it. In this example, this is the hierarchy. A deformer can only ever have at most one parent, but it can have infinite children.

In the Deformer palette, the order in which parts that are siblings of each other (parts that share the same parent) are displayed does not matter. Children of a deformer will be in the dropdown of the parent.

### Inspector Palette

The inspector palette shows you details and settings for the part you have selected. The contents of this palette will change depending on what type of part you have selected. We'll go over the details of these settings as they come up.

### Parameter Palette

Parameters are the bread-and-butter of Live2D rigging. Each parameter represents a single motion. For instance if you look in your list of parameters you will see one called "EyeL Open" which represents "Left Eye Blinking", "Eyeball X" represents the model's eyes looking left and right, and so on. If you know about animation, you may be familiar with the concept of "keyframes". In Live2D there is a very similar concept called **"keyforms"**. In a general sense, you can think of "parameters" as animation timelines representing individual motions, and "keyforms" as the individual states this motion can be in. This concept is very confusing before trying it yourself, so don't worry if it doesn't make sense yet, this concept will have its own lesson. The parameter palette is the list of parameters and control any settings related to parameters.

### Toolbar

The toolbar is the bar of buttons at the top of the screen. These are buttons for some of the most common functions and tools that we'll be using while we work. For now we will only go into details the tools we will use most often.

#TODO fill this out

##### Tool Details Palette

The tool details palette will allow us to change the settings of the tool we are using.

### View Area

The view area is the window where we can see what we're doing. The model is shown here, and we can move around parts of the model to rig the movement. This is where all the magic will happen.