이 튜토리얼에서는 동기화되는 스토리 루프를 디자인하고 만드는 방법을 보여드리겠습니다. 자세하며 애니메이션에 단 24프레임만 소요됩니다. 이 기능은 Clip Studio Paint의 Pro 및 Ex 버전 모두에서 만들 수 있습니다.

 

 

 

 

루프 디자인

파이프라인 스토리의 개념은 동기화된 움직임으로 한 루프에서 다른 루프로 애니메이션 흐름을 만드는 것입니다. 이 튜토리얼에서는 고양이 초밥집을 만들 것입니다. 이미지 스케치부터 시작하겠습니다.

초밥을 만드는 다양한 과정을 거쳐 생선을 공급하는 컨베이어 벨트가 있을 것입니다. 4마리의 고양이가 각 과정을 거쳐 작업합니다: 다지기, 원형 칼날로 썰기, 생선과 밥 합치기, 초밥을 접시에 놓기.

디자인의 움직임은 다음과 같습니다 (24프레임 기준)

24프레임은 스토리 루프에 너무 적다는 것을 알 수 있습니다.

 

각 고양이에게 24프레임을 주면 더 세밀한 움직임을 위한 시간이 생길 것입니다.

하지만 이 예시는 24*4 = 96프레임을 사용하는데, 이는 루프에 너무 길고 Clip Studio Pro와 호환되지 않습니다.

 

고양이의 움직임은 개별적이므로 각 애니메이션의 키프레임을 겹쳐서 다음과 같이 개별 움직임 루프를 만들 수 있습니다.

마지막으로, 24개의 키프레임에 완벽합니다. 모든 고양이들이 자기 일에 바쁜 것 같네요!

애니메이션 루프는 요약하자면 다음과 같습니다.

1. 고양이가 생선을 다집니다

2. 고양이가 기계로 생선을 썹니다

3. 고양이가 초밥을 만듭니다 (루프당 2개의 초밥)

4. 고양이가 초밥을 접시에 담습니다

5. 컨베이어 벨트 루프

 

배경 및 오브젝트 그리기

배경부터 시작합니다. 전체 파이프라인 과정을 볼 수 있도록 등각 투영 방식으로 만들었습니다.

참고: Clipstudio Asset의 타일 패턴을 사용했습니다.

배경에 맞춰 장면 스케치를 다시 그립니다.

그런 다음 전송 벨트에 나타날 오브젝트를 별도의 레이어에 그립니다.

이제 오브젝트는 나중에 애니메이션화할 준비가 되었습니다.

개별 애니메이션 루프 생성

고양이를 여러 부분으로 나눔

더 쉬운 관리를 위해 레이어 이름을 바꾸는 것을 잊지 마세요.

이 설정으로 애니메이션 타임라인을 만듭니다.

프레임률 = 8, 재생 시간 = 24

 

타임라인 패널에서 설정에 따라 키프레임이 나타납니다.

[타임라인 패널을 찾을 수 없으면 '창 > 타임라인'을 통해 엽니다]

각 레이어를 이미지 소재 오브젝트로 변환하여 변형하기 쉽게 만듭니다.

레이어를 마우스 오른쪽 버튼으로 클릭하고 '레이어 변환'을 선택합니다.

유형을 '이미지 소재 레이어'로 변경하고 '확인'을 누릅니다.

모든 레이어에 대해 반복하면 다음과 같은 레이어를 얻을 수 있습니다.

이제 애니메이션을 준비할 차례입니다.

 

애니메이션을 만들려면 변형 방법을 사용하여 캐릭터 움직임에 따라 부품을 이동합니다.

 

레이어를 선택한 다음 '레이어의 키프레임 활성화' 아이콘을 클릭합니다.

 

레이어 이름에 '변형'이라는 단어가 나타납니다.

 

키프레임을 '선형 보간'으로 설정합니다.

 

그런 다음 아이콘을 클릭하여 키프레임을 추가하면 선택한 프레임(빨간색 막대)에 키프레임 아이콘이 나타납니다.

마지막 프레임을 클릭하고 다른 키프레임을 추가합니다.

그런 다음 마지막 프레임의 키프레임 아이콘을 길게 클릭하고 25프레임까지 드래그합니다.

(이렇게 하면 24프레임이 1프레임과 다르게 보이고 더 부드러운 움직임을 만듭니다)

 

애니메이션을 만들려면.

원하는 키프레임을 클릭한 다음 오브젝트 도구로 오브젝트를 이동합니다.

 

타임라인이 해당 지점에 자동으로 키프레임을 생성합니다.

 

 

재생 아이콘을 클릭하면 움직임을 볼 수 있습니다.

 

결과

모든 오브젝트에 적용

고양이의 간단한 움직임을 얻을 수 있습니다.

오버랩을 수정하기 위해 배경 오브젝트 아래로 신체 부위를 이동합니다 (나중에 쉽게 편집할 수 있도록 폴더를 만듭니다).

팔 동작의 경우, 변형 방법으로는 너무 복잡해서 프레임별 애니메이션으로 만들었습니다.

 

타임라인 패널에서 '새 애니메이션 폴더' 아이콘을 클릭합니다.

 

레이어 패널에서 애니메이션 폴더가 내부에 폴더를 만드는 것을 볼 수 있습니다.

선화, 스케치, 색상 레이어를 만듭니다.

타임라인 패널에서 애니메이션 폴더 타임라인을 마우스 오른쪽 버튼으로 클릭하고 키프레임 1을 선택합니다.

첫 프레임을 그린 다음 '어니언 스킨 활성화 아이콘'을 사용하여 어니언 스킨을 활성화합니다.

그런 다음 새 애니메이션 셀을 만듭니다.

두 번째 셀에는 이전 셀을 보여주는 파란색 선이 나타납니다. 폴더 '2'에 자동으로 생성될 스케치 레이어에서 계속 작업할 수 있습니다.

모든 키프레임에 스케치하여 애니메이션 스케치를 만듭니다.

그런 다음 각 셀에 세부 사항을 추가합니다.

참고: 잉크의 경우, 마커 서브 도구[펜]의 '채우기 모노 펜'을 추천합니다. 압력에 따라 크기가 변하지 않아 애니메이션에 좋습니다 :)

 

변형을 조정하고 더 많은 키프레임으로 움직임을 더 만족스럽게 만들 수도 있습니다 (시작과 끝을 동일하게 유지하세요).

이제 움직임이 더 자연스럽습니다.

 

이 단계를 사용하여 다른 고양이를 만듭니다. 결과는 다음과 같습니다.

동기화된 애니메이션 루프 생성

애니메이션이 아직 동기화되지 않았습니다. 이 작품을 완성하려면 컨베이어 벨트 애니메이션을 추가해야 합니다.

컨베이어 벨트는 5부분으로 나눌 수 있습니다.

1 - 상자에서 떨어지는 생선

2 - 사시미로 썰리는 생선 필레

3 - 이동된 초밥

4 및 5 - 서빙 준비된 초밥이 나가는 모습

 

관리를 쉽게 하려면, 관련 애니메이션 루프와 동기화될 수 있는 키프레임을 확인해야 합니다.

 

예를 들어, 첫 번째 고양이의 손에 생선이 키프레임 1에 있으면, 키프레임 24에 고양이가 당길 준비가 됩니다.

 

경사면에서 떨어지는 생선으로 시작합니다.

생선은 3단계로 떨어집니다.

키프레임 1에서 동기화를 시작합니다 [생선을 다지는 고양이와 함께]. 따라서 프레임 1에서 고양이 손에 들어가기 전 위치에 생선을 놓습니다.

 

첫 번째 표시 프레임을 설정하여 타임라인에 표시되는 프레임을 제한합니다.

 

생선을 위한 변형 애니메이션을 만들고 첫 번째 키프레임에서 생선의 위치를 이동합니다.

결과는 다음과 같습니다.

생선이 키프레임 18에 나타났습니다. 이제 키프레임 17에서 끝나는 생선 낙하 애니메이션을 만듭니다.

팁: 메시 변형을 사용하여 생선 모양을 조정하면 생선이 자연스럽게 떨어지도록 만들 수 있습니다.

[편집 > 변형 > 메시 변형]

 

그런 다음 동일한 단계로 변형 애니메이션을 만듭니다.

 

이제 생선이 계속 떨어질 것입니다. 다른 단계에서도 동일하게 수행합니다.

오버랩 부분을 피하려면 배경의 일부를 복사하여 오브젝트 위에 놓습니다.

최종 타임라인은 다음과 같습니다.

반복 오브젝트의 움직임은 함께 배치하고 한 번에 이동할 수 있습니다.

이것은 사시미를 하나씩 집는 움직임의 키프레임을 만드는 것이 다소 복잡할 것입니다 (고양이가 루프당 2개의 사시미를 집고 각 루프는 12프레임이 소요되기 때문입니다).

 

12프레임이 소요되는 움직임을 만들어야 합니다.

결과는 비동기화되고 깜박일 것입니다.

 

동기화하려면 완전한 루프를 만들어야 합니다. 2, 4, 6, 8, 12 프레임 루프로 움직임을 유지하려고 노력하십시오. 24프레임 내에서 완벽한 루프를 만들 수 있기 때문입니다.

 

여기서는 12프레임이므로 24프레임을 모두 채우기 위해 루프를 2번 반복할 수 있습니다.

 

레이어를 복제하고 타임라인을 앞으로 이동합니다.

(타임라인 헤더를 길게 눌러 자유롭게 이동)

전체 바를 복사하여 다음 키프레임에 붙여넣을 수도 있습니다.

이것이 간단한 루프를 만드는 모든 기술입니다.

나머지 결과는 다음과 같습니다.

 

컨베이어 벨트에 움직임 세부 사항 추가

컨베이어 벨트 라인 그리기 (1 레이어당 1 라인)

24프레임마다 한 쌍의 초밥이 만들어지므로, 벨트의 이동 움직임은 24프레임 길이로 만듭니다.

따라서 변형을 만들고 마지막 키프레임에서 오브젝트를 이동하여 다음 라인과 겹치도록 합니다 (모든 라인에 대해 수행).

 

장면의 일부 오브젝트는 벨트와 함께 움직일 수 없다는 것을 알 수 있습니다. 나중에 다른 표면을 적용하여 이상한 움직임을 숨겨 수정할 수 있습니다.

벨트가 배경과 더 잘 어울리도록 막대 폴더를 컨베이어 벨트 색상 레이어 위로 이동한 다음 '아래 레이어에 클리핑'으로 레이어를 클리핑합니다.

더 나은 외관을 위해 투명도를 조정할 수 있습니다.

마지막 손질

우리가 만든 움직임에서 일부 오류를 감지하고 수정하거나 원하면 세부 사항을 추가합니다.

예를 들어, 느린 과정에 선을 더 추가하여 더 동기화되도록 하고, 도마도 추가했습니다.

 

이제 작업이 완료되었습니다!!

추가 참고 1: 루프 애니메이션의 아주 기초

루프 애니메이션이 처음이시라면 이 글이 도움이 되기를 바랍니다 :)

루프 애니메이션은 재미있습니다. 간단한 것부터 시도하면 더 복잡한 것을 더 잘 이해하는 데 도움이 됩니다.

추가 참고 2: 등각 투영 드로잉 가이드라인

그리드 없이 등각 투영 뷰로 그리는 방법에 대해 한참을 고민했습니다. 그리고 자신만의 등각 투영 드로잉 가이드라인을 만드는 재미있는 방법을 찾았습니다.

요약

제 튜토리얼이 디자인 및 자신만의 루프 애니메이션 제작에 대한 아이디어를 얻는 데 도움이 되기를 바랍니다. 즐거운 하루 되세요 :)