상의 만들기

# 학습 과정 소개

상의 제작 방법을 알아봅시다. 기본 상의 색상을 바꾸고 그 위에 그림을 그릴 수 있습니다. 상의는 복잡한 구조로 구성되어 있기 때문에 바지나 신발 아이템 제작에 익숙해진 후 작업하는 걸 권장합니다. [아바타 아이템 제작의 기본 개념](/docs?postId=588)을 참고해 아바타의 기본 개념을 먼저 숙지하길 바랍니다.

# 사전 준비

아이템 제작을 위해선 Adobe Photoshop이 필요합니다. 해당 소프트웨어를 설치한 후 아래 파일을 받아 엽니다.

$$attachFile {"name":"Avatar_Coat.psd","url":"https://mod-file.dn.nexoncdn.co.kr/storage/Avatar_psd/version5_230602/Avatar_Coat.psd"} $$

> Tip. 아이템은 아바타 발을 기준으로 최대 120x120 안에서 제작을 권장합니다. [png](1677032255514a026c711634c4196ab0b96bc5424e7f9)

# 제작 시트 설명

제작 시트는 회색 레이어와 노란색 레이어로 구분되어 있습니다. 4개의 회색 레이어는 이미지를 데이터화하기 위한 data 폴더, 이미지 제작에 도움을 줄 아바타 body 레이어, 가이드용 선 레이어, 바탕용 레이어가 있습니다. 회색 레이어는 모두 잠겨있고, 작업 중에 수정은 필요하지 않습니다. 노란색 레이어는 크리에이터가 실제 아이템을 그릴 수 있는 곳입니다.

> Tip. 모든 레이어의 이름을 수정하거나 삭제할 경우 아이템을 제작할 수 없습니다. 절대 이름을 변경하지 마세요.

#### 회색 레이어

포토샵에서 시트를 열면 회색 레이어는 자물쇠로 잠겨 있습니다. 아이템 등록에 관련된 내용으로 변형이 불가한 레이어입니다.

  1. data 폴더 data 폴더는 아이템을 데이터화하기 위해 필요한 폴더입니다. 이미지 제작에는 영향을 주지 않습니다. 
     * data:origin: 빨간색 점으로 데이터의 중심을 표시합니다.
     * data:type:Coat: 어떤 종류의 데이터인지 알 수 있습니다.
     * data:vslot:Ma: vslot의 개념은 모자에서만 사용됩니다.
     * data:use_zmap_preset1: 아바타를 구성하는 이미지는 층층이 쌓여 만들어집니다. 아바타의 다양한 몸동작을 만들기 위해 몸을 바탕으로 옷, 방패, 무기 순으로 이미지가 층층이 위에 쌓이는 구조입니다.  
아이템에 따라 분리된 각 Sprite의 높이가 순서대로 정리된 파일이 zmap입니다.
  2. guide_character_ 레이어: 아바타의 샘플 body입니다. 레이어 이름 뒤에 붙은 숫자가 클수록 아래에 배치되는 내부적인 규칙입니다.
  3. guide_grid: 그리드 선 기준으로 아이템을 제작합니다. 초록색 선 안에서만 작업을 해야 합니다.
  4. guide_background: 바탕 컬러는 gray_blue와 gray가 있습니다. gray_blue에 위치된 팔은 예외적인 자리에 이미지가 그려지므로 표시를 해 두었습니다.



[png](165061743355448155ebe84c9405391d1de99cb7ca495)

#### 노란색 레이어

노란색 레이어에는 크리에이터가 제작할 상의를 그릴 수 있습니다.

  1. guide_character_backBody_113: 아바타 뒷모습과 팔

     * edithere:mail_backMailChest_103: 아바타 뒷모습과 팔 위에 그려지는 옷
  2. guide_character_summary_78,100: 아바타 몸과 팔, 뒷모습 머리

     * edithere:mail_mailChest_68: 아바타 몸과 팔 위에 그려지는 옷
  3. guide_character_summary_60,62: 아바타 팔

     * edithere:mailArm_mailArmBelowHead_58,61: 아바타 팔 위에 그려지는 옷
  4. guide_character_summary_52,53: 아바타 팔

     * edithere:mailArm_mailArm_50: 아바타 팔 위에 그려지는 옷
  5. guide_character_summary_26,47: 아바타 머리와 팔

     * edithere:mailArm_mailArmOverHairBelowWeapon_25: 아바타 머리와 팔 위에 그려지는 옷
  6. guide_character_armOverHair_24 : 아바타 팔

     * edithere:mailArm_mailArmOverHair_22: 아바타 팔 위에 그려지는 옷



[png](1645582927632f0e7790d36844043a8bbb992b2d24154)

# 제작하기

기본 상의를 바탕으로 무늬가 있는 상의, 다른 색상의 상의, 긴 팔 상의를 제작해봅시다.

[{"index":"기본 상의","0":"[png](1645684463571e684de7e0cba4bdf8d78e2022a34c1a1)"},{"index":"무늬 그리기","0":"[png](16456845084177670d36c4b664d549d420a02542734dd)"},{"index":"색상 변경","0":"[png](16503348006950e9be3c69e664a34966cbc1fbdf57b0f)"},{"index":"긴 팔 상의","0":"[png](1650334752955e04ab9761b2a43f8b724def5b499f658)"}]

#### 무늬 그리기

  1. 노란색 레이어 2번(edithere:mail_mailChest_68)에 이미지 작업을 합니다.   
[png](16455830786944859a717c0be483bb5f59faa8651c14f)
  2. 작은 하트를 각각의 동작에 그려줍니다.  
몸통에만 하트가 그려지므로 다른 레이어는 그대로 둡니다.  
[png](1645583092780f3345eebaa4a4be5a9c23f91b74096cd)



#### 색상 변경하기

  1. 노란색 레이어를 클릭합니다.
  2. image - Adjustments - Hue/Saturation 또는 단축키 Ctrl+U를 입력해 Hue/Saturation 창을 엽니다.
  3. Hue 값을 조정합니다. 모든 노란색 레이어의 상의 색상을 원하는 색으로 바꾸고 'OK' 버튼을 누른 후 파일을 저장합니다.  
[png](1645591630688cb5180ce8d77408787f2decf3776e412)



#### 긴소매 상의 만들기

  1. 노란색 레이어 1번부터 6번에 이미지 작업을 합니다.   
[png](165033411781314df1c56f85942fe8483569d7af5e76d)
  2. body에 맞게 pencil tool을 이용해 긴 팔을 그립니다.  
[png](1650334169976ee38f585747246f596f2fb80b3e19d42)[png](1650334184379e86690f2a3f547eaa6bf6a44a445ae97)  
[png](16503342030177f5460daeddc46f2971251a579dc4698)[png](16503342772725975591ca82d42a289930aff1428fc53)  
[png](1650334295006e903a60bc3314a47b4c65c47c9a5aacf)[png](1650334309071f637ad711b474bf19c38c1aeacbfa18d)   

  3. 상의의 소매 부분을 그릴 때는 기본 규칙과 다른 예외 시트를 염두에 두고 그려야합니다.  
시트의 동작 중 Swing O3, Swing OF, Stab TF, Swim-Fly, Sit을 그릴 때는 일부 예외적인 법칙을 따라야 합니다.  
Swing O3, Swing OF는 레이어를 기준으로는 'guide'에서 body(팔)은 3번 위치에 있으나 소매는 4번 레이어에 그려줍니다.  
Stab TF, Swim-Fly, Sit는 레이어를 기준으로는 'guide'에서 body(팔)은 4번 위치에 있으나 소매는 6번 레이어에 그려줍니다 [png](16503343643288cb65f8b3cd847089f0e4a494bbed99c)  
레이어만으로 이미지의 레이어 위치를 모를 때는 기본으로 제공된 흰 티셔츠가 작업된 레이어를 찾아 그리면 됩니다. [png](16503344581568f0d7baaca4d4c5ea17ddc395dad1716)[png](16503344730397780d272d77c48ba929bca725111a81b)  
[png](16503344933842ba8ee3242524637907486057d58ee84)[png](16503345071810a077a814e404a4dba975667e0261846)  
[png](16503345264358fbc43530b6e4822b41cfe99165d8f48)



##### 참고 가이드

  * [하의 만들기](/docs?postId=584)
  * [망토 만들기](/docs?postId=585)
  * [장갑 만들기](/docs?postId=587)
  * [신발 만들기](/docs?postId=583)