헤어 만들기

# 학습 과정 소개

헤어 제작 방법을 알아봅시다. 기본 헤어의 색상을 변경하거나, 새롭게 그릴 수 있습니다. 헤어는 복잡한 구조로 바지나 신발 아이템 제작에 익숙해진 후 작업하는 걸 권장합니다. [아바타 아이템 제작의 기본 개념](/docs?postId=588%7B%22target%22:%22_self%22%7D)을 참고해 아바타의 기본 개념을 먼저 숙지하길 바랍니다.

# 사전 준비

아이템 제작을 위해선 Adobe Photoshop이 필요합니다. 해당 소프트웨어를 설치한 후 아래 파일을 받아 엽니다. $$attachFile {"name":"Avatar_Hair.psd","url":"https://mod-file.dn.nexoncdn.co.kr/storage/Avatar_psd/version5_230602/Avatar_Hair.psd"} $$

> Tip. 헤어는 아바타 발을 기준으로 최대 120x120안에서 제작을 권장합니다. [png](1685684754306c9db40323e1a487d8d01f6401b8a2ba4)

# 헤어 종류

헤어는 짧은 헤어와 긴헤어로 구분됩니다.

[{"index":"짧은 헤어","0":"[png](168568956575557a3b5c4532c4f31ba37bdfa798338fb)"},{"index":"긴헤어","0":"[png](168568957903110d3a4890ef74bd58109ed7890cd741a)"}]

# 제작 시트 설명

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

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

### 회색 레이어

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



[png](1685684844020a9b9fe1ac2e748eba8846bd952a2f77e)

# 노란색 레이어

노란색 레이어에 크리에이터가 제작할 헤어를 그릴 수 있으며, 3개의 폴더로 나뉘어져 있습니다. [png](1685685193823a97012a2929d430ea43007325272ecf4)

  1. case1.front: 헤어의 앞모습 작업을 위한 body와 여러 가지의 모자 샘플이 포함되어 있습니다.
  2. case2.front_proneStab: 엎드려 있을 때의 헤어 작업을 위한 body와 여러 가지의 모자 샘플이 포함되어 있습니다. 하위에 보라색 레이어가 있습니다.
  3. case3.back: 헤어의 뒷모습 작업을 위한 body와 여러 가지의 모자 샘플이 포함되어 있습니다.



#### case1.front

[png](168568527472950ccb61ca0e14cbe86f2644e579fd5d3)

  1. NoCap 폴더 헤어의 앞모습을 그릴 레이어와 모자 샘플을 포함한 폴더입니다. [모자 만들기](/docs?postId=592) vslot의 3번 유형에 해당하는 모자 샘플입니다.  


     * guide_cap_samples: 기본 헤어로 머리 모양이 변하지 않는 모자 샘플이 포함되어 있습니다.
     * edithere:front_hairOverHead_31: 헤어의 앞모습을 그릴 수 있는 레이어입니다.
  2. WithCap 폴더 모자를 썼을 때 눌리는 헤어의 앞모습을 그릴 레이어와 해당하는 종류의 모자 샘플들이 들어있습니다. [모자 만들기](/docs?postId=592) vslot의 1, 2번 유형에 해당하는 모자 샘플입니다.  


     * guide_cap_samples: 헤어를 누르는 종류의 모자 샘플이 포함되어 있습니다.
     * edithere:front_hair_35: 눌린 헤어의 앞모습을 그릴 수 있는 레이어입니다.
  3. edithere:front_hairShade_46 헤어의 그림자를 그릴 수 있는 레이어입니다. 그림자는 헤어 모양에 맞춰 #6d5031 색으로 그린 뒤, 투명도 30% 적용해주면 모든 피부색에 어울리게 됩니다.

  4. edithere:front_hairBelowBody_84 몸 뒤로 배치되는 헤어를 그릴 수 있는 레이어입니다. 주로 긴 헤어가 해당합니다.




#### case2.front_proneStab

[png](168568532965909c3e58fa3c34781830758d9ea4b2c33)

  1. NoCap(copy from 1-a.NoCap) 폴더 엎드린 자세일 때 헤어의 앞모습을 그릴 레이어와 모자 샘플을 포함한 폴더입니다.

     * edithere:proneStab_hairOverHead_31: 엎드린 헤어의 앞모습을 그릴 수 있는 레이어입니다. 작업 시 원활한 작업을 위해 WithCap 폴더에서 작업한 edithere:front_hairOverHead_31 레이어를 붙여 넣은 후 엎드렸을때 기준으로 넓게 퍼진 모습으로 그려줍니다.
  2. WithCap(copy from 1-b.WithCap) 폴더 엎드린 자세로 모자를 썼을 때 눌리는 헤어의 앞모습을 그릴 레이어와 해당하는 종류의 모자 샘플들이 들어있습니다.

     * guide_cap_samples: 헤어를 누르는 종류의 모자 샘플이 포함되어 있습니다.
     * edithere:proneStab_hair_35: 엎드린 헤어의 앞모습을 그릴 수 있는 레이어입니다. edithere:front_hair_35 레이어의 그림을 복사해 참고용으로 사용하며 엎드렸을때 기준으로 넓게 퍼진 모습으로 그려줍니다.

> Tip. duplicated:front_hairOverHead_31, duplicated:front_hairOverHead_35에 그리는 헤어의 앞모습은 edithere:front_hairOverHead_31, edithere:front_hair_35와 같아야 합니다.

  3. edithere:proneStab_hairBelowBody_84 엎드린 자세일 때 몸 뒤로 배치되는 헤어를 그릴 수 있는 레이어입니다. 주로 긴 헤어가 해당합니다.




#### case3.back

[png](1685685577670201094e012274eb19907cfcb18577e89)

  1. NoCap 헤어의 뒷모습을 그릴 수 있는 레이어와 모자 샘플이 포함되어 있습니다. [모자 만들기](/docs?postId=592) vslot의 3번 유형에 해당하는 모자 샘플입니다.  


     * guide_cap_samples: 기본 헤어로 머리 모양이 변하지 않는 모자 샘플이 포함되어 있습니다.
     * edithere:back_backHair_91: 헤어의 뒷모습을 그릴 수 있는 레이어입니다. 앞모습에서는 별도의 레이어에 그린 긴 머리를 함께 그려야합니다
  2. WithCap 모자를 썼을 때 눌리는 헤어의 뒷모습을 그릴 레이어와 해당하는 종류의 모자 샘플들이 들어있습니다.  


     * guide_cap_samples: 헤어를 누르는 종류의 모자 샘플이 포함되어 있습니다. 아래 두 레이어의 같은 모양의 헤어이지만 넓은 모양과 좁은 모양으로 다르게 작업할 수도 있습니다. 샘플처럼 같은 간격으로 그려도 무방합니다. [모자 만들기](/docs?postId=592) vslot의 1, 2번 유형에서 뒷모습의 머리카락 간격을 확인해보세요.  
[png](1646015941633b8506858e9f44000aed41fdb5f5efe41)
     * edithere:back_backHairBelowCapWide_94: 눌린 헤어의 뒷모습을 그릴 수 있는 레이어입니다. 뒤에서 보이는 긴 머리카락의 간격을 넓게 그립니다.
     * edithere:back_backHairBelowCapNarrow_95: 눌린 헤어의 뒷모습을 그릴 수 있는 레이어입니다. 뒤에서 보이는 긴 머리카락의 간격을 좁게 그립니다.

> 더 알아보기 모자의 유형에 따라 Wide와 Narrow의 머리 모양을 구분하기도 합니다. 모자의 vslot의 유형 중 뒤통수를 덮는 모자가 적용될 때 제작해야 하는 헤어입니다. 크리에이터의 기획에 따라 넓은 모양과 좁은 모양으로 다르게 작업할 수 있습니다. 제공된 모자 샘플을 착용해 보고 어색하지 않다면 Wide와 Narrow를 동일하게 사용해도 좋습니다. [png](1646019003831f716ca8d04f043dc82dfb6646dd13d68)




# 제작하기

노란색 레이어에만 이미지 작업을 합니다. 검은색으로 기본 모양을 만든 후 세부 헤어 모양과 컬러를 수정하면 효율적으로 작업할 수 있습니다. [png](168568560935132a94259bdea4729a8de80f5f318ada0)

#### 앞모습 그리기

edithere:front_hairOverHead_31, edithere:front_hairBelowBody_84, edithere:front_hair_35, edithere:front_hairShade_46 레이어에 이미지 작업을 합니다.  
[png](164601737197069b5662eaca34060b8ee41ad221a610e)  


  1. edithere:front_hairOverHead_31, edithere:front_hairBelowBody_84 레이어에 'Pencil tool'로 기본 모양을 검은색으로 그린 뒤 색상을 변경하고, 세부 헤어 모양을 그립니다.  
짧은 헤어일 경우는 몸의 뒤로 배치되는 헤어를 그리는 edithere:front_hairBelowBody_84 레이어는 비워둡니다.  
[png](168568563110469b6c925c14447018db3dde23d47ee9a)  

  2. edithere:front_hair_35 레이어에 눌린 머리를 두상에 맞게 지워줍니다.  
[png](16856861702113e6be6f4c60f474cb20004a28f6faf56)  

  3. 앞 헤어에는 그림자가 있습니다. edithere:front_hairShade_46에 헤어 모양에 맞춰 R:109, G:80, B:49 또는 #6D5031 색상으로 그림자를 그려줍니다. 레이어에 투명도 30% 적용해주면 모든 피부톤에 어울립니다.  
[png](16856862015273a94bd2c09b84f52aa3deaf45a6c8199)



#### 엎드린 자세의 헤어 그리기

'case1.front'의 헤어와 동일한 이미지를 사용하면 편리하므로 해당하는 레이어들을 복제해 사용합니다. 복제한 레이어의 이름을 변경하여 작업합니다. 짧은 머리는 그대로 사용하고, 긴 머리는 엎드린 때의 모습을 기준으로 넓게 퍼진 모습으로 그립니다. [png](168568935395427b2788e8cd941e897fee75547b9970b)

  1. edithere:front_hairOverHead_31 레이어를 복사해 2-a.NoCap(copy from 1-a.NoCap) 폴더로 붙여 넣기 합니다.
  2. edithere:front_hair_35 레이어를 복사해 2-a.NoCap(copy from 1-a.NoCap) 폴더로 붙여 넣기 합니다.
  3. edithere:proneStab_hairBelowBody_84 레이어에 엎드렸을 때 몸 뒤로 배치되는 헤어가 넓게 퍼진 모습을 그려줍니다.  
[png](1685689459920fd561d6ff4fc406498b6eb0ae6ea6190)



#### 뒷모습 그리기

edithere:back_backHair_91, edithere:back_backHairBelowCapWide_94, edithere:back_backHairBelowCapNarrow_95 레이어에 이미지 작업을 합니다. [png](1646018647414c1a3589d385249488341053dd0652423)

  1. edithere:back_backHair_91에 'Pencil tool'로 기본 모양을 검정색으로 그린 뒤 색상을 변경하고, 세부 헤어 모양을 그립니다.  
[png](1685689505332f4c4431c46954bc1b4e4f671835ec0ff)
  2. edithere:back_backHairBelowCapWide_94 레이어에 눌린 머리를 두상에 맞게 지워줍니다.  
[png](16856895279327b7abfea089946e79eed6a94368c2980)
  3. 2번을 복사하여 edithere:back_backHairBelowCapNarrow_95에 넣어줍니다.  
묶인 뒷머리의 간격을 좁히고 싶을 경우 긴 머리를 지우고 다시 그립니다.  
[png](16457811937535becc03a37664135889302106c115bff)



##### 참고 가이드

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