키프레임을 사용하여 기존 작품을 애니메이션화하는 방법 배우기

이 강아지는 비디오 게임의 마스코트로 그렸습니다.

우리는 이 강아지가 마음에 들어서 더 눈에 띄게 사용하고 싶었습니다. 애니메이션을 추가할 수 있기를 원했습니다.

 

그래서 약 45분 동안 움직일 각 부분을 잘라냈습니다. 각 신체 부위를 별도의 레이어에 저장했고, 머리 위, 목, 무릎과 같은 부분의 누락된 간격을 채웠습니다. 모습은 이랬습니다.

그리고 모든 레이어를 제자리로 드래그하고, 타임라인을 실행하고, 키프레임을 테스트한 결과 이 ​​애니메이션이 완성되었습니다.

충분히 괜찮지만, 우리가 하려는 작업에는 그다지 유용하지 않았습니다. 그래서 UI 알림의 일부로 만들 더 복잡한 애니메이션을 만들었습니다.

 

이 다음 애니메이션은 더 적은 조각을 사용하지만, 더 과장된 움직임과 약간의 전경/배경 전환을 사용합니다. 그래서 가르치기에 좋은 예시입니다.

클립 스튜디오 페인트에서 키프레임으로 애니메이션 만들기

단계 1: 설정하기

이미 그린 캐릭터로 작업하는 경우, 새 애니메이션 파일을 만들 걱정은 하지 마세요. 기존 캔버스를 사용할 수 있습니다. 원본 캔버스를 백업하세요... 그것은 나중에 그림을 변경하고 싶을 때 사용될 것입니다. 그런 다음 움직이는 각 조각을 잘라내고 레이어를 부여하는 작업을 수행합니다. 누락된 모양을 채웁니다. 애니메이션의 중요한 부분이 아닌 모든 것을 삭제하여 레이어를 단순화합니다.

 

더 빠르고 간단한 애니메이션을 위한 폴더 설정:

 

"Dog" (또는 "Your Character")라는 이름의 폴더를 만듭니다.

캐릭터의 모든 조각을 그 안에 넣습니다.

"Dog" 폴더 안에 "Head"라는 폴더를 만듭니다.

머리와 연결된 모든 조각을 그 안에 넣습니다. (제 경우에는 "Nose", "Hat", "Ears", "Head"였습니다.)

"Dog" 폴더 안에 "Body"라는 다른 폴더를 만듭니다.

남은 모든 신체 부위를 그 안에 넣습니다.

폴더는 다음과 같이 보여야 합니다.

타임라인 창을 활성화합니다.

"새 타임라인"을 클릭합니다.

(클립 스튜디오 프로를 사용하는 경우 최대 24프레임만 사용할 수 있습니다. 연습하기에 좋은 숫자입니다. 제 애니메이션은 1초 길이이므로 업계 표준인 초당 24프레임을 사용했습니다. 더 끊기는 2초 애니메이션을 원한다면 초당 12프레임으로 만드세요. 또는 정말 끊기는 4초 길이 애니메이션의 경우 6fps로 만드세요.)

 

타임라인은 모든 폴더와 레이어로 자동으로 채워지고, 24프레임 애니메이션 섹션을 둘러싸는 파란색 핸들이 있어야 합니다.

 

(타임라인에는 "애니메이션 폴더"도 있습니다. 이 튜토리얼에서는 애니메이션 폴더를 사용하지 마세요. 그것들은 훌륭하고 유용하지만, 여기서는 혼란만 줄 것입니다.)

 

"Dog" 폴더를 선택한 다음, 타임라인 창에서 "이 레이어에 키프레임 활성화"를 클릭합니다.

(우리가 한 일은 강아지의 모든 부분을 키프레임 셀로 변환한 것입니다. 이제 어떤 부분에 그림 수정이 필요한 경우, 이 강아지 폴더로 돌아가서 "키프레임 활성화" 아이콘을 다시 클릭해야 합니다. 키프레임이 활성화된 상태에서는 아트 브러시가 작동하지 않습니다.)

 

키프레임이 활성화된 상태에서는 오브젝트 도구만 사용하게 됩니다.

이제 애니메이션을 만들 준비가 되었습니다!

단계 2: 움직이게 만들기

타임라인에서 첫 번째 프레임을 선택한 상태로, "Head" 폴더를 선택합니다.

 

타임라인 창 상단에 있는 "키프레임 추가" 아이콘을 클릭합니다. 타임라인에 다이아몬드가 나타나고, 캔버스 주위에 파란색 핸들이 나타납니다.

 

회전 중심을 캔버스 중앙에서 머리가 목과 만나는 지점으로 드래그합니다. (작은 + 표시입니다. 보이지 않으면 "오브젝트" 도구를 사용하고 있는지 확인하세요.)

 

파란색 테두리 바로 바깥으로 커서를 이동하여 "회전" 아이콘으로 바뀌는 곳에서 회전을 테스트합니다. 클릭하고 드래그합니다. 머리가 자연스럽게 끄덕이면 좋습니다.

 

(머리는 회전하지만 귀와 모자가 제자리에 고정되어 있다면 "Head" 드로잉 레이어를 선택한 것입니다.)

 

머리를 아래쪽으로 회전합니다.

 

타임라인에서 약 6프레임 지점을 클릭합니다.

 

머리를 위쪽으로 회전합니다. 변경 사항을 만들 때마다 키프레임이 자동으로 생성됩니다.

 

테스트하려면 타임라인에서 "재생" 버튼을 누릅니다.

 

타임라인에서 약 12프레임 지점을 클릭합니다.

 

머리를 약간 아래쪽으로 회전합니다.

 

타임라인에서 약 16프레임 지점을 클릭합니다. 머리를 약간 위쪽으로 회전합니다.

 

타임라인에서 약 20프레임 지점을 클릭합니다. 머리를 원래 위치로 돌려놓습니다.

 

테스트하려면 "재생" 버튼을 누릅니다.

 

모자로 이동하여 이 모든 단계를 다시 수행합니다.

 

귀와 코로 이동합니다. 회전하고, 테스트하고, 진행합니다.

강아지에게 새로운 팔이 필요할 것입니다. 간판 위에 자연스럽게 놓일 수 있는 팔이요. 다른 캔버스에서 그리거나, 키프레임을 비활성화한 후 이 캔버스에서 그립니다. 올바른 각도로 그려진 셔츠 소매도 필요할 것입니다.

이 두 항목을 한 레이어에 함께 그릴 수도 있지만, 저는 소매에서 약간의 움직임을 더 표현하고 싶었습니다.

 

저는 주머니에 손이 숨겨져 있던 다른 팔을 삭제하고 이것으로 교체했습니다. 이전 셔츠 소매는 유지하여 두 개의 셔츠 소매 이미지가 남았습니다. 이것은 애니메이션 폴더를 위한 완벽한 기회이지만, 대신 애니메이션 폴더 없이 간단한 드로잉 교체를 수행하는 방법을 보여드리겠습니다.

 

강아지의 어깨가 위로 움직이도록 애니메이션하여 팔을 올리기 시작한다는 것을 보여줍니다.

 

어깨가 가장 높은 프레임에서 해당 단일 애니메이션 트랙 상단의 핸들을 오른쪽에서 왼쪽으로 드래그합니다. (제 경우에는 5번 프레임입니다. 이렇게 하면 해당 전체 레이어가 5번 프레임까지 나타나다가 사라지게 됩니다.)

새로운 셔츠 소매가 있는 애니메이션 트랙에서 반대쪽 핸들을 드래그하여 이전 셔츠 소매가 사라질 때 새로운 셔츠 소매가 나타나도록 합니다.

단계 3: 배경에서 전경으로 이동하기

우리는 알림판을 내내 보이게 유지했습니다. 좋은 크기 참조를 쉽게 사용할 수 있도록 하기 위함입니다. 이제 해당 레이어를 레이어 창의 맨 위로 이동합니다. 이렇게 하면 강아지의 일부가 가려질 것입니다.

 

"Dog" 폴더에 키프레임을 생성하고 이동하여, 강아지가 완성된 오브젝트로 간판 위로 튀어나오도록 합니다.

 

알림판 레이어를 복제합니다.

 

간판 레이어 복사본을 팔과 소매 레이어 바로 아래로 이동합니다.

 

셔츠 소매와 마찬가지로 애니메이션 트랙의 핸들을 이동하여, 팔이 그 위로 올라가고 "Dog" 폴더가 움직임을 멈출 때만 간판 복사본이 나타나도록 합니다.

 

원본 간판에도 동일하게 적용하여 복사본이 나타날 때 원본이 사라지도록 합니다.

 

간판 복사본을 원본 간판과 정확히 같은 공간으로 이동합니다. 제 레이어는 이렇게 되었습니다.

강아지 머리 뒤에 나타나는 최종 프레임의 경우, 지금까지 해왔던 것처럼 키프레임을 만든 다음:

 

가장 왼쪽 핸들을 잡고 레이어를 보이지 않을 때까지 확대/축소합니다. (이미지가 납작해지는 대신 축소되는 경우, 오브젝트 도구 속성에서 "변형" 옆의 +를 클릭한 다음 "가로 세로 비율 유지"를 선택 해제합니다.)

 

타임라인에서 앞으로 이동하고 원래 모양으로 다시 확대/축소합니다.

 

움직임을 생동감 있게 만들고 탄력을 주기 위해 키프레임을 몇 개 더 추가합니다.

보너스 특수 효과!

레이어 속성 및 클리핑 레이어로 달성할 수 있는 몇 가지 효과가 정말 마음에 듭니다. 대부분의 조각이 이미 폴더에 있으므로 쉽게 적용할 수 있습니다.

 

깔끔한 아르누보 스타일 테두리를 얻기 위해 폴더를 추가하고 간판 레이어와 "Dog" 폴더를 그 안에 넣었습니다. 그런 다음 레이어 속성에서 테두리 효과를 활성화했습니다.

키프레임을 사용한 걷기 애니메이션 보너스 팁!

걷기 사이클은 상당히 어려울 수 있습니다. 몇 가지 팁이 있습니다:

 

첫 번째 키프레임을 사이클의 마지막 위치로 복사합니다. 모든 레이어에서 이 작업을 수행합니다.

 

발부터 애니메이션합니다.

 

어깨는 엉덩이와 반대 방향으로 회전합니다. 따라서 오른팔은 왼발과 함께 앞으로 움직이고, 왼팔은 오른발과 함께 앞으로 움직입니다.

 

전경 및 배경 레이어에 색상 코드를 지정하여 빠르게 찾을 수 있도록 합니다.

그리고 여기 전체 작업 공간이 작동하는 모습입니다. 레이어와 키프레임 배치를 잘 보려면 전체 화면으로 만드세요.

저는 캐릭터가 살아 움직이는 것을 보는 것이 정말 스릴 넘칩니다. 이 튜토리얼이 제가 배울 때 겪었던 많은 어려움을 극복하는 데 도움이 되기를 바랍니다. 궁금한 점이 있다면 댓글로 질문해주세요... 이 튜토리얼을 만들면서 잘못될 수 있고 혼란을 야기할 수 있는 다양한 것들을 계속 생각했지만, 그것들을 다루느라 옆길로 빠지고 싶지는 않았습니다.