figma 피그마로 캐릭터 만들기 (feat.2일차/1시간 이내 가능)

나도 할 수 있구나.. 

제가 앞으로 피그마를 어떻게 쓰게 될지는 모르겠지만,,

일단 킬링타임과 취미활동으로는 너무 재밌게 할 수 있을 듯 합니다. 

 

캐릭터 만드는 과정

1. 참조사진 정하기 

- 내가 따라 그리고 싶은 동물 그림을 일단 캡쳐합니다. 

- 저작권 이슈가 있을 수 있으니, 참고하여 나만의 캐릭터를 그려봅니다. 

 

2. 프레임 지정 

- # 표시 프레임 클릭 & 드래그 : 포토샵 /일러스트의  아트보드 정도라 보면됩니다. 

- 나중에 이 프레임대로 export를 할 수 있습니다. 

- 픽셀기반이라 역시 화질이 좋습니다. 

- 프레임의 사이즈를 오른쪽 바에서 지정할 수 있습니다. 

- 노출하기로 결정한 사이즈에서 1/2 1/3 줄여서 쓰시기를~~  ( 피그마 용량문제로 느려질 수 있다고 하네요) 

* 환경에 따라 그래픽 의도가 달라질 수 있는 요인 파악해서 제작하기.

 

3. 컴포넌트 만들기

- 이 얼마 없는 도형들에게 꼭지점을 추가할 수 있고 모양을 합칠 수도 있고 다양하게 제작할 수 있습니다. 

- Eilipse 를 누르고 프레임 위에 드래그 하여 원을 그립니다. 

- 도형을 더블클릭하면 꼭지점들을 수정할 수 있습니다. 

- 밑면의 가운데 꼭지점을 클릭하여 찐빵 모양으로 만듭니다. 

- 오른쪽 바에 보면 "Fill" 을 눌러 원하는 색깔을 채워줍니다. 

- 단축키 "I" 를 누르면 스포이드로 캡쳐한 사진의 색깔과 동일하게 가져올 수 있습니다. 

- Stroke 으로 테두리 설정하고 색깔, 두께 변경 가능합니다. 

- 도형을 복붙하려면 더블클릭 상태에서 esc를 누르시던지 또는 Done 으로 바꿔주셔야 합니다. 

- 도형이 클릭되어 있는 상태에서 alt를 눌러서 복제하시면 그룹으로 묶여서 복제가 됩니다. 

프레임 / 컴포넌트 만들기

귀여운 곰돌이 얼굴 만드는 과정

색깔변경 / 테두리 생성 

Done  변경!

 

4. 원하는 캐릭터가 될 때까지 반복... 

- 단축키 alt 누르고 도형을 옆으로 당기면 복붙이 바로 됩니다. 

- 마우스 오른쪽버튼 클릭 -> Copy/Paste as -> 속성복붙 가능 

- 왼쪽 바 레이어에 따라 겹쳐 보이는 것이 달라보일 수 있습니다.

  포토샵을 이미 다뤄본 분이라면 이 개념에 대해 바로 아실 듯합니다. 저는 몰랐습니다 :-)
  * 레이어가,, 쌓여있는 순서대로 나열이 되어 있으니, 지금 그린 도형이 뒤로 갔으면 하면 그 도형 이름을 뒤로 땡겨놓으면

    됩니다! 

속성 복붙

 

5. 고정 위치  Rular (자)로 지정 

-  눈 위치와 입 모양을 동일하게 가져가기 위함입니다. 

- 위에 눈금선에 마우스를 대면 끌어다 내릴 수 있는 아이콘으로 변경됩니다. 그 때 줄을 당겨서 지정 위치에 둡니다. 

곰 기본 과 곰 화남의 눈과 입의 위치는 동일함.

6. 표정 만들기 

- 자로 표시된 자국 그대로 art 눌러서 옆에다 복사합니다. 

- 지정 위치 안에서 화난 눈, 선글라스 등 여러 캐릭터 모양을 만들면 됩니다. 

- 저는 이 때가 제일 재밌었어요~~ 신나게 표정 만드시면 됩니다 ㅎㅎㅎㅎㅎ 

 

7. 발행 

- 프레임을 전체 선택합니다. ( 프레임 이름 클릭 또는 프레임 드래그) 

- 오른쪽 바 맨 아래에 Export 에서 현재 프레임크기에서 배수 선택 

- 파일형식 선택 

- 버튼 클릭! 위치 저장! 

 

 

나만의 캐릭터 끝!

 

피그마가 포토샵보다 훨씬 쉬운 듯합니다. 

다음에도 피그마의 여러 기능들을 소개해보겠습니다. 

 

저는 이 피그마로 앱까지 만들어보는 것을 목표로 현재 하고 있습니다! 

돈이 될지는 모르겠지만..어쨌든 뿌듯하고 만족스럽습니다. 

 

모두 화이팅!!! 

 

피그마 다운로드 (클릭)

Figma Downloads | Web Design App for Desktops & Mobile