Getting Started

From PSD to Animation in 10 Minutes

Use the right-facing sample PSD to assemble a character, bind bones, create IK, and play default animations.

BeginnerAbout 10 minFor Editor v1.0 · Tutorial updated Oct 26, 2026

After this article

A playable project containing character images, a skeleton, slots, IK, and seven default animations.

Complete “Prepare for the Editor and Explore the Interface” and download right_test.psd.

1
Confirm Skeleton mode
If the toolbar shows Animation mode, press M to return. Start with a blank project so existing bones or images do not get mixed into the exercise.
Expected resultNo previous character data appears in the hierarchy tree.
2
Click Import
Click the downward arrow in the top toolbar, then choose “Import PSD File”.
The Import menu contains “Import PSD File” and the sample download.
3
Set options before choosing a file
The PSD settings appear first. File selection comes after you confirm orientation and automation.
Expected resultFront, Back, and Right orientation options plus four import switches are visible.
Choose the settings first, then select the PSD file.

Setting	Tutorial value	Purpose
Character orientation	Right	Matches right_test.psd and enables default animation generation
Visible layers only	On	Imports visible slices; the hidden full reference layer is not assembled
Auto-assemble PSD	On	Places slices at their PSD positions and creates an editable structure
Auto-bind bones	On	Creates the humanoid bone chain, slots, image bindings, and IK
Generate 7 animations	On	Creates idle, walk, run, jump, attack, hurt, and death

1
Check every switch
Select Right and turn all four switches on. The quick start requires you to enable Auto-bind bones and Generate animations manually; Front and Back do not generate default animations.
The complete setting combination used by the quick start.
2
Continue to file selection
Click “Choose PSD” and select the downloaded right_test.psd in the system file picker.
Expected resultA target folder dialog appears; parsing has not started yet.
3
Create the default image folder
Choose New Folder, enter default, then click Import. This organizes image resources without changing PSD layer names; it will be the reference for skinning later.
Expected resultThe editor starts parsing. Do not click Import repeatedly.
Confirm the image destination after selecting the PSD to start the actual import.

1
Wait for completion
The complete character should appear. The notification summarizes slices, bindings, IK, recognized parts, and animations.
Expected resultNo obvious parts are missing and the hierarchy tree is populated.
The actual automatic binding result for right_test.psd.
2
Inspect bones and images
Expand the bones and slots, then select an arm or leg bone to confirm that the corresponding image is attached below it.
Expected resultThe canvas selection matches the hierarchy; images are not isolated, unbound resources.
3
Inspect IK and animations
Expand Constraints to find four limb IK constraints and Animations to find the seven defaults.
Expected resultidle, walk, run, jump, attack, hurt, and death are all present.
The generated animations are editable; you do not need to start with an empty timeline.

1
Play idle
Press M or the mode button, select idle, then click Play in the dope sheet or press Space.
Expected resultThe character animates and the playhead moves.
Play idle first to verify that the skeleton, images, and animation work together.
2
Check the other animations
Pause and play walk, run, jump, attack, hurt, and death. Death is a final pose, not a loop that must return to its first frame.
Expected resultEvery animation has visible motion without detached images or disappearing parts.
3
Save locally
Click Save to write the current state to browser storage so you can resume it in the same browser.
Expected resultA local-save confirmation appears.
Local saving uses IndexedDB. Save at milestones and reopen the project in the same browser to continue.