안녕하세요 여러분!
저는 @linkurys의 애니메이터이자 일러스트레이터인 Link입니다.
Linkurys(@linkurys) • Instagram 사진 및 동영상
온라인에서 애니메이션 팁을 공유하는 것은 이번이 처음입니다. 따라서 제 조언이 불분명하거나 혼란스러우면 주저하지 말고 문의해 주세요! 댓글 남겨주시거나 DM 주셔도 됩니다.
이 튜토리얼에서는 빠르고 쉽게 이모티콘에 애니메이션을 적용하는 3가지 방법을 보여 드리겠습니다. 각 방법에는 고유한 문제가 있지만 걱정하지 마세요! Clip Studio Paint Ex를 사용하여 처음부터 끝까지 모든 단계를 안내해 드리겠습니다! 😁
우리는 무엇을 할 것인가?
애니메이션 이모티콘을 만드는 것을 생각해보면 어렵고 복잡하며 많은 작업이 필요하다고 생각할 수도 있습니다. 애니메이션을 시작하기 전에도 같은 생각을 했어요. 하지만 믿거나 말거나, 위의 세 가지 사항이 본질적으로 전부입니다! 물론 그렇게 간단하지는 않지만 생각보다 쉽습니다! 특히나 많은 기능을 제공하는 CLIP STUDIO PAINT를 사용할 때 말이죠 🙂
감정 표현에 애니메이션을 적용하는 3가지 방법!
앞서 언급했듯이 다음과 같은 자신만의 애니메이션 이모티콘을 만드는 3가지 방법을 제공하겠습니다.
1. 정적 이미지 애니메이션
이 기술의 본질은 간단합니다. 기본적으로 이미지/그림을 움직여 원하는 동작을 얻으면 됩니다.
(이것은 사람들이 애니메이션 이모티콘을 만들 때 사용하는 가장 인기 있는 방법이며 이러한 유형의 이모티콘을 여러 번 본 적이 있을 것입니다. 그렇죠?)
2. 부품 애니메이션
여기서는 첫 번째 방법과 동일한 기술을 사용하여 감정 표현의 일부를 분리하고 개별적으로 이동합니다.
(첫 번째 방법과 유사하지만 애니메이션할 구성 요소가 더 많습니다.)
삼. 프레임별 애니메이션
각 움직임을 프레임별로 그려서 애니메이션을 만들어보세요!
이 기술은 더 많은 노력이 필요하며 초보자에게는 다소 어려울 수 있습니다. 그러나 꾸준한 연습을 통해 이러한 애니메이션을 만드는 데 더 빠르고 능숙해지는 자신을 발견하게 될 것입니다!
(가장 어렵지만 재미있습니다! :D)
작업 공간 및 물건 준비
1. 애니메이션으로 만들고 싶은 이모티콘 그림을 준비하세요
꼭 확인해보세요!
애니메이션 이모티콘에 대해 논의할 때 Twitch나 유사한 플랫폼과 같은 라이브 스트리밍 채팅에 자주 사용됩니다. 작게 보일 수 있으므로 쉽게 볼 수 있도록 하는 것이 중요합니다. 잃어버릴 수 있는 작은 세부 사항을 너무 많이 추가하지 마십시오. 간단하게 유지하세요!
2. 클립 스튜디오 페인트 작업 공간 설정
애니메이션 튜토리얼을 시작하기 전에 설정을 해보겠습니다!
1. Clip Studio Paint를 엽니다.
2. 파일 > 새로 만들기…를 클릭합니다.
삼. 프로젝트의 애니메이션을 선택합니다.
4. 캔버스/프레임 크기를 1000x1000px로 설정하고 해상도를 150으로 설정하세요.
(다른 크기를 선택할 수 있지만 1:1 비율을 유지하는지 확인하세요.)
5. 24FPS로 프레임 속도를 설정하세요.
6. 확인을 클릭하세요.
타임라인 패널이 없는 경우 창 > 타임라인으로 이동하여 표시되도록 할 수 있습니다.
잠깐, 타임라인이 무엇인가요? 글쎄, 그것은 본질적으로 모든 애니메이션 프로젝트의 중추입니다. 타임라인에서는 시퀀스를 배치하고 속도를 설정하고 애니메이션 프레임을 구성합니다. 모든 개별 조각이 함께 모여 애니메이션의 흐름을 처음부터 끝까지 시각화하고 제어할 수 있는 곳입니다. 모든 움직임, 모든 전환, 모든 순간이 지도로 표시되는 감독의 대시보드라고 생각하세요.
이는 선택 사항이지만 더 나은 공간을 위해 타임라인 옆에 있는 버거 아이콘(3줄)으로 이동한 다음 썸네일 크기 > 없음으로 이동하여 애니메이션 폴더 미리보기를 숨길 수 있습니다.
야! 이제 Clip Studio Paint 작업 공간 설정이 완료되었습니다! ✨
물건 애니메이션 및 이동
이 글을 읽고 계시다면 감정 표현에 애니메이션을 적용할 준비가 되셨다는 뜻이겠죠? (아니면 이 부분을 그냥 건너뛰었을 수도 있습니다 😏). 어느 쪽이든 가장 간단하면서도 쉬운 방법부터 시작해 보겠습니다. 정적 이미지 애니메이션!
첫 번째 팁: 정적 이미지 애니메이션
위 그림에서는 정적 이미지를 이동하고 변경하는 세 가지 방법을 볼 수 있습니다. 이동하거나, 돌리거나, 더 크게 또는 더 작게 만들거나, 이러한 방법을 혼합하여 다양한 효과를 낼 수 있습니다. 이 트릭을 사용하면 할 수 있는 가능성이 너무 많아서 창의력이 유일한 한계입니다!
정적 이미지 애니메이션: 레벨 1(기본)
1. 정적 이미지/그림 준비
레벨 1에서는 이미지 2개만 사용하여 실망스러운 이모티콘을 만들어 보겠습니다.
-캐릭터 그리기
-배경 이미지
2. 애니메이션 폴더 생성
그림을 CLIP STUDIO PAINT로 가져오기 전에:
1. 새 애니메이션 폴더를 만듭니다. 이렇게 하면 캐릭터 그림과 배경 이미지를 서로 다른 레이어로 분리하는 데 도움이 됩니다.
2. 원하는대로 애니메이션 폴더의 이름을 바꾸십시오. 예를 들어, 맨 위 레이어에는 "캐릭터"를 사용하고 맨 아래 레이어에는 "배경"을 사용합니다.
3. 이미지/그림 가져오기
애니메이션용 CLIP STUDIO PAINT에서는 이미지를 캔버스에 직접 드래그 앤 드롭하여 가져올 수 없습니다. 이는 CSP의 애니메이션 셀이 주로 이미지 직접 가져오기용이 아닌 브러시 및 기타 도구용으로 설계되었기 때문입니다. 이렇게 생각해보세요. 원본 이미지 자료용으로 제작되지 않았습니다.
이미지 파일을 성공적으로 가져오려면 이미지 파일을 애니메이션 폴더 바로 아래 레이어 팔레트 영역으로 끌어서 놓아야 합니다.
이미지 파일은 "Dino 1"이라는 이름의 벡터 레이어로 삽입됩니다.**
("Dino 1"은 내 이미지 파일 이름입니다)
“하지만 이미지는 캔버스에 나타나지 않았습니다 :( “라고요?
먼저 애니메이션 폴더에 이미지 벡터 레이어를 할당해야 하기 때문입니다!
프레임에 셀 할당 > 이미지 레이어 선택 > 확인을 클릭하면 됩니다.
가져온 이미지 크기는 캔버스 크기보다 크거나 작을 수 있습니다. 비율을 변경하지 않고 이미지를 캔버스에 맞추려면 Shift 키를 누른 채 그림의 모서리를 드래그하세요.
그렇습니다! 캐릭터 이미지 가져오기가 완료되었습니다! ✨
이제 다른 애니메이션 폴더를 사용하여 배경을 가져오고 할당할 때도 동일한 작업을 수행할 수 있습니다!
4. 그림에 애니메이션을 적용해 보세요!
그림 애니메이션을 시작하려면 먼저 다음을 수행하여 키프레임 기능을 활성화해야 합니다.
1. "배경" 애니메이션 폴더를 선택하세요
2. 선택한 레이어에 대해 키프레임 활성화
키프레임이 활성화되면 첫 번째 프레임에 키프레임을 추가합니다.
이제 추가한 키프레임을 복사하여 애니메이션 지속 시간의 끝 부분(2초)에 붙여넣습니다. 키프레임에서 Alt+드래그 앤 드롭을 누르면 쉽게 수행할 수 있습니다.
이제 키프레임이 2개 생겼습니다!
먼저 초기 키프레임을 선택합니다. 그런 다음 작동 모드 >개체를 클릭합니다. 이 설정을 사용하면 첫 번째 키프레임부터 배경 조정을 시작할 수 있습니다.
그 후 배경 이미지를 위로 이동/캔버스 밖으로 나가기
그리고 그게 다야!
첫 번째 애니메이션 이모티콘을 만드셨습니다! 🥳
배경 애니메이션이 너무 느리다고 느끼면 원하는 대로 조정하세요. 개인적으로 저는 속도를 조정하기 위해 초기 키프레임에 가까운 키프레임을 더 추가합니다.
결과는 다음과 같습니다!
그리고 완전히 동일한 절차로 3가지 정적 애니메이션 기본 기술(회전, 크기 조정 및 위치)을 모두 사용한 또 다른 결과가 있습니다! 언제 어디서 모두 사용하는지 알려주실 수 있나요? 🙌
레벨 업! 축하해요! ✨
정적 애니메이션 레벨 1을 완료했습니다. 이제 레벨 2를 진행할 준비가 되었습니다.
정적 이미지 애니메이션: 레벨 2(고급)
레벨 2에 오신 것을 환영합니다!
지금까지 정적 이미지 애니메이션의 기본 사항을 확실히 이해했다고 가정합니다. 그럼 기본 단계는 건너뛰고 바로 애니메이션 과정으로 들어가 볼까요!?
1. 레벨 2 감정 표현 재료
두 개의 서로 다른 이미지를 사용하는 것은 간단해 보일 수 있습니다. 특히 기본 정적 애니메이션 기술을 결합하여 얻을 수 있는 무한한 가능성을 고려하면 더욱 그렇습니다. 하지만 이 수준에서는 우리가 한 단계 더 발전하는 것은 어떨까요? 단 하나의 이미지를 사용하여 애니메이션 GIF를 만들어 봅시다! 🔥
2. 새 파일인가요, 아니면 새 타임라인인가요?
이 부분에는 두 가지 옵션이 있습니다. 지금까지 해왔던 것처럼 새 파일/캔버스를 생성하거나, 이전과 동일한 형식이지만 약간만 조정하여 새 타임라인을 생성하는 것입니다. 새 타임라인을 만드는 데 관심이 있으신가요?** 알려드리겠습니다!
새 타임라인을 만드는 방법은 다음과 같습니다.
1. 타임라인 패널에서 새 타임라인 버튼을 클릭합니다.
2. 팝업 화면이 나타납니다. 동일한 애니메이션 형식을 사용하고 있으므로 설정을 조정할 필요가 없습니다. 타임라인 이름을 '레벨 2'로 바꾸거나 재생 시간을 더 짧거나 더 길게 변경하고 싶을 수도 있습니다.
삼. 확인을 클릭하세요.
새 타임라인이 준비되었습니다! ✨
그러나 레이어 패널을 보면 이전에 가져온 그림 이미지가 여전히 남아 있다는 것을 알 수 있습니다. 이는 새 타임라인을 생성한다는 것은 이전과 동일한 파일 내에서 작업한다는 것을 의미하기 때문입니다. 하지만 이는 새로운 타임라인의 진행 상황에 영향을 미치지 않습니다!
삭제하지 마세요! ⛔
이를 삭제하면 이전 타임라인에서 가져온 파일이 제거됩니다. 그렇습니다. 이는 다른 타임라인에서 작업 중이던 애니메이션이 사라짐을 의미합니다. 그러니 그대로 두는 것이 가장 좋습니다
하지만 그게 귀찮다면 여기 빠른 해결책이 있습니다
1. 레이어를 모두 선택하세요
2. CTRL G를 눌러 선택한 레이어를 그룹화하세요.
삼. "타임라인 1"로 레이블을 지정합니다.
4. 작업 공간을 깔끔하게 유지하려면 폴더를 최소화하기만 하면 됩니다.
5. 짜잔! 이제 작업 공간이 타임라인에 맞게 새롭게 디자인되어 신선하고 정리된 모습을 갖추게 되었습니다 ✨
3. 그림에 애니메이션을 적용해보세요!
이제 새로운 타임라인이 설정되었습니다. 이제 애니메이션을 시작하겠습니다!
준비해야 할 사항에 대한 간단한 알림은 다음과 같습니다.
1. 새 애니메이션 폴더 만들기
2. 이미지/그림 가져오기
삼. 가져온 이미지를 애니메이션 셀에 할당
4. 이미지 크기 조정
2D 카메라 폴더 추가:
1. 버거 버튼을 클릭하세요
2. 새로운 애니메이션 레이어
삼. 2D 카메라 폴더
이제 2D 카메라 폴더가 설정되었으므로 그리기 레이어를 폴더로 이동하세요. 2D 카메라 폴더 안에 레이어를 끌어서 놓기만 하면 됩니다. 이렇게 하면 이미지/그림에 카메라 효과가 활성화됩니다.
2D 카메라 효과를 애니메이션화하기 전 참고사항
1. 카메라 폴더나 레이어를 선택했는지 확인하세요.
2. 캔버스에 보이는 사각형 프레임은 카메라 효과로 캡처될 영역을 나타냅니다. 기본적으로 이 사각형 안에 있는 것은 무엇이든 출력이 됩니다.
삼. 카메라 효과 프레임 조정을 시작하면 키프레임이 타임라인에 자동으로 추가됩니다. 다른 프레임 지속 시간으로 진행한 다음 카메라 프레임을 조정하면 그에 따라 조정됩니다.
4. 카메라 효과 결과를 보려면 타임라인의 버거 버튼 메뉴 > 재생 설정 > 2D 카메라 렌더링을 클릭하여 엽니다.
2D 카메라 효과 애니메이션
카메라 효과 프레임을 2~3프레임마다 임의의 위치로 이동하여 빠르고 진동하는 카메라 효과를 만듭니다.
예상 결과는 다음과 같습니다.
애니마틴 줌 효과
1. 카메라 폴더 안에 있는 그림의 애니메이션 레이어를 선택하세요.
2. 키프레임 옵션을 켜세요.
삼. 애니메이션의 시작과 끝 모두에 키프레임을 추가합니다.
4. 마지막 키프레임에서 드로잉/이미지 레이어의 크기를 확대하고 확대하여 확대/축소 효과를 얻습니다. (작업 도구 > 개체를 사용하여 수행해야 합니다. 그렇지 않으면 이미지를 이동할 수 없습니다.)
예상되는 결과는 이렇습니다!
이 시점에서 끝났다고 생각할 수 있지만 약간의 감각을 더해 보는 것은 어떨까요? 그 미소를 더욱 위협적으로 강화해 봅시다. 하하 🌺
필터 추가
1. 그리기 레이어를 선택하세요
2. 일시적으로 키프레임 기능 비활성화
(걱정하지 마십시오. 다시 켜도 키프레임은 여전히 동일하게 유지됩니다.)
삼. 레이어를 마우스 오른쪽 버튼으로 클릭 > 래스터화하여 이미지를 래스터화합니다.
래스터화는 벡터 레이어를 비트맵 형식으로 변환한 다음 이미지에 필터를 적용할 수 있게 해줍니다.
4. 오픈 필터 > 흐림 > 방사형 흐림
(참고: 이 필터 외에도 탐색할 수 있는 다른 필터가 많이 있습니다!)
5. 강도를 조정하고 방향을 양방향으로, 모드를 부드럽게로 조정한 다음 확인을 클릭하세요.
6. 완료되면 드로잉 레이어의 키프레임 기능을 다시 활성화할 수 있습니다.
그리고 여기에 위협적인 미소가 있습니다! 🔥 🔥 🔥
레벨 업! 축하해요! ✨
정적 애니메이션 레벨 2를 완료했습니다. 이제 부품 애니메이션을 시작할 준비가 되었습니다.
두 번째 팁: 부품 애니메이션
부품 애니메이션의 개념은 도면을 이동, 크기 조정 또는 회전하는 정적 이미지 애니메이션과 유사합니다. 한 가지 다른 점은 개별적으로 움직이고 싶은 캐릭터의 각 부분을 분리해야 한다는 것입니다. 위 이미지에서 볼 수 있듯이 내 캐릭터는 네 부분으로 구성되어 있으며, 각 부분을 개별적으로 애니메이션화할 수 있어 감정 표현에 더 많은 가능성과 역동적인 포즈를 제공할 수 있습니다!
캐릭터 부분 분리
이 팁 섹션에서는 커피 한 잔을 마시는 캐릭터를 애니메이션화하는 것을 목표로 하고 있습니다.
이를 달성하기 위해 캐릭터를 다섯 부분으로 나누겠습니다.
1. 몸,
2. 눈,
삼. 눈썹,
4. 입술
5. 커피 컵
참고로 제 포즈나 디자인을 흉내낼 필요는 없습니다. 자신이 만든 캐릭터, 포즈, 관련 요소를 자유롭게 사용해 보세요. 당신의 창의력을 빛나게 하세요!
애니메이션 폴더 설정 및 이미지 가져오기
애니메이션 폴더 설정
캐릭터의 고유한 부분 수를 기반으로 애니메이션 폴더를 만듭니다. 내 캐릭터는 다섯 부분으로 나누어져 있으므로 다섯 개의 개별 애니메이션 폴더를 만들겠습니다.
폴더를 올바르게 정렬했는지 확인하세요. 가장 앞에 있어야 할 이미지가 다른 부분과 겹치는 것을 원하지 않으시겠죠?
각 애니메이션 폴더 셀에 그림을 가져와 할당합니다
1. 생성한 각 애니메이션 폴더로 이미지/그림 가져오기
2. 정적 이미지 애니메이션에서 했던 것처럼 가져온 그림을 해당 애니메이션 폴더에 할당합니다. '프레임에 셀 할당'을 클릭하고 이미지 레이어를 선택한 다음 '확인'을 클릭합니다. 각 부분에 대해 이것을 반복합니다.
삼. 해당 부분을 시작 조건 또는 첫 번째 프레임의 초기 위치로 설정합니다.
캐릭터 부분 애니메이션
애니메이션을 시작하기 전에 원하는 모션을 계획하는 것이 중요합니다. 위 이미지를 기반으로 캐릭터의 홀짝이는 동작을 구현하려면 어떤 부분을 움직일지, 어떤 부분은 고정할지 식별해야 합니다.
이미지를 관찰하면 다음과 같은 내용을 알 수 있습니다.
1. 눈썹이 아래로 움직이고 있습니다.
2. 눈은 고정되어 있습니다.
삼. 캐릭터가 커피를 마실 때 입이 가려집니다.
이제 원하는 모션 조건이 생겼으니 애니메이션을 시작하겠습니다!
1. 가장 먼저 하고 싶은 일은 각 애니메이션 폴더/레이어에서 키프레임 기능을 활성화하여 여기에 키프레임을 배치하고 애니메이션을 적용하는 것입니다.
2. 첫 번째 프레임과 마지막 프레임에 키프레임 추가
삼. 마지막 모션을 나타내기 위해 모든 최종 키프레임을 편집합니다. 내 캐릭터의 경우, 그 캐릭터가 홀짝이는 순간이다.
예상 결과는 다음과 같습니다!
기술적으로는 여기서 마무리할 수 있지만 약간의 감각을 더해 더 좋게 만드는 것은 어떨까요? 양념을 치자! 🙂
1. 애니메이션 폴더 우클릭 > 새 애니메이션 레이어 > 2D 카메라 폴더를 통해 2D 카메라 효과를 추가합니다.
2. 모든 캐릭터 파트 애니메이션 폴더를 카메라 폴더에 삽입
2D 카메라 효과 애니메이션
1. 다른 레이어를 숨기려면 카메라 폴더를 닫으세요. 이렇게 하면 타임라인을 더 쉽게 볼 수 있습니다.
2. 첫 번째 프레임과 마지막 프레임에 키프레임 추가
삼. 확대 효과를 얻으려면 카메라 효과 프레임을 축소하세요.
예상 결과는 다음과 같습니다!
조금 매콤한 느낌이죠? 근데 아직은 많이 맵지 않아서 양념을 더 추가해보겠습니다! 😤
4. 카메라 폴더 아래에 새 애니메이션 폴더를 추가하여 배경 추가
5. 배경 레이어 선택 > 새 애니메이션 셀 선택
6. 배경 레이어에 검은색 도형/모양 추가
7. 배경 레이어에서 키프레임 활성화
8. 레이어의 첫 번째 프레임과 마지막 프레임에 키프레임 추가
9. 첫 번째 키프레임을 선택하고 불투명도를 0으로 낮춥니다.
예상 결과는 다음과 같습니다!
벌써 더 멋있어 보이지 않나요!? 하지만 마지막 터치가 한 번 더 남았습니다!
1. 카메라 폴더 상단에 새 애니메이션 폴더를 만들고 이름을 Foreground로 지정합니다.
2. 새로운 애니메이션 셀을 만듭니다. 캐릭터 그림의 일부를 덮는 1/4 검정색 모양을 캔버스에 추가합니다. 전경 애니메이션 폴더를 복제하고 복제본을 캔버스 하단으로 이동합니다. 이제 카메라 레이어 위에 2개의 다른 전경 레이어가 있습니다.
삼. 두 레이어 모두에서 키프레임 활성화
4. 두 레이어의 첫 번째 프레임과 마지막 프레임에 새 키프레임을 추가합니다.
5. 상단의 검은색 전경을 선택한 다음 첫 번째 키프레임을 선택하고 검은색 모양을 이동하여 캔버스 상단 외부에 배치합니다.
6. 하단의 검정색 전경을 선택한 다음 첫 번째 키프레임을 선택하고 검정색 모양을 이동하여 캔버스 하단 외부에 배치합니다.
첫 번째 프레임은 다음과 같습니다
결과는 이렇습니다!!! ✨
그리고 여기까지 우리가 다룬 모든 애니메이션 기술을 사용하여 만든 또 다른 결과가 있습니다! 내가 무엇을 어디에 사용하는지 말해 줄 수 있나요? 🙌
레벨 업! 축하해요! ✨
부품 애니메이션과 정적 이미지 애니메이션을 모두 완료하셨습니다!
여기까지 오셔서 당신은 감정 표현에 놀라운 잠재력을 갖고 있음을 스스로 증명하셨습니다! 당신이 자랑스럽습니다! 🥹 💖
세 번째 팁: 프레임별 애니메이션
소개
프레임별 애니메이션 여정을 시작하기 전에 몇 가지 기본 용어와 개념을 살펴보는 것이 중요합니다. 이를 통해 우리 모두가 명확한 이해를 갖고 앞으로 나아갈 때 같은 입장에 있게 될 것입니다!
프레임별 애니메이션이란 무엇입니까?
움직임을 보여주기 위해 주로 배경과 캐릭터의 일부를 이동했던 이전 기술과 비교할 때, 프레임별 애니메이션은 캐릭터의 모든 단일 동작을 자세히 설명합니다.
위의 이미지를 살펴보세요.
캐릭터가 한 지점에서 다른 지점으로 도약하는 것을 볼 수 있습니다.
도약의 각 단계는 고유한 이미지로 표현되어 동작의 모든 뉘앙스를 포착합니다. 동작 하나하나를 차근차근 그리는 것이 핵심입니다!
액자
일련의 이미지 중 단일 이미지입니다. 마치 앨범 속의 한 장의 사진처럼 말이죠.
초당 프레임(FPS)
1초에 몇 개의 프레임(또는 사진)이 표시되는지입니다. 예를 들어 애니메이션에 24FPS가 있다면 액션이 부드럽게 나타나도록 매초 24프레임이 있다는 의미입니다.
키프레임 및 인비트윈
키프레임 이는 애니메이션의 메인 프레임 또는 '키 포인트'입니다. 이는 부드러운 전환의 시작점과 끝점을 정의합니다. 위 이미지에 표시된 공이 던져지는 예를 사용하면 키프레임은 던지기 시작 지점, 가장 높은 지점 및 착지 시점이 됩니다.
인비트위닝 키프레임 사이에 존재하는 프레임을 그려서 모션을 부드럽게 만드는 과정입니다. 우리 공의 경우 세 가지 주요 지점 사이의 상승과 하강을 보여주는 것은 프레임입니다.
사이가 더 많으면 프레임이 더 많아지고 애니메이션이 더 부드러워집니다!
프레임별 애니메이션 감정 표현
프레임별 감정 표현을 만드는 데 시간이 더 걸리더라도 애니메이션 감정 표현에는 그만한 가치가 있습니다. 일반 애니메이션만큼 자세하거나 길 필요는 없습니다. 감정을 표현하는 한 그들은 제 역할을 다합니다!
프레임별 기술의 모든 세부 사항을 다루려면 시간이 오래 걸립니다. 12가지 애니메이션 원칙과 좋은 장면을 만드는 방법 등 다루어야 할 내용이 많습니다. 그러면 이 글이 너무 길어지고 내용이 너무 많아질 수도 있습니다. 자세한 내용은 나중에 다른 기사에서 다루도록 하겠습니다. 😉
지금은 프레임별 기술을 사용하여 애니메이션 감정 표현을 만드는 데 집중하겠습니다!
우리가 할 일
프레임별 기술로 감정 표현을 만드는 과정을 시작하기 전에 우리가 할 일은 다음과 같습니다! (제 생각에는)
1. 작업 공간 설정
애니메이션 캔버스를 준비합니다.
2. 스케치 및 타이밍
스케치를 통해 애니메이션을 계획하고 적절한 타이밍을 설정합니다.
삼. 라인 아트
그 스케치를 깔끔한 선으로 바꿔보세요.
4. 채색 및 렌더링
색상을 추가하여 세련된 느낌을 더해줍니다.
5. 마무리 손질
음... 그건 나중에 보도록 할게요 헤헤 😋
1. 작업공간 설정
애니메이션 캔버스 설정
이전 팁의 단계를 따라왔다면 이 기술에 동일한 작업 공간을 사용하고 있다는 것을 알게 될 것입니다. 하지만 이 섹션으로 바로 이동했거나 복습이 필요하다면 제가 간단히 요약해 드리겠습니다.
1. Clip Studio Paint를 열고 파일 > 새로 만들기를 엽니다.
2. 프로젝트 탭에서 애니메이션을 선택하고 다음과 같이 애니메이션 사전 설정을 구성합니다.
삼. 확인을 클릭하세요
4. 타임라인이 표시되지 않으면 창 > 타임라인을 엽니다.
애니메이션 레이어 설정
새 캔버스를 만들면 애니메이션 레이어가 자동으로 추가되고 이름이 지정됩니다. 목적을 반영하도록 이 레이어의 이름을 바꾸는 것이 좋습니다. 예를 들어 해당 레이어에서 애니메이션을 스케치하는 경우 이름을 'Sketch Layer'로 바꿀 수 있습니다.
이는 애니메이션 타임라인 관리에 큰 이점을 제공할 것입니다!
그리고 그게 다야! 작업공간이 프레임별 애니메이션을 실행할 준비가 되었습니다!
레이어 폴더 설정
프레임별 애니메이션에서는 레이어 폴더를 사용하는 것이 중요합니다. 단일 애니메이션 셀이나 프레임 내에 여러 레이어를 쌓아서 체계적이고 효율적으로 유지할 수 있습니다.
설정 방법은 다음과 같습니다!
1. 애니메이션 레이어를 선택하세요
2. 레이어 팔레트 / 패널에 새 레이어 폴더를 만듭니다
삼. 새로운 래스터 레이어를 작성하여 레이어 폴더 안에 넣습니다.
4. 애니메이션 프레임에 레이어 폴더 셀 할당
참고: 레이어 폴더 셀을 애니메이션 프레임에 할당하면 해당 폴더 내의 래스터 레이어 수가 자동으로 복제됩니다. 따라서 프레임 1에 2개의 래스터 레이어가 포함된 레이어 폴더가 있는 경우 프레임 2와 같은 새 프레임을 추가하면 프레임 1을 미러링하는 2개의 래스터 레이어도 갖게 됩니다.
어니언 스킨 켜기
이 도구를 사용하면 보다 원활한 전환을 위해 이전 및 후속 프레임을 보고 참조할 수 있습니다. 이는 반투명 양파 스킨을 겹쳐서 인접한 프레임의 "유령" 이미지를 제공하여 애니메이터의 작업을 안내하는 것과 유사합니다.
타임라인 팔레트의 어니언 스킨 버튼을 실행하는 것만으로 켤 수 있습니다
2. 스케치 및 타이밍
스케치
러프 애니메이션(Rough Animation)이라고도 불리는 이 애니메이션은 캐릭터나 사물의 기본적인 움직임을 그리는 작업입니다. 이 간단한 그림은 자세한 모습 없이 주요 동작을 보여줍니다. 그들은 우리가 움직임에 대한 느낌을 얻고 계획을 세우는 데 도움을 줍니다.
타이밍
애니메이션의 타이밍은 올바른 느낌을 주기 위해 각 동작에 사용되는 프레임 수에 관한 것입니다. 이는 물체가 얼마나 빠르거나 무거운지 등을 보여주는 데 도움이 됩니다.
제 정적 이미지와 부분 애니메이션 팁을 모두 완료하셨다면 기본적으로 키프레임을 조정할 때 완료하신 것입니다!
0단계: 감정 표현 개념
그리기를 시작하기 전에 만들고 싶은 이모티콘에 대해 생각해 보세요. 자신에게 물어:
1. 어떤 느낌이나 표정을 보여주고 싶나요?
2. 어떻게 움직일까요? 어떻게 시작하고 끝날까요?
제 경우에는 여러분이 이해할 수 있도록 빠르고 간단한 이모티콘을 만들어 보겠습니다.
1. 내 캐릭터가 윙크하고 싶어
2. 스마일🙂 에서 윙크😉 로 바뀔거에요 .
목표를 명확하게 이해하면 애니메이션의 품질과 속도가 모두 향상됩니다. 자신이 무엇을 목표로 하고 있는지 아는 것이 중요합니다!
1단계: 애니메이션 레이어 및 셀 만들기
1. 새 애니메이션 폴더/레이어 만들기
2. 애니메이션 레이어의 이름을 "Sketch"로 바꿉니다.
삼. 새 애니메이션 셀/프레임 추가
메모:
1. 애니메이션에 대한 새 프레임을 그릴 때마다 이 단계를 수행하십시오.
2. 원하는 경우 레이어 폴더도 사용할 수 있습니다.
2단계: 스케치하기!
지금은 스케치 단계이므로 캔버스에서 자유롭게 실험하고 다양한 아이디어를 탐색해보세요! 아마도 당신의 캐릭터에 맞는 더 나은 포즈를 찾을 수도 있을 것입니다 🙂
참고: 저는 일반적으로 스케치, 선화, 채색에 G-Pen을 사용합니다. 하지만 가장 편한 도구를 선택하세요!
스케치 개요
캐릭터 표정이나 포즈가 바뀔 때마다 추가 메인 포즈나 다른 키프레임을 추가하면 캐릭터를 더욱 부드럽게 전환하는 데 도움이 됩니다. 그래서 내 애니메이션의 경우 캐릭터가 웃고 윙크하는 사이에 키프레임을 1개 더 추가하겠습니다 😗
다음은 애니메이션에 대한 간단한 스케치와 시간 매핑입니다.
위 이미지에서 볼 수 있듯이 이제 다음과 같은 3개의 키프레임이 있습니다.
1. 스마일 - 시작 포즈
2. 주의 사항 - K1에서 K3 포즈로 전환
삼. 윙크 - 엔딩 포즈
나중에 키프레임을 변경할 때 캐릭터의 더 부드러운 움직임을 위해 프레임(IB) 사이에 일부를 추가할 것입니다!
키프레임 스케치
다음의 간단한 2단계에 따라 메인 키프레임 스케치를 시작해 보겠습니다.
1. 첫 번째 프레임(프레임 1)에 시작 캐릭터 포즈를 그립니다.
2. 중간 프레임(프레임 12)에 전환 캐릭터 포즈를 그립니다.
삼. 마지막 프레임(프레임 24)에 엔딩 캐릭터 포즈를 그립니다.
참고: 이는 선택 사항이지만 보다 체계적인 타임라인을 위해 각 프레임(제 경우에는 K1, K2, K3)의 이름을 바꿀 수 있습니다. 글쎄, 그것은 당신에게 달려 있습니다!
예상 결과는 다음과 같아야 합니다.
좋아 보이는데요? 😉
그 사이에 스케치하기
이제 다음을 수행하여 키프레임 간 전환이 원활하게 보이도록 몇 가지 중간 프레임을 추가해 보겠습니다.
1. 다음 포즈를 취하기 전에 캐릭터 추진력을 구축하기 위해 예측 기법을 사용하여 K1과 K2 사이의 중간 프레임(프레임 6)을 만들고 그립니다.
2. K2와 K3의 중간 프레임(프레임 18)을 스쿼시 기법으로 만들고 그려서 머리를 숙인 후 윙크를 할 때 캐릭터의 임팩트를 구축합니다.
예상되는 결과는 다음과 같습니다.
우리가 만든 대략적인 애니메이션을 볼 수 있듯이 아직 완료했다고 하기에는 너무 고르지 못한 것 같습니다. 따라서 이 문제를 해결하려면 우리가 만든 중간 프레임 사이에 더 많은 중간 프레임을 추가해야 합니다! (알았나요?) 😇
중간에 추가 추가!
이러한 추가 중간 프레임은 예측 및 스쿼시 기술을 사용했던 이전 프레임과 다릅니다. 이러한 프레임의 경우 키프레임에서 그 사이의 원본으로 부드럽게 전환되는 선을 그리기만 하면 됩니다.
1. 모든 키프레임 중간에 추가 프레임과 그 사이에 있는 원본 프레임을 만들고 그립니다. “e” 사이에 있는 모든 추가 항목에 레이블을 지정해 보겠습니다.
예상 결과는 이렇습니다!
현재 속도
느려짐
모든 프레임에서 일어나는 일은 다음과 같습니다 🙌
우리가 그린 총 프레임은 9개 프레임입니다.
1. 3x 키프레임 / 메인 포즈
2. 2x 중간 프레임
삼. 4x 추가 중간 프레임
거친 애니메이션이 약간 이상하다고 생각된다면 아직 타이밍을 미세 조정하지 않았기 때문입니다. 이 스케치 단계의 목표는 키프레임과 그 사이를 올바르게 그리는 방법을 파악하는 것입니다! 이제 타이밍 부분으로 갈 예정이니 더 이상 걱정하지 마세요! 😍
참고: 스케치 부분은 캐릭터의 가장 좋은 움직임이 아닙니다. 타이밍을 조정할 때 불필요한 프레임을 삭제하거나 새 프레임을 추가하고 싶을 수도 있습니다!
3단계: 타이밍!
애니메이션을 만들 때 타이밍을 조정하는 것은 저에게도 꽤 어려운 부분입니다! 모든 움직임이나 포즈에는 서로 다른 타이밍이 필요하기 때문에 애니메이션에 가장 적합한 타이밍을 알고 느끼려면 많은 연습이 필요합니다!
내 특정 캐릭터를 참조로 사용하지 않는 한 이 단계를 정확하게 복제할 수는 없습니다. 대신, 자신의 직감을 믿고 자신의 비전에 따라 타이밍을 조정하세요. 딱 맞는 느낌이 들 때까지 캐릭터의 움직임을 조정하세요!
다음은 감정 표현을 적절한 타이밍에 사용하는 데 도움이 되는 몇 가지 팁입니다.
1. 캐릭터의 이동 속도를 결정합니다.
-움직임이 느린 속도에서 빠른 속도로 진행되는 경우 프레임을 더 가깝게 배치하십시오.
-움직임이 빠른 것에서 느린 것으로 진행되면 프레임 간격을 조금 더 벌립니다.
2. 캐릭터 움직임이 제대로 느껴지지 않으면 변경, 삭제하거나 새 프레임을 추가할 수도 있습니다.
저는 이 튜토리얼을 만드는 동시에 애니메이션과 그림을 그리는 중이기 때문입니다. 삭제해야 할 불필요한 프레임도 있고 추가해야 할 프레임도 있습니다.
참고: 프레임이 너무 많거나 너무 적으면 애니메이션의 흐름과 선명도에 부정적인 영향을 미칠 수 있습니다.
타이밍을 조정하고 일부 프레임을 수정한 타임라인은 다음과 같습니다.
다음은 제가 삭제하고 추가한 프레임에 대한 일부 그림입니다.
1. 위 이미지에서 볼 수 있듯이 불필요한 프레임 3개를 삭제했습니다.
1. e2
2. e3
삼. e4
이 프레임은 캐릭터 움직임의 자연스러운 흐름을 방해하기 때문에 제거했습니다. 애니메이션의 각 프레임을 주의 깊게 검토하여 불일치를 유발하거나 모션이 부자연스러워 보일 수 있는 프레임을 식별하고 제거하는 것이 중요합니다.
2. 타임라인에 K22, K33 프레임을 추가했어요!
그런데 K2와 K3는 왜 똑같아 보이는 걸까요? 그 이유는 복제된 도면을 다음과 같이 늘려서 일부 오버랩 및 바운스 효과를 만들기 위해 해당 프레임을 복제했기 때문입니다.
늘리려는 프레임 선택 > CTRL Shift T를 눌러 자유 변형 모드로 전환 > 상단 노드를 선택하고 위쪽으로 약간 늘립니다
중첩 효과
위 이미지에서 "머리를 위로" 동작하는 동안 프레임으로 인해 캐릭터가 어떻게 겹쳐지는지 확인할 수 있습니다. 움직임을 과장하여 더욱 드라마틱하게 만들어줍니다!
바운스 효과
"머리를 위로" 동작을 취한 후 캐릭터가 머리를 빠르게 아래로 움직이면 윙크할 때 튀는 효과가 생성되는 것을 알 수 있습니다. 애니메이션에 역동성을 더해줍니다!
최종 결과는 다음과 같습니다!
전에
(멍청한 아아 움직임 💀 )
후에
(드디어 실제 움직임이 나오네요 🙂 )
4단계: 휴식을 취하면서 거친 애니메이션을 감상해보세요 ✨
스케치 및 타이밍 단계가 공식적으로 완료되었습니다! 잘하셨어요! ✨
물론 아직 끝나지 않았습니다! 부드러운 라인아트와 귀여운 컬러를 더해 제대로 된 이모티콘을 만들어서 좀 더 멋있게 만들어야 해요!
완성된 스케치 애니메이션을 감상하고 리뷰해 보는 시간을 가져보는 것은 어떨까요?
지금처럼 🥹🥹🥹
3. 라인 아트
이제 스케치 및 타이밍 단계에서 원하는 모션을 얻었으므로 부드럽고 정확한 선으로 애니메이션을 다듬을 차례입니다!
1단계: 애니메이션 레이어 설정
1. 스케치 애니메이션 레이어 불투명도를 30으로 낮추십시오.
2. 스케치 레이어 위에 새 애니메이션 레이어를 만들고 이름을 Lineart로 바꿉니다.
삼. 선화 애니메이션 레이어에 새 레이어 폴더를 만듭니다.
4. 레이어 폴더 셀을 애니메이션 프레임에 할당
이제 선화용 애니메이션 레이어 설정을 완료했습니다. 다음 단계로 넘어갑니다!
2단계: 선화 작업하기
애니메이션 레이어를 설정한 후 그 위에 선화를 그려 보겠습니다!
다음은 이 과정에서 도움이 될 수 있는 몇 가지 팁입니다.
도구:
1. 그리기 스타일에 맞는(그림에 항상 사용하는) 선호하는 펜 또는 브러시 도구를 선택하세요. 제 경우에는 G-Pen을 사용합니다.
삼. 펜이나 브러시 크기가 일정한지 확인하세요!
4. 펜의 안정 장치를 활성화하면 선을 칠 때 큰 도움이 됩니다.
5. 레이어 폴더에 더 많은 래스터 레이어를 추가하면 캐릭터 부분을 별도로 그릴 수 있습니다.
6. 변형 도구를 사용하여 그림 위치, 모양 등을 변경하세요.
팁:
1. 짧고 고르지 못한 스트로크보다는 부드럽고 자신감 있는 룩을 위해 길고 연속적인 스트로크를 사용하세요.
2. 휴식을 취하고 주기적으로 축소하여 전체 이미지를 확인하고 모든 것이 비례적이고 일관성이 있는지 확인하십시오.
삼. 인내심을 갖고 라인이 제대로 보이지 않으면 주저하지 말고 실행 취소하고 다시 시도하십시오. 몇 번의 시도가 필요하더라도 최고의 품질을 위해 노력하십시오.
4. 작업을 마친 후 겹치는 선이나 결함을 정리하여 애니메이션에 세련된 느낌을 더하세요.
5. 자유롭게 캐릭터 포즈를 사용자 정의하고 애니메이션에 프레임을 추가할 수 있습니다.
6. 스케치 레이어 가시성을 켜기 및 끄기로 전환하여 깨끗한 선화 진행 상황을 확인하세요.
지금 제가 드릴 수 있는 선화팁은 여기까지입니다
행운을 빌며 선화를 재미있게 즐겨보세요! 😘
여기 내 캐릭터의 선형화된 버전이 있습니다!
3단계: 휴식을 취하고 선화 버전의 애니메이션을 감상하세요 ✨
선화 작업이 공식적으로 완료되었습니다! 판타스틱! ✨
애니메이션 이모티콘 여행을 여기까지 오시느라 수고하셨습니다! 스케치, 타이밍 조정 및 라인 아트 완성은 애니메이션의 가장 어려운 측면이 될 수 있습니다. 이제 이러한 단계는 끝났으므로 재미있는 부분인 색칠하기로 들어가겠습니다! 그 그림에 생명을 불어넣어 보세요!
하지만 그 전에, 완성된 스케치 애니메이션을 다시 한 번 감상하고 리뷰해 보는 시간을 가져보는 것은 어떨까요?
지금처럼 (또)🥹🥹🥹
4. 채색 및 렌더링
애니메이션에서 그림을 색칠하고 렌더링하는 방식은 그림 자체의 복잡성에 따라 달라집니다. 하지만 우리는 단순한 디자인과 몇 개의 프레임만으로 색칠할 수 있는 감정 표현을 애니메이션으로 만들고 있기 때문에 이 부분이 가장 즐겁고 쉬운 부분이 될 것입니다!
1단계: 애니메이션 레이어 설정
1. Lineart 레이어 아래에 새 애니메이션 레이어를 만들고 이름을 Color로 바꿉니다.
2. 컬러 애니메이션 레이어에 새 레이어 폴더를 만듭니다.
삼. 레이어 폴더 셀을 애니메이션 프레임에 할당
이제 색상에 대한 애니메이션 레이어 설정을 완료했습니다. 다음 단계로 넘어갑니다!
2단계: 기본 색상
색칠 단계의 이 부분에서는 애니메이션의 기본 색상으로 채우기 도구를 사용합니다! 기본 색상을 수행할 수 있는 두 가지 방법이 있습니다.
첫 번째 방법: 채우기 도구 사용
1. 색상 레이어와 프레임을 선택했는지 확인하세요.
2. 툴바에서 채우기 도구를 선택하세요.
삼. 채우기 도구 설정에서 "다른 레이어 참조"를 선택합니다.
이를 통해 다른 활성 레이어의 경계를 기반으로 채우기 도구를 사용할 수 있습니다.
4. 원하는 색상을 선택하세요
5. 채우기 도구를 사용하여 캔버스에 색칠하기
6. 완료!
두 번째 방법: 올가미 도구 사용
1. 색상 레이어와 프레임을 선택했는지 확인하세요.
2. 툴바에서 선택 영역을 선택합니다.
삼. 올가미를 선택하세요
4. 원하는 색상을 선택하세요
5. 올가미 도구를 사용하여 색상으로 채울 캔버스의 특정 영역을 그리고 선택합니다.
6. 팝업이 나타나면 페인트통 아이콘(또는 채우기 아이콘)을 선택하세요.
이것이 바로 애니메이션에 기본 색상을 적용하는 방법입니다! 지금 해야 할 일은 만드는 각 프레임에 대해 동일한 과정을 반복하는 것뿐입니다!
기본 색상을 적용한 내 캐릭터는 다음과 같습니다!
이 단계를 마치면 우리의 성격을 명확하게 볼 수 있습니다!
다음으로 넘어 갑시다!
3단계: 렌더링
렌더링 단계에는 보조 색상, 음영 및 하이라이트 추가가 포함됩니다. 수행해야 할 작업은 다음과 같습니다.
섀도우 라인
각 키프레임에 대해 그림자 선을 스케치하면 렌더링 프로세스 중에 일관되고 정확한 음영 처리가 보장됩니다. 이는 렌더링 레이어에 색상을 적용할 때 테두리가 된다는 의미입니다. 방법은 다음과 같습니다.
1. 캐릭터 선화 위에 새 애니메이션 레이어를 만들고 이름을 Shadow Line으로 지정합니다.
2. 모든 프레임에 캐릭터 그림자 선을 그립니다. (더 나은 보기를 위해 대비 색상을 사용하십시오)
참고: 캐릭터 하이라이트 등 다른 항목에도 이 기능을 구현할 수 있습니다.
내 캐릭터에 구현된 그림자 선은 다음과 같습니다 ✨
내 캐릭터는 슬라임이기 때문에 그림자 라인을 다른 캐릭터 디자인과 확연히 다르게 만들어야 해요! (몸속에 그림자가 있는듯)
표현
이제 다음 단계에 따라 렌더링 프로세스를 시작할 수 있습니다.
1. 그림자 선 레이어 아래에 새 애니메이션 레이어를 만들고 이름을 Render로 지정합니다.
2. 새 레이어 폴더를 추가하고 렌더 레이어 프레임에 할당합니다.
삼. 렌더링 레이어를 선택한 다음 채우기 도구를 사용하여 그림자 영역에 색상을 지정합니다.
(채우기 도구 옵션이 "다른 레이어 참조"인지 확인하세요)
4. 모든 프레임에 대해 수행
5. 그림자 선 사용이 끝나면 가시성 버튼을 끄거나 필요한 경우 삭제할 수 있습니다.
짜잔! 애니메이션의 최종 결과는 다음과 같습니다!
지금쯤이면 완료되었다고 할 수 있습니다! 하지만 앞서 프레임별 애니메이션의 첫 페이지에서 언급했듯이 몇 가지 마무리 작업을 추가하겠습니다! 😍
5. 마무리 손질
마무리 터치는 다양할 수 있습니다. 특수 효과, 배경 또는 애니메이션 작품을 향상시킬 수 있는 기타 요소를 추가하여 애니메이션을 향상시킬 수 있습니다!
반짝이 효과를 적용한 애니메이션 이모티콘의 마무리 작업은 다음과 같습니다! ✨
최대 레벨을 획득했습니다! 축하해요! ✨
애니메이션 감정 표현을 만들면서 프레임별 애니메이션 기술을 마스터하셨습니다! 이 성과를 바탕으로 이제 새로운 창의적인 여정을 시작하고 기술을 더욱 연마할 준비가 되었습니다. 애니메이션의 세계는 당신의 다음 걸작을 간절히 기다리고 있습니다! 🚀
애니메이션 감정 표현 내보내기
저와 함께 애니메이션 감정 표현을 만드는 다양한 단계를 거치면서 기술 이상의 것을 얻으셨습니다. 우리가 함께 만든 애니메이션 이모티콘을 기념품으로 가져가세요! 결국 그것은 당신의 노력과 헌신에 대한 증거입니다. 즐기다! 🌟
애니메이션 이모티콘을 받는 방법:
1. 원하는 애니메이션 시작 및 종료 지점 프레임을 조정하세요.
2. 파일 > 내보내기 > 애니메이션 > 애니메이션 GIF…를 엽니다.
삼. 애니메이션 이모티콘을 저장할 대상 폴더를 선택하세요.
내보내기 설정을 수정할 수 있는 팝업 창이 나타납니다.
1. 너비와 높이, 애니메이션 이모티콘 크기(픽셀)
2. 내보내기 범위, 내보낼 프레임 길이
삼. 프레임 속도, 최대(24FPS)로 설정
4. 디더링 또는 배경 투명으로 내보내기는 귀하에게 달려 있습니다
5. 좋아요
야이야! 애니메이션 이모티콘을 받으셨습니다! ✨
애니메이션 마스터리 핀
이제 저와 함께 열심히 애니메이션 작업을 하신 것에 대한 기념품을 가지셨으니, 여기로 가서 작품을 가져가시는 건 어떨까요? 당신은 어느 것을 얻나요? 🙌
폐쇄
내 경험을 애니메이션 이모티콘으로 공유하는 여정이 끝났습니다. 이 과정을 통해 여러분을 안내할 수 있어서 기뻤으며 여러분이 이 과정을 통해 깨달음을 얻었기를 진심으로 바랍니다. 🤣 💖
자신만의 애니메이션 모험을 시작할 때 항상 호기심을 갖고, 자주 연습하고, 가장 중요하게는 그 과정을 즐겨야 한다는 점을 기억하세요! 귀하의 모든 창의적인 노력에 행운이 있기를 바랍니다.
다음 시간까지! ✨ ✨ ✨
이 게시물에 '좋아요!'를 누른 사용자
댓글