# Avatar Editing Tool Tutorial

## Model Selection Zone <a href="#model-selection-zone" id="model-selection-zone"></a>

1.File Management (yellow zone)Click the “Open” button above to read a previously saved model file and continue editing.

2.General Category Selection (red zone)You can select the general category of your model on the far left. There are three categories:TopBottomShoes

3.Model Selection (blue zone)After choosing a general category, you can select a specific model under that category on the right.

4.Model Preview (green zone)

* You can get a preview of the selected model on the far right.
* The image can be rotated.

5.Go to The Editing Mode

* Click the “New” button on the bottom of the screen to go to the editing mode and edit the model.

​Model Selection Zone

<figure><img src="https://946772453-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxlfiLjObdGlxsqsAWuW%2Fuploads%2FwqUPOgEEUrikuwORLwxl%2Fimage.png?alt=media&#x26;token=6abe1be4-9831-4ef4-a29d-72604e5e5aaa" alt=""><figcaption></figcaption></figure>

## Model Editing Zone <a href="#model-editing-zone" id="model-editing-zone"></a>

### Zone Preview <a href="#zone-preview" id="zone-preview"></a>

**1.File Management (**<mark style="color:yellow;">**yellow zone**</mark>**)**

* Click the “Open” button above to read a previously saved model file and continue editing.
* Click the “Save” button to save your progress.

**2.General&#x20;**<mark style="color:red;">**Cat**</mark>**egory Selection (**<mark style="color:red;">**red zone**</mark>**)**

* You can go back to the model selection page and select a new model to edit by clicking the category selection column.

**3.Model Preview (**<mark style="color:green;">**green zone**</mark>**)**

* You can view the current status of your model. All changes will be shown in the preview zone.
* The image can be rotated.

**4.Editing Area (**<mark style="color:blue;">**blue zone**</mark>**)**

* You can view the tile image of each part and make edits.

​Zone Preview

<figure><img src="https://946772453-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxlfiLjObdGlxsqsAWuW%2Fuploads%2FwBaxCW4HXHfQNw7jdQf8%2Fimage.png?alt=media&#x26;token=72c8c136-68e8-463c-a548-886287dc3a32" alt=""><figcaption></figcaption></figure>

### Selected Status <a href="#selected-status" id="selected-status"></a>

* **Selected Reminder**
  * When you select a part of a model, that part will be highlighted in both preview and editing zones.
* **Edits**
  * You can only edit a model after selecting a specific part of it.
* **How to select?**
  * You can select a part by clicking on that part in either the preview or the editing zone.

​Selected StatusEditing ToolHow to use?As long as the image of a part has been uploaded, you can use the editing tools on the bottom to edit that part after successfully selecting it.

1-ResetThe part selected will be reset to blank.

2-UploadYou can upload images from your computer by clicking upload.You may only use one image at a time. A newly uploaded image will overwrite the old one.

3-MoveMove the mouse above the image to drag it on the screen after clicking move.

4-ScaleClick on the zoom button to get the input box. Type in numbers to zoom in or out.

5-RotateClick on the rotate button to get the input box. Type in numbers to make rotations.

6-ColorClick on the color button to get the palette. Choose the color you want to change the background color of the part.<br>

<figure><img src="https://946772453-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNxlfiLjObdGlxsqsAWuW%2Fuploads%2FHnvHVOPynanbFsqRivOM%2Fimage.png?alt=media&#x26;token=54095f90-203e-426b-926c-0bd1a002215b" alt=""><figcaption></figcaption></figure>