1. 소개
안녕하세요! 저는 "V21e"로 알려졌던 Staviraa입니다.
클립 스튜디오 페인트의 "지우개" 레이어 속성 및 브러시 사용자 지정과 같은 일부 기능을 사용하여 처음부터 애니메이션을 만드는 방법을 보여드리겠습니다. 또한, "자동 보간"과 같은 프로그램 기능을 활용하여 애니메이션용으로 미리 계획되지 않은 이미지를 애니메이션화하는 방법도 보여드리겠습니다.
제가 애니메이션을 만들 때의 방식과 프로그램 내에서 작업할 때의 논리를 설명해 드리겠습니다.
마음에 드셨으면 좋겠습니다!
2. 애니메이션
애니메이션은 움직이지 않는 개체에 움직임의 환상을 부여하는 이미지의 빠른 연속입니다. 간단히 말해 착시 현상입니다.
애니메이션은 표현 매체에 시간 요소를 추가하는 것입니다. 시간 요소를 가진 사진? 그것은 비디오 스트립입니다. 실제 조각상이 사진 시퀀스에서 움직임을 시뮬레이션하는 것? 그것은 "스톱 모션" 애니메이션 스타일입니다. 시간과 함께 움직이는 그림? 전통 애니메이션 또는 2D입니다.
작업에 부여되는 "시간"의 차원은 다양한 방식일 수 있습니다.
리처드 윌리엄스의 저서 "애니메이터 생존 키트" (2001)에 따르면, 인간은 애니메이션 영화가 발명되기 전에도 작은 애니메이션 이야기를 전달하기 위해 시간의 차원을 만들어냈습니다. 타우마트로프(영어로 "wonderturner"), 프락시노스코프, 플릭 북 등의 발명으로 ... 몇 가지만 언급하자면 그렇습니다.
✧ 이미지에서 시간을 시뮬레이션하는 도구: 타우마트로프 (1.), 프락시노스코프 (2.), 플릭 북 (3.).
✧ 타우마트로프 작동 방식. 양면에 두 개의 다른 이미지가 있고 디스크 양쪽에 끈 조각이 있는 디스크로 구성됩니다. 위 애니메이션은 다른 속도로 새와 새장 이미지를 보여줍니다. 타우마트로프를 고속으로 돌리면 (왼쪽) 새가 새장 안에 있는 것처럼 보입니다. 저속 애니메이션 (오른쪽)에서는 타우마트로프가 회전할 때 착시 현상 없이 구별할 수 있습니다.
애니메이션 영화 발명 이후, 현재 애니메이션은 모두에게 더 접근하기 쉬운 매체가 되었습니다. 이러한 용이성은 고속으로 이미지를 투사할 수 있는 전자 기기(영화 프로젝터, TV 화면, 컴퓨터, 휴대폰)에 대한 접근성 증가와 Clip Studio Paint와 같이 이러한 매체와 호환되는 애니메이션 제작을 가능하게 하는 소프트웨어의 생성 때문입니다.
Clip Studio Paint에서 일러스트레이션에 "시간"의 차원을 부여하는 방법을 탐구해 봅시다!
✨애니메이션이 인간의 움직임 인식을 속일 수 있는 최소 투사 속도는 초당 24프레임 노출입니다. 이 노출 측정값을 "초당 프레임" 또는 "프레임 레이트" (영어)라고 합니다. 스페인어 번역은 각각 "Fotogramas por segundo" 및 "Velocidad de fotogramas"입니다. 약어는 "FPS"이고 기호는 "f\/s"입니다.
애니메이션에 일반적으로 사용되는 FPS는 다음과 같습니다: 8FPS, 12 FPS, 24FPS, 30FPS, 60FPS… 최대 120FPS까지!
애니메이션에 필요한 FPS가 많을수록 애니메이션은 더 부드럽게 보일 것입니다… 하지만 이는 1초를 완성하기 위해 더 많은 그림을 사용해야 한다는 것을 의미합니다. 애니메이션에 사용하는 FPS 양을 너무 과도하게 사용하지 않도록 주의하세요! 특히 2D 애니메이션이라면요… [웃음]
3. 애니메이션 도구 소개
이 글에서 애니메이션 과정에 있어 저의 기준으로 가장 중요한 도구와 기능을 강조하겠지만, 클립 스튜디오 페인트 애니메이션 모드의 인터페이스에 대한 기본적인 지식은 필수적입니다.
특히 클립 스튜디오 페인트 프로그램 내에서 애니메이션 세계에 처음 발을 들여놓는 분이라면, 다음 글들을 읽어보시는 것을 권장합니다. 프로그램에 더 숙련되었거나 다른 애니메이션 인터페이스를 사용해 보신 분이라면, 이 튜토리얼을 능숙하게 따라가기 위해 읽을 필요가 없을 수도 있습니다. 그래도 의문이 생기면 가볍게 읽어보시는 것을 제안합니다.
제 설명이 여러분의 학습 과정에 도움이 되기를 바랍니다!
》클립 스튜디오 페인트 애니메이션 인터페이스를 자세히 설명하는 글입니다.
새 애니메이션 문서 설정부터 "초당 프레임"과 같은 애니메이션 기본 개념 설명까지 다룹니다.
》프리핸드 애니메이션 및 움직이는 배경을 간단하게 애니메이션화하는 데 특화된 섹션입니다. 여러 부분으로 구성되어 있어 인터페이스에 익숙해지는 데 이상적입니다.
클립 스튜디오 페인트에서 애니메이션으로 무엇을 이룰 수 있는지 보고 싶다면, 바로 여기 클립 스튜디오 페인트 TIPS에서 KevinFarias의 작품을 보는 것을 추천합니다!
그는 설명할 때 매우 완전하고 깔끔한 작품을 선보이며, 특히 서면 기사뿐만 아니라 비디오로도 자신의 창작물을 단계별로 기록합니다. 주저하지 말고 살펴보시고 영감을 얻으세요!
4. 애니메이션 인터페이스
4.1 타임라인
애니메이션을 제작하려면 클립 스튜디오 페인트에 "시간" 차원을 추가해야 합니다. 이는 타임라인을 통해 이루어집니다. 컴퓨터용 클립 스튜디오 페인트에서 타임라인에 접근하는 방법은 두 가지가 있습니다.
첫 번째 방법: 캔버스 왼쪽 하단에 있는 [확대\/축소 슬라이더]로 이동하면 이 기능에 접근할 수 있으며, 이어서 "⯭"(1) 모양을 볼 수 있습니다. 아이콘을 클릭하여 타임라인을 펼칩니다 (2).
클립 스튜디오 페인트 프로그램에서 "⯭"가 있는 이미지 (위) | 타임라인 펼치기 (아래)
타임라인의 상단 가장자리 근처로 커서를 가져가 커서가 "↕"로 바뀔 때까지 화면에서 타임라인의 표시 크기를 변경할 수 있습니다.
타임라인을 숨기려면 "⯯"를 클릭하십시오.
두 번째 방법: 이 기능은 [창]→[타임라인]에서 접근할 수 있습니다.
(아래 이미지).
4.2 타임라인의 기본 애니메이션 도구
타임라인을 펼치면 애니메이션 과정에 도움이 되는 다양한 아이콘을 찾을 수 있습니다.
타임라인에는 애니메이션 셀(6)과 초당 프레임으로 가중된 노출 지속 시간을 관찰할 수 있는 작은 섹션이 있습니다.
애니메이션을 재생하거나 중지할 수 있는 아이콘(1), 애니메이션 시작을 위한 특수 폴더 추가(2), 애니메이션에 새 그림을 그리기 위한 셀 추가(3), [어니언 스킨] 사용(4), 그리고 [자동 보간]에 접근할 수 있는 아이콘이 있습니다.
타임라인이 비어 있는 경우(처음부터 애니메이션용으로 설정되지 않은 .clip 문서에서 흔함) [새 타임라인] 아이콘(8.)을 사용하여 문서에 "시간" 차원을 추가할 수 있습니다.
✧ 타임라인 활성화 단계. [새 타임라인] (1)을 클릭합니다. 타임라인의 특징을 포함하는 팝업 창이 나타납니다 (2).
✧ 타임라인 팝업 창에서 애니메이션 셀의 속도 [FPS]와 애니메이션 시작을 위해 원하는 총 셀 수(3)를 사용자 지정할 수 있습니다. 이 데이터에 만족하면 [수락](4)을 클릭합니다.
처음부터 애니메이션용으로 새 파일을 생성하면 "타임라인 활성화" 단계는 생략됩니다.
참고: Clip Studio Paint Pro에서는 총 24프레임만 작업할 수 있습니다. Clip Studio Paint EX에서는 총 24프레임 이상 작업할 수 있습니다. FPS는 두 버전 모두에서 사용자 지정 가능합니다.
✧ 준비 완료. 타임라인이 활성화되었습니다!
타임라인과 레이어 표시 영역 사이에는 상관관계가 있습니다. (아래 이미지)
✧b. 레이어 표시 영역의 애니메이션 폴더와 타임라인 간의 상관관계가 표시됩니다. 이는 다른 색상으로 표시됩니다. | a. 레이어 표시 영역의 레이어 표시와 타임라인 간의 상관관계가 표시됩니다.
4.3 애니메이션 폴더, 프레임 및 어니언 스킨
타임라인의 \u005c[애니메이션 폴더\u005c] 내의 레이어는 \u005c[프레임\u005c]으로 변환됩니다. 하지만 일반 레이어처럼 작업합니다.
타임라인 폴더 밖에 있는 레이어에서 작업하면 애니메이션을 만들 수 없습니다.
새로운 [애니메이션 폴더]를 추가하려면 단순히 아이콘을 클릭하면 됩니다.
애니메이션 폴더가 타임라인과 레이어 표시 영역에 펼쳐집니다.
타임라인에 프레임을 추가하는 방법은 두 가지가 있습니다.
첫 번째 방법은 새 프레임을 추가하는 아이콘을 클릭하는 것입니다.
이 동작은 타임라인과 레이어 표시 영역에 반영됩니다.
두 번째 방법은 타임라인에서 프레임을 추가하려는 영역을 선택하는 것입니다. 선택 영역은 타임라인의 빨간색 선으로 표시됩니다.
그 다음 [마우스 오른쪽 버튼 클릭] → [새 애니메이션 셀]입니다.
다른 프레임을 추가하려면 두 과정 중 하나를 반복하면 됩니다.
추가된 프레임은 자동으로 1, 2, 3, […]로 이름이 지정됩니다. 두 키프레임 사이에 프레임을 추가하면 프레임 번호에 문자가 추가되어 나타나는 경우가 많습니다. 예: 1a, 1b, 1c […] (아래 이미지)
프레임 크기를 이동하려면 타임라인에서 프레임 사이의 슬롯을 선택할 수 있습니다. 그러면 빨간색으로 바뀝니다. 그런 다음 커서를 드래그하여 원하는 위치로 프레임을 이동합니다.
여러 프레임을 동시에 선택하여 이동할 수도 있습니다!
프레임을 삭제하려면 해당 프레임 위에서 [마우스 오른쪽 버튼 클릭] → [삭제]를 누르면 됩니다.
[어니언 스킨]은 선택한 프레임의 이전 및 이후 그림을 볼 수 있게 해줍니다. 이를 통해 중간 프레임을 더 일관성 있게 애니메이션화할 수 있습니다. 다음 애니메이션에 표시된 것처럼 아이콘을 클릭하여 활성화 및 비활성화합니다.
4.4 자동 보간
보간은 정적인 이미지나 전체 애니메이션을 매우 간단하게 애니메이션화할 수 있도록 합니다. 이 도구의 존재는 작업 흐름을 크게 가속화합니다.
예를 들어, 나비의 날갯짓에 대한 완전한 애니메이션이 있다면, 나비 애니메이션을 다시 그릴 필요 없이 공중에서의 경로를 애니메이션화할 수 있습니다.
자동 보간은 개체나 애니메이션의 위치를 이동하는 것에 국한되지 않습니다. 확대/축소(1), 개체의 축 회전(2), 불투명도(3)도 애니메이션화할 수 있습니다! (아래 이미지 참조)
이 모든 특성을 하나의 애니메이션 또는 이미지에서 애니메이션화할 수 있습니다. 약간의 창의력만 있다면 무엇이든 가능합니다! 이 기능을 사용하려면 애니메이션의 최종 단계에서 사용하는 것을 제안합니다.
이 기능을 활성화하려면, 자동 보간을 위해 키를 활성화하려는 폴더에 있어야 합니다. 이어서 [타임라인] → [이 레이어에 키 활성화] 막대로 이동합니다. (아래 이미지).
타임라인에서 애니메이션할 폴더의 하단에 작은 삼각형 모양이 나타나 타임라인이 애니메이션 키를 삽입할 준비가 되었음을 나타냅니다. 레이어 표시 영역에서 애니메이션할 폴더에는 연필 아이콘과 자물쇠가 나타납니다.
자동 보간으로 애니메이션할 새 키프레임을 추가하려면 [마우스 오른쪽 버튼 클릭] → [키 삽입]을 클릭합니다. 키프레임은 지정된 프레임(타임라인의 빨간색 선)에 나타납니다. 프레임 위에 마름모꼴이 나타납니다. (아래 이미지)
폴더의 위치를 편집하려면 [도구] → [보조 도구 작업] → [개체]로 이동해야 합니다.
[개체] 보조 도구를 사용하면 이미지 변형 컨트롤러가 나타나므로 폴더 내 개체의 위치, 불투명도 및 회전을 매우 쉽게 편집할 수 있습니다. (아래 이미지)
[도구 속성] -보조 도구 창 아래-에서 애니메이션할 측정값과 특성이 반영된 것을 볼 수 있습니다. 애니메이션할 특성 이름 옆에 사각형 안에 마름모가 있기 때문에 활성화된 것을 볼 수 있습니다. [도구 속성] 내에서 애니메이션으로 고려되지 않은 기능에 키를 추가하려면 해당 사각형을 클릭하면 됩니다. (아래 이미지)
정보가 포함된 키프레임을 삭제, 잘라내기, 복사 또는 붙여넣기 하려면 타임라인에서 키프레임 위에 커서를 놓고 [마우스 오른쪽 버튼 클릭] → [삭제\/잘라내기\/복사\/붙여넣기]를 선택하십시오. (아래 이미지)
팝업 창에서 [프레임 삽입…] 또는 [프레임 삭제…]를 사용하면 타임라인의 프레임을 삭제하거나 추가하는 것이지, 자동 보간 키프레임이 아닙니다.
타임라인 포인터(빨간색 선)를 삭제하려는 키프레임(1) 위에 놓고 [키 삭제](2)를 클릭하여 자동 보간 키프레임을 삭제할 수도 있습니다. (아래 이미지)
애니메이션 폴더 내의 콘텐츠를 다시 편집하고 싶으신가요? [이 레이어에 키 활성화]를 클릭하여 자동 보간 키프레임을 비활성화하거나 [활성화된 키로 레이어 편집](아래 이미지)을 클릭할 수 있습니다. 어떤 것을 사용하셔도 좋습니다.
✨- 라인아트, 기본 채색, 명암을 위한 여러 애니메이션 레이어가 있습니다. 자동 보간으로 이 모든 것을 함께 애니메이션화하려면 어떻게 해야 하나요?
-모든 애니메이션 레이어를 레이어 뷰어 내의 일반 폴더에 넣어야 합니다. 해당 일반 폴더가 선택되었는지 확인한 다음 [이 레이어에 키 활성화]를 클릭합니다. 일반 레이어는 타임라인과 레이어 뷰어 모두에서 애니메이션 준비가 된 상태가 됩니다. 마지막 단계는 타임라인 내의 일반 폴더에 키프레임을 삽입하는 것입니다… 그러면 끝입니다! 여러 애니메이션 폴더를 한 번에 작업할 수 있습니다.
이미지와 함께 단계별로 보려면 “7.7 특수 효과” 섹션을 참조하십시오.
4.5 애니메이션 단축키 설정
키보드 단축키는 컴퓨터나 휴대폰에서 작업을 가속화하는 데 매우 유용합니다. 이전 작업으로 돌아가는 "Ctrl+Z"나 선택한 항목을 복사하는 "Ctrl+C"와 같은 유명한 키보드 단축키가 있습니다. 키보드 단축키를 설정하거나 아는 것은 Clip Studio Paint를 사용할 때 우리의 경험을 사용자 지정하고 더욱 즐겁게 만드는 데 중요합니다.
애니메이션 과정을 위해 새로운 키보드 단축키 2개를 설정하는 것을 제안합니다: 이전 키 와 다음 키.
이는 타임라인에서 키프레임 간의 이동에 대한 동적인 제어를 가질 수 없어 발생하는 문제와 정체감을 피할 수 있습니다.
키보드 단축키를 사용자 지정 방식으로 설정하려면 [파일]→[단축키 설정]에서 이 기능에 접근할 수 있습니다. (아래 이미지).
이어서 팝업 창이 나타납니다. 이 창 안에는 Clip Studio Paint에서 키보드 단축키를 사용자 지정할 수 있는 카테고리와 하위 카테고리가 있습니다.
[이전 키]와 [다음 키] 작업을 사용자 지정하려면 이 창에서 [애니메이션]→[프레임 이동]으로 이동해야 합니다. 이 하위 카테고리에서 [이전 키]와 [다음 키]를 찾을 수 있습니다.
저는 [이전 키]와 [다음 키]에 기억하기 쉽고, 자주 사용하지 않으며, 서로 바로 이웃한 키보드 단축키를 할당하는 것을 제안합니다. 저는 [이전 키]에 "." 키를, [다음 키]에 "-" 키를 사용합니다. 이들은 키보드 화살표 바로 옆에 있으며 기억하기 쉽습니다.
4.6 애니메이션 모드에 익숙해지기 위한 제안
이전에 다룬 모든 것을 고려할 때, 새 문서를 열고 간단한 것을 애니메이션화하려고 시도하면서 프로그램을 가지고 놀아보는 것을 제안합니다… 말 그대로 낙서일 수도 있습니다! 중요한 것은 도구에 익숙해지고 프로그램 내에서 어떻게 더 편안하게 작업할 수 있는지 확인하는 것입니다.
메모를 하고, 시간을 들이세요… 그 후에는 애니메이션을 만들 준비가 된 것입니다!
5. 애니메이션 제작 과정
이 섹션은 애니메이션 과정이 어떤지, 그리고 이 글에서 정확히 무엇을 다루고 작업할 것인지를 알려드리기 위해 작성했습니다.
업계 내 애니메이션 제작 과정은 학교 프로젝트 애니메이션이나 재미를 위한 개인 애니메이션 제작 단계와 상당히 다를 수 있습니다.
제 생각에는 각 과정의 차이는 프로젝트 제작 의도(산업 엔터테인먼트, 학교 졸업 프로젝트, 공모전 발표, 개인 프로젝트), 현재 자원(작업자, 급여, 시간 제약, 다양한 애니메이션 프로그램 교육)으로 프로젝트를 효율적으로 만들기 위한 필요한 조직 수준, 그리고 최종 결과(개인 만족, 품질, 금전적 보상 등)에 따라 달라집니다.
애니메이션 제작의 일반적인 단계는 다음과 같습니다:
-기획: 개념 또는 아이디어 선택, 캐릭터 디자인, 대상 파악.
-디자인: 시나리오 작성, 스토리보드, 레이아웃, 캐릭터 및 배경 디자인.
-애니메이션: 애니메이션 참고 자료, 키프레임 생성, 중간 프레임(인비트윈), 채색, 조명.
-후반 작업: 편집, 특수 효과, 수정 및 오디오.
이 글에서는 짧은 애니메이션을 만들기 위해 기획 영역과 애니메이션 자체 부분만 조금 다룰 것입니다… 나머지 단계는 필요 없습니다! 3초짜리 애니메이션을 위해 스토리보드가 필요하거나 캐릭터가 움직이지 않을 때 캐릭터 시트가 필요하지 않습니다… 그것은 더 긴 애니메이션 프로젝트에서 사용하는 것이 좋습니다.
이 글에서는 약간의 창의력, 무엇을 작업하고 싶은지에 대한 명확성… 그리고 물론 클립 스튜디오 페인트를 사용하는 방법을 아는 것이 필요합니다!
명확성에 대해 이야기했으니, 이제…에 대해 이야기해 봅시다.
6. 애니메이션 기획을 위한 방법, 제안 및 중요 사항
무엇을 애니메이션하고 싶으신가요? 어떻게 계획하고 계신가요?… 우리가 아는 도구로 애니메이션을 더 간단하게 만들기 위해 무엇을 할 수 있을까요? 이 글의 이 섹션을 통해 이러한 질문에 대한 답을 찾는 데 도움이 되기를 바랍니다.
여기서는 드로잉 프로그램, 비디오 편집 프로그램, 애니메이션 제작, 특수 효과 추가를 위한 후반 작업 프로그램 사용 경험이 매우 유용할 것입니다. 특히 프로젝트를 조직하는 방법에 대한 경험이 더욱 그러합니다.
✧ 예술가의 마음속에 애니메이션 또는 그림 프로젝트가 어떻게 시각화되는지에 대한 설명 이미지.
디지털 프로그램으로 그림을 처음 그리는 사람들은 모든 것을 같은 레이어에 그리는 것이 일반적입니다. 그러나 시간이 지남에 따라 경험과 약간의 기술 탐색을 통해 우리의 작업 흐름은 더욱 정교해집니다. 배경은 한 레이어에서 작업하고, 주요 캐릭터는 다른 레이어에서 작업하며; 그림의 선화 채색은 별도로 작업하고, 세부 사항은 마지막에 추가됩니다. 이러한 작업 흐름은 논리적일 수 있지만, 디지털 드로잉의 세계를 처음 발견했을 때는 작업을 효율적으로 처리하기 어려울 수 있습니다. 애니메이션을 아는 것도 마찬가지입니다. 그래서 애니메이션, 드로잉 또는 편집 경험이 여기서 중요합니다!
애니메이션 폴더는 일반 레이어와 동일한 속성을 가지므로 그림을 애니메이션 폴더로 나누어 각 부분을 별도로 작업할 수 있습니다.
클립 스튜디오 페인트의 애니메이션 도구로 가능한 몇 가지는 다음과 같습니다:
프레임별로 애니메이션을 만들고(1) 그 애니메이션에 자동 보간을 추가할 수 있습니다(2). 이는 걷거나 유령과 같은 비행하는 존재에 상당히 도움이 될 수 있습니다. 정지 이미지를 제시하고 그 위에 애니메이션 폴더에서 프레임별로 애니메이션을 만들 수 있습니다(3). 이는 바람에 흔들리는 머리카락이나 가벼운 옷을 애니메이션화하려는 경우에 매우 유용합니다. 최소한의 노력으로 애니메이션을 만들고 싶다면 정지 이미지를 자동 보간으로 애니메이션화할 수 있습니다(4). 인사하는 소녀와 같은 간단한 기능으로도 매우 멋진 결과를 얻을 수 있습니다. 또한 다른 시간에 두 가지 애니메이션을 만들 수도 있습니다(5). 이는 매우 단순하지만 시각적으로 매력적인 반복 애니메이션을 만드는 데 도움이 됩니다.
이것들은 단지 몇 가지 예시일 뿐입니다… 애니메이션 폴더를 정리하고 클립 스튜디오 페인트 도구를 다루는 방법을 아는 것이 창의력을 최대한 발휘하는 데 도움이 될 것입니다.
다음 애니메이션을 어떻게 만들었는지 식별하거나 상상할 수 있나요?
7. 애니메이션 스타일 제작 과정
이 섹션에서는 제 애니메이션 과정을 처음부터 끝까지 공유합니다. 저의 개인적인 애니메이션 팁(명암을 구분하기 위한 가이드 라인 사용법 포함)과 함께 클립 스튜디오 페인트 브러시 설정으로 채색 과정을 더 명확하고 간단하게 만드는 방법을 알려드릴 것입니다.
추가적으로, 애니메이션에서 사용되는 구멍 뚫린 종이를 시뮬레이션하는 흰색 시트를 만들었습니다. 이 이미지는 미적인 목적으로만 사용됩니다. 사용을 원하는 분들을 위해 링크를 첨부합니다. Clip Studio Paint ASSETS에서 무료로 제공됩니다.
더 이상 할 말 없이, 마음에 드셨으면 좋겠습니다!
7.1 애니메이션 아이디어
애니메이션 제작 과정의 이 단계에서는 애니메이션화하고 싶은 아이디어를 구체화합니다.
제 경우, 매우 간단한 것을 애니메이션하고 싶습니다. 멋진 젊은이가 한 포즈에서 다른 포즈로 바뀌면서 몸에 있는 리본을 약간 제거하는 약 2초 길이의 애니메이션입니다. (아래 이미지 참조)
일반적으로 아주 짧은 애니메이션(몇 초 길이)의 경우, 애니메이션 제작 전의 일부 준비 과정(예: 캐릭터 시트, 시나리오, 스토리보드 등)을 건너뛸 수 있습니다. 프로젝트의 규모를 파악하고 사전 데이터가 관련성이 있는지 판단하세요. 제 경우 이 프로젝트에서는 캐릭터의 옷 색깔과 어떤 움직임을 할 것인지 아는 것만으로도 충분했습니다.
7.2 작업 공간 준비
필요한 참고 자료를 가까이 두고, 작업 공간을 깨끗하게 유지하며, 작업에 도움이 될 추가 요소를 갖추는 것입니다. 이 단계를 어떻게 수행할지는 각자에게 달려 있습니다!
제 경우, 애니메이션용 색상 팔레트, 물 한 잔, 그리고 영감을 받아 행복하게 작업하기 위한 헤드폰을 준비했습니다.
7.3 키프레임 스케치
이 단계는 키프레임을 그리고 그 경계를 정하는 것으로 구성됩니다.
저는 애니메이션 문서에서 두 개의 애니메이션을 별도로 만들었습니다. 하나는 손 애니메이션을 위한 애니메이션 폴더에, 다른 하나는 소년 애니메이션을 위한 애니메이션 폴더에 만들었습니다.
✧ 타임라인이 있는 애니메이션. 보라색 애니메이션 폴더: 손 애니메이션. 파란색 애니메이션 폴더: 소년 애니메이션.
키프레임 스케치를 위해 클립 스튜디오 페인트의 기본 도구인 G펜 (크기 5.0)과 연필, 샤프펜슬을 사용하여 애니메이션 스케치 (크기 5.0)를 만들었습니다. 이 그림들은 스케치일 뿐이므로 애니메이션의 가장자리와 일부 섹션은 다듬어지지 않았습니다. 그러나 가능한 한 깔끔하게 선화가 있을 부분을 구분하려고 노력했습니다.
밝은 영역은 빨간색 선과 노란색 영역 채우기로 표시했고, 그림자는 파란색 선과 약간 더 어두운 색상의 영역 채우기로 표시했습니다. 흰색으로 남겨둘 영역(애니메이션에서 채색되지 않은 영역)은 큰 빨간색 "X"로 표시했습니다.
7.4 키프레임
이 단계는 애니메이션 그림에 깔끔한 선화를 만드는 것입니다.
깔끔하다는 것은 브러시 가장자리에 안티앨리어싱이 없고 선 두께가 최대한 균일한 선화를 의미합니다.
✧ 깔끔한 선화로 완성된 애니메이션. 키프레임 사이의 중간 프레임도 애니메이션화했습니다. G펜 2.0 사이즈로 선화했습니다.
이러한 마무리를 얻기 위해 G펜과 가장 강한 지우개의 도구 속성을 약간 변경했습니다. 간단하게 할 수 있는 과정입니다.
브러시의 가장자리 매끄럽게 하기를 변경하려면, [도구 모음]→[펜 (1.) \/지우개]→[보조 도구: G펜 (2.)\/강한 지우개] 선택→[도구 속성](3.)→[매끄럽게 하기]→[없음] 선택 (4.)으로 이동해야 합니다. (아래 이미지)
가장자리 매끄럽게 하기 속성은 4단계로 사용자 지정할 수 있습니다: 없음, 약함, 중간, 강함. 매끄럽게 하기 수준이 높을수록 브러시 가장자리가 더 흐릿하게 보입니다. 반면 매끄럽게 하기 수준을 낮추면 브러시 가장자리가 원래 모양에 의해 더 명확하게 구분됩니다.
브러시 속성을 원래 상태로 되돌리고 싶고 브러시가 원래 어떻게 설정되었는지 기억나지 않는다면, [도구 속성] 창에서 [선택한 보조 도구 설정 복원]을 클릭하면 됩니다. (아래 이미지)
나중에 채색 작업을 더 쉽게 할 수 있도록 이 브러시 설정을 제안합니다.
7.5 명암 가이드라인
✧ 가이드 라인이 있는 애니메이션. 파란색 선은 그림자를 구분하기 위한 것이고, 빨간색 선은 빛을 구분하기 위한 것입니다. 교육적 기능을 위해 색상 채우기가 있습니다.
이 단계에서는 애니메이션 내에서 빛과 그림자의 위치를 나타내는 가이드 라인을 그리는 데 집중할 것입니다.
빛과 그림자를 구분하기 위한 전용 새 애니메이션 레이어를 생성해야 합니다. 빛과 그림자를 구분하기 위한 레이어는 선화 애니메이션 폴더 아래에 배치할 것입니다. (아래 이미지)
✧ 애니메이션을 위한 레이어 위치. 1. 선화 레이어. 2. 명암 경계 레이어.
이 선화를 만들려면 “7.4 키프레임” 섹션에서 제안한 브러시 설정을 계속 따라야 합니다. 시간을 들여야 합니다. 제가 했던 것처럼 너무 정교하게 만들려고 하지 마세요 [웃음}. 때로는 프로젝트에 너무 흥분할 수도 있습니다.
최종 결과는 다음과 같아야 합니다:
7.6 채색
✧ 애니메이션의 완전히 채색된 프레임 중 하나입니다.
애니메이션 제작 과정의 이 단계에서 우리는 작업이 "생명을 얻는" 것을 보게 될 것입니다. 깔끔하고 체계적으로 작업하면 이 부분을 쉽게 작업할 수 있습니다.
선화 애니메이션 폴더와 명암 가이드 라인 애니메이션 폴더 사이에 새로운 애니메이션 폴더를 추가해야 합니다. 이 애니메이션 폴더는 채색을 위한 것입니다.
✧ 레이어 순서 일러스트. 선화 애니메이션 폴더 (빨간색), 채색용 애니메이션 폴더 (노란색), 명암 참고선용 애니메이션 폴더 (보라색).
새로운 채색용 애니메이션 폴더를 추가했으므로, [도구 모음] → [채우기] (1.) → 보조 도구 [다른 레이어 참조] (2.) → [도구 속성] (3.) → [영역 확장] 비활성화 (4.)로 이동합니다.
레이어 확장 기능은 채우기 도구가 영역을 "과도하게 채우는" 것을 허용합니다.
이것은 만화나 일러스트를 채색할 때 유용한 기능입니다. 이번 경우에는 깔끔하고 가는 선화를 가지고 있으므로 이 기능을 비활성화하는 것을 제안합니다. 작업 흐름에서 선호하고 좋아하는 경우가 아니라면 사용할 필요가 없습니다.
또한 채우기 도구의 [간격 닫기] 속성을 비활성화하는 것을 제안합니다. (아래 이미지)
이 속성은 선 사이의 공간 존재에 대한 허용 오차를 허용합니다. 넓은 허용 오차일 수도 있고 (왼쪽 이미지) 매우 최소한의 허용 오차일 수도 있습니다 (오른쪽 이미지).
이번에는 작업 흐름을 방해할 수 있으므로 이 기능을 비활성화하는 것을 제안합니다… 솔직히 말해서 이 기능이 유용합니까? 그렇다면 사용하세요! 중요한 것은 그것이 당신에게 도움이 되고 작동하는 것입니다.
참고로, [선택한 보조 도구 설정 복원]을 클릭하여 언제든지 도구를 원래 상태로 재설정할 수 있습니다. (아래 이미지)
이러한 변경 사항이 적용된 후, -색상용 애니메이션 레이어에서- 빛이나 그림자의 영향을 받지 않는 캐릭터의 기본 색상 영역을 채우기 시작합니다.
제 애니메이션의 한 프레임 예를 보여드립니다.
다소 이상해 보일 수 있지만, 이렇게 보여야 합니다.
기본 색상 채색을 마쳤으므로, 레이어 뷰어로 이동하여→[명암 경계를 지정하는 데 사용한 애니메이션 폴더를 선택] (1.) →[레이어를 스케치로 설정] 활성화 (2.) 합니다. 애니메이션 폴더 -프레임과 함께-에 파란색 선 (3.)이 나타나 스케치 기능이 활성화되었음을 나타냅니다.
스케치 속성을 가진 폴더나 레이어를 설정하는 목적은 무엇인가요? 음, 저는 두 가지 기능만 알고 있습니다. 아마 더 많은 기능이 있을 수 있지만, 제가 공유할 수 있는 것은 이것들입니다.
첫 번째 기능은 최종 렌더링에 나타나지 않는다는 것입니다. 만화를 그리고 있다면, 전통 스캔/스케치를 스케치 레이어에 넣고 다른 레이어에 선화를 그릴 수 있습니다. 이미지를 내보내면 전통 스캔/스케치는 최종 결과물에 나타나지 않을 것입니다.
제가 아는 두 번째 기능은 스케치 속성을 가진 어떤 레이어나 폴더도 프로그램 도구에 의해 "보이지 않거나" 무시되지만, 화면에는 계속 표시된다는 것입니다.
이것이 무슨 소용이 있냐구요? 음…
애니메이션의 경우, 명암을 간단하게 채색하는 것입니다. (사실, 이 속성과 적용을 발견한 것이 이 튜토리얼을 만들게 된 동기가 되었습니다 [웃음] )
1픽셀 크기의 아주 작은 채색되지 않은 영역에 문제가 있다면, [채우기] 도구 (1.) 에 보조 도구 [채색되지 않은 영역 그리기] (2.) 가 있습니다.
그 기능은 매우 간단합니다. 원하는 색상으로 채우고 싶은 영역에 브러시를 지나가게 하세요. 끝! 문제가 해결되었습니다.
이제부터는… 인내심과 채색이 필요합니다.
7.7 특수 효과
여기서는 [자동 보간]으로 애니메이션을 만들거나, 메이크업이나 추가 조명을 추가하는 등 최종 디테일을 추가하는 데 집중했습니다.
✧ 최종 결과물.
캐릭터에게 블러셔를 추가하기 위해 새로운 애니메이션 폴더를 만들고 수동으로 메이크업을 그렸습니다. 블러셔와 입술에 강렬한 붉은색을 사용했습니다. 모든 것은 에어브러시 도구로 작업되었습니다.
✧ 제 작업 과정의 스크린샷.
색상이 너무 강렬해서 애니메이션 폴더의 불투명도를 낮춰 메이크업이 좀 더 자연스럽게 보이도록 했습니다. 애니메이션 폴더의 불투명도를 변경하면, 그 설정은 해당 폴더에 속한 모든 프레임에 영향을 미칩니다. (아래 이미지)
이 과정의 마지막 단계에서 저는 약간의 빛도 추가하고 싶었습니다. 소년의 몸을 구성하는 애니메이션 폴더(선화, 채색, 블러셔)를 일반 폴더로 그룹화\/넣고 "Boy" 또는 영어로 chico라고 이름을 붙였습니다. (빨간색 폴더) 이어서, 제가 추가하고 싶은 빛을 위한 새로운 애니메이션 레이어 (노란색 폴더)와 그 안에 새로운 프레임을 추가하여 작업했습니다. 에어브러시와 밝은 노란색 톤으로 캐릭터가 빛나기를 원하는 영역을 추가했습니다. (아래 이미지)
애니메이션 폴더는 일반 레이어와 그 속성처럼 사용할 수 있습니다. 제가 추가한 노란색은 불투명도를 낮추면 빛으로 사용될 수 있었지만, 저는 그 효과가 마음에 들지 않았습니다.
다른 레이어와의 색상 상호 작용 모드를 개선하기 위해 레이어 뷰어로 이동하여 -애니메이션 폴더가 선택된 상태에서- → [혼합 모드]를 선택했습니다.
마음에 드는 조명 모드를 찾았으므로 애니메이션 폴더 전체의 불투명도를 낮췄습니다. 이것이 제 결과였습니다.
✧ 초기 이미지. 조명용 애니메이션 폴더 불투명도 0% (오른쪽), 최종 이미지. 조명용 애니메이션 마스크 불투명도 18%. 혼합 모드 "오버레이 (밝기)" (왼쪽).
비록 멋진 결과를 얻었지만, 빛이 배경에 영향을 미치지 않고 캐릭터에만 영향을 미치도록 하고 싶습니다. 캐릭터의 조명을 손으로 직접 그릴 필요 없이, 오직 캐릭터만 조명하려면 쉽고 간단하게 [레이어 뷰어]로 이동합니다. 소년의 몸 전체 애니메이션이 있는 레이어가 조명 레이어 아래에 있는지 확인한 다음 → 조명 폴더를 선택 → [아래 레이어에 클리핑] (아래 이미지)을 클릭합니다.
[아래 레이어에 클리핑] 기능은 무엇인가요? 아래 레이어의 픽셀에 맞춰지는 기능입니다. 예를 들어, 한 레이어에 캐릭터의 실루엣이 있고 다른 상위 레이어에 붓질을 추가하면 다음 이미지처럼 보일 가능성이 높습니다. (아래 이미지)
✧ 레이어와 선 간의 상관관계. 파란색 레이어, 배경. 색상 없는 레이어, 캐릭터 실루엣. 보라색 폴더, 분홍색 선.
선이 있는 레이어에서 [아래 레이어에 클리핑]을 활성화하면, 이 선은 캐릭터의 형태에 달라붙을 것입니다. 레이어에서 [아래 레이어에 클리핑]이 활성화되면 해당 레이어에 빨간색 줄이 보입니다. (아래 이미지)
매우 유용한 기능입니다. 레이어와 전체 폴더는 물론 애니메이션 폴더 및 3D 문서에서도 작동합니다!
제 애니메이션 문서에서 [아래 레이어에 클리핑] 기능이 어떻게 보이는지 보여드립니다.
캐릭터 손에 세부 묘사와 조명을 추가하기 위해 캐릭터 팔 전용의 별도 애니메이션 레이어를 만들었습니다.
마지막으로, 캐릭터의 팔 전체에 약간의 움직임을 추가하기로 결정했습니다. (아래 이미지)
✧ 원본 팔 애니메이션 (위).
✧ 자동 보간을 적용한 팔 애니메이션.
완전한 애니메이션 조각(선화, 채색, 수정, 조명 등 모든 구성 요소를 포함하는 팔과 같은)을 이동하려면 모든 애니메이션 폴더를 모든 애니메이션을 포함하는 일반 폴더에 넣어야 합니다.
✧ 제 작업 공간의 일부 스크린샷. 노란색 애니메이션 레이어는 소년의 팔을 구성하는 부분입니다. 녹색 폴더는 캐릭터 팔의 모든 애니메이션 폴더를 함께 유지하는 폴더입니다.
이 글의 "4\u005c.4 자동 보간" 섹션에서 설명했듯이, 이 단계를 수행한 후 -일반 폴더에 있는 동안- [이 레이어에 키 활성화}]로 이동합니다. 타임라인에서 폴더 하단에 작은 삼각형 모양이 나타나 타임라인이 애니메이션 키를 삽입할 준비가 되었음을 나타냅니다. 레이어 표시 영역에서 애니메이션할 폴더에는 연필 아이콘과 자물쇠가 나타납니다. (아래 이미지)
타임라인에서 포인터를 일반 폴더(녹색) 섹션에 위치시키고 [마우스 오른쪽 버튼 클릭]→[키 삽입]을 클릭합니다. 타임라인에 파란색 마름모가 나타납니다. (아래 이미지)
[개체 도구]를 사용하여 애니메이션의 위치를 편집합니다. (아래 이미지)
제 경우, 팔이 있는 초기 위치가 마음에 듭니다. 움직임을 추가하기 위해 애니메이션의 마지막 프레임에 다른 키프레임을 추가합니다. 이어서 팔이 움직임을 마치기를 원하는 곳에 팔을 배치합니다. (아래 이미지)
그리고 끝입니다! 우리 캐릭터의 팔에 약간의 자동 보간 애니메이션이 적용되었습니다.
몇 가지 조정, 작은 세부 사항 및 수정으로 완성되고 볼만한 애니메이션이 완성되었다고 말할 수 있습니다.
7.8 내보내기
애니메이션을 .mp4 형식으로 내보내려면 [파일] → [애니메이션 내보내기] → [동영상] (아래 이미지)으로 이동해야 합니다.
파일 이름을 지정하고 저장할 위치를 선택합니다. [저장]을 클릭합니다.
이어서 팝업 창이 나타납니다. 내보낼 FPS 속도를 사용자 지정할 수 있습니다 (1).
12 FPS로 애니메이션을 만들었는데 더 높은 속도(예: 24 FPS)로 내보내기로 결정하면 애니메이션이 더 빠르게 보일 수 있으므로 주의하십시오! 이것은 의도하지 않은 경우 작업에 부정적인 영향을 미칠 수 있습니다. 애니메이션을 만든 것과 동일한 속도로 내보낼 것을 제안합니다.
설정 선택을 마쳤으면 확인을 클릭합니다.
이제 애니메이션이 준비되었습니다!
8. 완성된 이미지 애니메이션화
아무리 작은 애니메이션이라도 항상 눈에 띕니다. 애니메이션은 우리 작품에 새로운 생명의 차원을 부여합니다. 또한, 보는 것만으로도 매우 만족스럽습니다.
이 글의 이 부분에서는 완성된 이미지를 어떻게 애니메이션화하는지 보여드리겠습니다. 제가 가장 좋아하는 그림 중 하나입니다. 오래된 그림입니다. 제 그림은 선화가 없고 붓놀림을 시뮬레이션한 채색이 되어 있습니다. 흥미로운 도전이 될 것입니다.
여러분의 그림을 애니메이션으로 장식하는 데 영감을 주기를 바랍니다.
✧ Staviraa의 “Just is”. 2021.
8.1 무엇을 애니메이션하고 싶은가요?
“캐릭터의 트렌치코트가 해변 바람에 휘날리는 모습을 애니메이션하고 싶습니다. 또한 바다에 햇빛이 반짝이는 모습과 배경에 갈매기가 날아다니는 모습을 추가하고 싶습니다. 애니메이션이 다소 거친 느낌이 들었으면 좋겠습니다. 이 모든 요소들이 그림 스타일에 잘 어울릴 것이라고 생각합니다.”
8.2 이미지 준비
이 애니메이션을 만들기 위해서는 레이어를 여러 부분으로 분리해야 합니다. 제 경우, 캐릭터 트렌치코트의 아랫부분을 애니메이션하고 싶습니다. 따라서 이미지를 배경, 트렌치코트 아랫부분, 그리고 난간과 콘크리트가 있는 제 캐릭터로 나누어야 할 것입니다.
✧ 다른 레이어로 분할된 이미지. 1. 배경, 2. 트렌치코트, 3. 캐릭터.
애니메이션을 가능하게 하려면 배경과 트렌치코트의 불완전한 부분을 채워야 합니다. 왜냐하면 캔버스에서 어떤 움직임을 애니메이션하거나 만들려고 할 때 이미지의 비어 있는 부분이 보일 것이기 때문입니다. (아래 이미지)
✧ [유동화] 도구로 트렌치코트 레이어의 움직임.
이미지의 부분을 채우기 위해 수동으로 채색했습니다.
애니메이션하고 싶은 이미지의 원본 .clip 문서가 있다면, 문서 사본을 만들고 애니메이션을 위해 문서를 쉽게 레이어로 분리할 수 있습니다.
✧ 문서의 불완전한 영역에서의 작업 흐름 예시.
레이어의 부족한 부분을 채우는 것을 마쳤으므로, 제 문서는 다음과 같이 되었습니다:
✧ 다른 레이어로 분할된 이미지. 1. 배경, 2. 트렌치코트, 3. 캐릭터.
8.3 애니메이션
“4. 타임라인” 섹션에서 설명했듯이, 문서에서 타임라인을 활성화합니다.
이어서 트렌치코트를 애니메이션화하기 위한 애니메이션 폴더를 추가합니다. 트렌치코트가 있는 레이어(노란색)를 해당 애니메이션 폴더(주황색) 안에 넣습니다. (아래 이미지)
애니메이션 폴더와 트렌치코트 프레임이 보이는 데도 불구하고 트렌치코트가 보이지 않습니다. 이는 트렌치코트 프레임이 타임라인에 추가되지 않았기 때문입니다.
타임라인에 프레임을 추가하려면, 애니메이션을 추가하려는 위치에 포인터를 놓고 → [마우스 오른쪽 버튼 클릭]을 합니다. 프레임을 추가하는 창이 나타납니다. 왼쪽 섹션에서 레이어 이름을 볼 수 있습니다. 클릭하세요. (아래 이미지)
팝업 창의 왼쪽 섹션에는 프레임 이름 목록이 표시됩니다. 이미 그린 프레임을 추가하려면 타임라인을 마우스 오른쪽 버튼으로 클릭하고 선택할 프레임 이름을 선택합니다. 시퀀스가 반복되는 애니메이션에서 매우 유용합니다.
레이어를 복제하려면 레이어 뷰어에서 레이어를 선택한 다음 → 복사 및 붙여넣기 ([Ctrl+C],[Ctrl+V]). 저는 같은 이미지를 여러 번 사용할 것이므로 트렌치코트의 기본 레이어를 7번 더 복사하여 붙여넣었습니다. 이어서 이전에 설명한 대로 타임라인에 프레임을 추가합니다. (아래 이미지)
애니메이션을 위해 [메쉬 변형] 모드를 사용하기로 결정했습니다. 이는 개체를 변형할 때 더 큰 제어력을 제공합니다.
메쉬 변형에 접근하려면, 편집할 영역을 선택해야 합니다. [자동 선택] - 구어체로 "마술 지팡이"라고도 알려진 - 으로 요소를 선택하거나 [올가미] 도구로 수동으로 선택할 수 있습니다... 또는 단순히 사각형 선택을 할 수도 있습니다 [웃음] .
개체에 대한 선택이 정확할수록 메쉬 변형을 통한 편집이 더 좋습니다.
✧ [자동 선택]으로 내 개체 선택.
선택 영역 위에 다양한 컨트롤러가 나타납니다. 이 컨트롤러를 통해 선택 영역의 변형에 대한 더 큰 제어력을 가질 수 있습니다. (아래 이미지)
이 선택 스타일로, 트렌치코트 움직임의 각 프레임을 애니메이션화하는 데 집중했습니다. 또한 가장자리에 브러시로 수정을 가하거나 접힌 부분에 주름이 보기 좋을 것이라고 생각했습니다. 결과는 다음과 같습니다.
새 애니메이션 폴더를 추가하고 바다를 수동으로 애니메이션화했습니다. “7.7 특수 효과” 섹션에서 보여드린 것처럼 애니메이션 폴더의 [레이어 구성 모드]를 "발광"으로 변경했습니다.
마지막으로, 새로운 애니메이션 레이어를 추가하고 갈매기의 간단한 애니메이션을 만들었습니다. 자동 보간을 사용했습니다 (“4\u005c.4 자동 보간” 또는 7.7 “특수 효과”에서 설명했듯이).
새로운 애니메이션 레이어에서 난간과 아이스크림의 빛을 애니메이션화했습니다.
이것이 제 최종 결과물이었습니다! 🌟
9. 감사와 작별 인사
이 튜토리얼을 읽어주셔서 대단히 감사합니다. 이 튜토리얼을 작성하는 동안 매우 즐거웠습니다. 제 콘텐츠를 더 보고 싶으시다면, 클립 스튜디오 페인트 프로필에서 제 튜토리얼과 소셜 미디어 링크를 방문해 주세요.
여러분의 예술적 여정에 어떤 식으로든 이 교육을 제공하게 되어 기쁘고 영광입니다.
저는 여기까지입니다. 감사합니다!
이 게시물에 '좋아요!'를 누른 사용자
댓글