캐릭터를 활용한 이모티콘 제작 노하우
애니메이션 네 가지 기본 이론
1. Squash & Stretch
- 애니메이션 제작에 있어 가장 중요하고 기본이 되는 원리
- 애니메이션에 등장하는 모든 오브젝트들은 움직이는 동안 늘어나고 줄어드는 것을 반복
- Squash & Stretch의 정도에 따라 무거운 혹은 가벼운 오브젝트인가를 확인할 수 있으며, 이것이 적절하게 활용되면 자연스러운 움직임이 가능
2. Anticipation
- 동작은 ‘동작준비 – 동작 – 동작마감’ 총 3단계로 이루어져 있다고 볼 수 있는데, 이 중 ‘동작 준비’ 단계에 해당
- 자연스러움을 위해 ‘anticipation (사전준비동작)’이 불어넣어주는 긴장감이 애니메이션에 굉장히 중요한 요소
3. Follow-through
- 주 동작에 연결되는 부수적인 움직임
- 예를 들어, 물건을 던질 때 손의 움직임과 같이 캐릭터에 부착된 옷, 머리, 귀 등이 캐릭터의 움직임에 따라 가는 것
4. Ease-in & Ease-out
- 속도가 빨라지고 느려지는 것
- 어떤 동작이 진행될 때, 속도가 처음부터 끝까지 똑같다면 어색할 수 있기 때문에 속도를 조절하여 자연스러움을 만들어 냄
애니메이션의 기본 원리
애니메이션의 기본 원리는 원화를 잡고, 원화를 쪼개는 동화를 그리는 것이라고 할 수 있습니다. 원화는 키프레임으로 동작의 가장 큰 포인트가 되는 그림을 뜻하고, 동화는 키프레임 사이사이를 쪼개 자연스럽게 연결해주는 그림을 말합니다. 즉 앉았다 일어서는 이모티콘의 경우, 앉고 일어서는 동작 사이사이의 동작들이 동화가 되는 것이라고 볼 수 있습니다.
애니메이션 제작 방법
1. 어떤 이모티콘(애니메이션)을 만들지, 어떤 감정을 표현할지 등의 아이디어를 스케치합니다. (이모티콘의 경우 보통 인사, 감사, 사랑 등의 긍정적 표현이 사용성이 높습니다.
2. 부적절한 레이아웃이 나오지 않도록 정사각형 (360×360 픽셀)캔버스를 만듭니다.
3. Tool 창에서 ‘점선 사각형 도구’ 클릭 후 영역을 클릭하여 전체 복사 및 붙여넣기 ([ctrl+shift+C] + [ctrl+V])를 합니다.
4. Ctrl+T를 눌러 사이즈 조정 설정에 들어가 shift+alt키로, 사이즈를 일정하게 줄인 다음enter키를 눌러 레이아웃을 잡습니다.
5. 썸네일 스케치를 다듬기 위해 연필 느낌 나는 브러쉬를 선택하여 스케치를 잡습니다. (후에 한 번 더 다듬을 것이기 때문에 정교하게 할 필요 없이 형태만 보이게끔 다듬으면 됩니다.)
6. 스케치를 잡았다면 캐릭터 얼굴을 그려줍니다.
7. 폴짝폴짝 뛰는 이모티콘을 제작할 경우 몸통을 움츠렸다가 뛰었다가 하는 모양을 키프레임으로 잡고, 프레임의 숫자에 맞추어 레이어도 같이 생성합니다. (필요 없는 레이어는 삭제합니다.)
8. 앉아있는 그림으로 시작합니다.
9. 다음 이미지 제작을 위해 전 이미지를 참고할 수 있도록 불투명도를 조절합니다.
10. 앉은 그림 후 폴짝 뛰는 그림을 그리는데, 이 때 이목구비 등 다른 부분도 위치를 조정해가며 그리도록 합니다.
11. 방향을 조절하면 이모티콘의 얼굴 및 몸통이 반대 방향으로 움직이는 효과를 줄 수 있습니다. (편집 > 변형 > 가로로 뒤집기)
12. 가로로 뒤집은 그림과 바로 전 동작을 비교해가며 둘이 자연스럽게 이어질 수 있도록 그 사이에 그림을 그려 넣도록 합니다.
13. 동작은 ‘재생’버튼을 클릭하여 확인할 수 있습니다. 이 때 default로 한 프레임 당 5초가 설정되어 있는데, 원하는 대로 길이를 조절할 수 있습니다.
14. 액팅을 반복해서 보고 싶을 경우, 부분의 설정을 ‘한번’이 아닌 ‘계속’으로 설정하여 총 액팅을 확인할 수 있습니다.
15. 중간중간 자연스러움을 더하기 위해 원래 사용했던 레이어를 복사하고 붙여넣기 하여 조금씩 수정합니다. 각 이미지 사이에 새 프레임을 생성해가며 동화를 쪼개서 그리고, 자연스럽게 그림을 연결할 수 있습니다.
16. 모든 동작이 반복될 때마다 루핑을 고려하여 그리면, 새로 그리지 않고 적절한 수로 효과적인 액팅을 표현할 수 있습니다.
17. 라인을 명확히 다듬고 배경 색상까지 설정하면 마무리가 됩니다.
또한, 일러스트레이터에서 스마트 오브젝트를 이용하여 주변에 ‘움직이는 꽃’과 같은 효과, 혹은 텍스트를 삽입할 수도 있습니다. 이와 관련된 자세한 내용은 위의 영상에서 확인하실 수 있습니다.
웨비나 실시간 실습 파일
(이임경 님 / 원현재 님 / 성지민 님1 , 2)
강의: 천혜림