Getting Started
Prepare for the Editor and Explore the Interface
Download the tutorial PSD and learn the canvas, hierarchy tree, dope sheet, and editing modes.
After this article
Create a project, locate the main tools, and switch between Skeleton and Animation modes.
Prepare your browser, sample, and project
The quick start works anonymously. Sign in only when you need cloud saving; no game engine setup is required.
- Use desktop Chrome or Edge at 100% browser zoom so the controls match the screenshots.
- Download the shared PSD as right_test.psd so you can find it in the file picker later.
- Opening the editor creates a local project. Anonymous projects stay in this browser; export your work before clearing site data.
Related links
Learn the four work areas
| Area | Purpose | Used in this tutorial for |
|---|---|---|
| Top toolbar | Modes, undo, import, export, saving, and view options | Importing the PSD, saving, and choosing an export format |
| Main canvas | View the character and select, create, or drag objects | Editing bones, images, meshes, paths, and constraints |
| Right hierarchy tree | Manage bones, slots, images, constraints, skins, events, and animations | Inspecting automatic PSD binding and selecting objects |
| Bottom dope sheet | Manage animation tracks, the playhead, and keyframes | Playback, frame navigation, easing, and keyframe editing |
- 1
Start with the hierarchy tree
Find Bones, Constraints, Draw Order, Skins, Events, Animations, Images, and Audio. Use the arrows to expand or collapse each section.
Expected resultThese sections may be present but empty in a new project; that is normal.
- 2
Then inspect the dope sheet
In Animation mode, it shows the active animation's tracks and keys. You can ignore it while setting up the skeleton.
Expected resultYou can distinguish object management on the right from time management at the bottom.
Distinguish Skeleton and Animation modes
Skeleton mode is for building structure, binding images, and adjusting the rest pose. Animation mode records changes over time. Import PSD and automatic binding belong in Skeleton mode.
- 1
Confirm the current mode
Check the mode button at the top left. “Current: Skeleton Mode” means you can import a PSD.
Skeleton mode is the starting point for PSD import and structural editing. - 2
Switch to Animation mode
Click the mode button or press M, then select an animation in the right panel.
Expected resultThe dope sheet shows animation tracks and import is disabled, protecting the skeleton from accidental edits.
Press M to switch between the two modes.
Canvas navigation and built-in help
| Action | Effect |
|---|---|
| Mouse wheel | Zoom the canvas |
| Right-drag | Pan the canvas |
| Right-double-click | Reset the view |
| Ctrl + Z | Undo |
| Ctrl + Y / Ctrl + Shift + Z | Redo |
- 1
Open canvas and PSD help
Click the question mark at the top left of the canvas to view mouse controls, shortcuts, and humanoid PSD naming rules for this version.
Expected resultThe help comes from the actual editor and can be cross-checked with this tutorial.
Click the question mark at the canvas's top left to open built-in help.