간단한 애니메이션

루핑 애니메이션으로 전문적인 웹 자산을 만드십시오!

4,507

MarshallWolff

개요

많은 사람들이 브랜딩에 역동적이고 애니메이션이 적용된 요소를 사용하여 트래픽 호소력을 높이고 웹 사이트에 고유성을 추가합니다. 이것은 종종 CSS 및 기타 개발 언어를 사용하여 수행되지만 애니메이션 이미지를 사용하는 방법은 많이 있습니다. 이 튜토리얼에서는 웹 디자인에서 애니메이션을 사용하는 방법, 클립 스튜디오에서 24 프레임 루핑 애니메이션을 만드는 방법을 배우고 유용한 기술을 배우게됩니다!

1. 개념화

2. 웹 애니메이션 팁

3. 애니메이션 및 키 프레임 스케치

4. CLIP STUDIO 준비

5. 마무리

6. 웹 사이트에서 사용

7. 즐거운 시간 보내세요!

1. 개념화

스케치를 시작하기 전에 자산 사용 방법, 브랜드 (이 제품을 생산하는 사람 또는 제품의 전체 스타일) 및 귀하 또는 고객이 필요로하는 기타 요구 사항을 고려해야합니다.

애니메이션 사용 방식은 디자인 및 애니메이션 방식에 영향을줍니다.

로딩 화면, 라이브 로고, 배경, 페이지의 작은 요소에 이것을 사용할 것입니까? 이러한 질문은 애니메이션이 미묘해야하는지 여부를 결정하는 데 도움이됩니다 (웹 사이트에서 애니메이션 비명 머리를 원하지 않는 경우 예를 들어 청중이 대신 무언가를 읽거나 흥미 진진한 (로고나 버튼에 관심을 끌면 도움이 될 수 있음) 단순히 지루한 페이지에 약간의 생명을 불어 넣을 수있는 무언가를 원합니다. 디자인 사용법에 따라 수행 할 작업을 결정하는 방법에 대한 아이디어는 "팁"섹션을 참조하십시오. 또한 "웹 사이트 애니메이션"을 조사하여 더 많은 아이디어를 얻기 위해 모든 종류의 애니메이션 자산을 사용하는 창의적인 웹 사이트를 찾아야합니다.

웹 사이트의 브랜딩도 고려해야 할 중요한 사항입니다.

고객을 위해이 프로젝트를 수행하고 있다면 이미 어떤 종류의 디자인을 사용하고 있습니까? 웹 사이트의 다른 요소와 잘 어울리려면 애니메이션이 어떤 스타일이어야합니까? 이것이 어떤 시청자 (애니메이션 팬, 전문가, 사업자 등)를 목표로하고 있으며 그들이 무엇을 즐기거나 기분을 상하게 할 것이라고 생각하십니까? 클라이언트에 특정 요청이 있습니까? 이것들은 고객과의 중요한 토론입니다.

개인 프로젝트를 위해이 작업을 수행하는 경우 동일한 대상을 고려해야합니다. 청중은 누구입니까? 어떻게 일관성을 유지합니까? 프로젝트에 대해 무엇을 말하고 싶습니까?

이런 종류의 것들에 대해 더 알고 싶다면 마케팅 또는 시각적 커뮤니케이션에 대해 읽으십시오.

이 튜토리얼에서는 작품을 전시 할 포트폴리오 웹 사이트를 만들고 있습니다. 첫 페이지에 표시 될 제목 요소를 만들고 싶습니다. 시청자의 관심을 끌기 위해 많은 관심을 끌어 야합니다. 또한 페이지를 내 이름으로 가리키고 누군가가 페이지를 아래로 스크롤하도록 지시하는 것을 원합니다. 따라서 나는 내 이름이 중심을 향한 시선을 끌어내는 하향 움직임이있는 크고 극적인 애니메이션이기를 원합니다.

이는 잠재 고객이 내 웹 사이트를 볼 때 가장 먼저 보게되므로 나머지 사이트는 비슷한 스타일이나 느낌을 갖습니다. 내 청중은 다른 아티스트 (스케치와 비슷한 모양이 유리할 수 있음), 가능한 고용주 (전문적인 것을 생산할 수있는 능력을 보여줄 수있을만큼 깨끗하고 세련되어야 함), 그리고 희망이 많은 동료 대단함 (재미 있고 과학적인 것) 일 것입니다 이 잠재 고객이 즐길 수있을 것입니다). 이 정보를 바탕으로, 나는 스케치 스타일, 많은 선과 모양, 그리고 아마도 어떤 행성 들이나 달들이 궤도에있는 무언가를하고 싶다는 것을 알고 있습니다. 또한 웹 사이트에 내 포트폴리오 조각을 팝하게하는 어두운 색 구성표가 있으므로이 애니메이션은 명암으로주의를 끌기 위해 밝고 포화 된 구성표를 가져야한다는 것을 알고 있습니다.

많은 가능성이 있습니다 !!! 그러나 따라야 할 제약을가함으로써 궁극적으로 창의성과 최종 제품을 향상시킬 것입니다.

2. 웹 애니메이션 팁

실제 및 마케팅 관점에서 애니메이션이 어떻게, 어떻게해야하는지 알았으므로이 팁을 사용하여 애니메이션에 대한 최상의 아이디어를 생성하십시오.

1. 애니메이션은주의를 기울인다 : 웹 페이지에서 움직이는 것은 애니메이션 일 뿐이며 많은 관심을 끌게된다. 이 기능을 유리하게 사용하되 더 중요한 정보에서주의를 기울일 수 있다는 점에 유의하십시오.

2. 예측할 수 없음 : 인간은 패턴을 인식하는 데 능숙하며 간단한 방식으로 반복되는 애니메이션이 매우 빨리 지루해질 수 있습니다. 애니메이션에서 다르게 움직이거나 지속 시간이 다르거 나 다른 시간에 시작하여 훨씬 더 역동적이고 매력적인 루프를 만들기 위해 여러 객체를 애니메이션에 추가하십시오.

3. 스터 터링 루프 방지 : 루핑 애니메이션 디자인을 시작하는 좋은 방법은 첫 번째 프레임과 마지막 프레임을 동일하게하는 것입니다. 그러나이 방법으로 유지하면 동일한 프레임이 두 번 재생되므로 애니메이션이 다시 시작되면 잠시 멈추는 것처럼 보입니다! 마지막 프레임은 연속 루프에 대한 전환 프레임 (3 장에서 설명)이어야합니다. 애니메이션이 최종 제품 (24 대신 25)보다 하나 더 많은 프레임을 갖도록 계획하고 싶습니다. 따라서 마지막 프레임을 삭제하고이 문제를 피할 수 있습니다.

4. 애니메이션 요소가 생명을 추가 할 수 있음 : 미묘한 접근 방식을 두려워하지 마십시오. 작고 간단한 루프는 웹 페이지에 멋진 추가 기능이되어 지루한 정보를 제공 할 수 있습니다. 눈은 초점을 맞추고있는 것보다 더 많은 것을 볼 수 있으므로 단락의 측면에서 작은 움직임으로 인해주의를 끌 수 있습니다. 그러나 미묘하거나 작거나 느리면 시청자가 페이지의 단어에 집중하면서 모션을 감지 할 수 있기 때문에 웹 페이지가 실제로 살아있는 것처럼 느끼게 할 수 있습니다!

5. 실제 움직임으로 눈을 향하게하십시오 : 예술의 원칙 중 하나는 움직임, 즉 리듬, 여러 초점을 사용하여 시청자가 눈을 향하게하여 사진을 보는 방법을 본질적으로 제어 할 수 있다는 것입니다. 이에 대한 자세한 내용은 Gestalt 디자인 이론!). 그러나 디지털 방식으로 실제 동작과 동일한 작업을 수행 할 수 있습니다. 사람들은 움직이는 물체를 자동으로 따라가는 경향이 있으므로 원하는 방향으로 무언가를 움직이는 것만 큼 간단하게 눈을 원하는 곳으로 이동할 수 있습니다.

6. 그러나 그 (것)들을 덫을 놓지 말라 !!! : 반복되는 애니메이션으로, 관객은 갇힐 위험이있다, 그래서 다른 초점에 시선을 끌고 그 (것)들을 신속하게 멀리 이동하는 움직임으로 탈출하게하십시오 본질적으로 제거됩니다.

7. 대비 : 움직이는 요소와 움직이지 않는 요소 사이의 대비는 놀라운 도구가 될 수 있습니다 (영화에서 어떻게 사용되는지 살펴보십시오!). 모션을 사용하여 정적 객체를 강조 표시하거나 감정을 전달하거나 앞에서 언급 한 것처럼 다른 객체를 다른 속도로 움직여서 관심을 더 추가하십시오.

휴 !!! 애니메이션을 사용하는 다른 많은 창의적인 방법이있을 수 있습니다. 생각이 있으시면 의견을 보내주십시오 !!!

3. 애니메이션 및 키 프레임 스케치

스케치는 물론 정적 인 요소이므로 실제로 애니메이션을하기 전에 애니메이션이 어떻게 보이는지 알아 내기가 어려울 수 있습니다. 아래에서는 종이 (또는 Clip Studio의 평면 레이어)에서 애니메이션을 계획하는 방법에 대해 설명합니다.

애니메이션은 일반적으로 "키 프레임"으로 계획됩니다.이 프레임은 객체 모션의 가장 중요한 단계를 보여주는 프레임입니다. 예를 들어, 점프의 경우, 점프 중간에 서서 다시 서 있습니다. 두 키 프레임 사이에있는 모든 프레임을 "전환 프레임"이라고합니다. 즉, 한 키 프레임에서 다른 키 프레임으로 객체를 가져 와서 애니메이션에 생명을 불어 넣는 방법을 보여줍니다. 아래 스케치는 실제로 그림을 애니메이션하기 전에 다른 유형의 모션을 계획하는 방법을 보여줍니다. 다음 팁은 이해하는 데 도움이됩니다 (그림의 글은 실제로 내 메모를위한 것이기 때문에 가능한 한 누락 된 느낌이 들지 않도록하십시오) 읽지 마십시오).

이것들은 위와 같은 스케치를 만드는 데 사용하는 것들 중 일부입니다.

1. 계획을 세우기 전에 몇 가지 스케치를 생각해 본 다음이 단계를 사용하여 정지 그림과 같이 컴포지션 및 전체 디자인에 중점을 둡니다 (1 부 내 스케치 참조).

2. 복잡한 애니메이션을보다 쉽게 관리 할 수 있도록 개별 개체를 분리하여 별도로 계획하십시오.

3. 다음 제안을 사용하여 객체의 각 키 프레임을 그립니다.

I. 모양 만 변경하는 오브젝트의 경우 가장 큰 변경 사항을 표시하기 위해 각 키 프레임을 그립니다.

II. 위치와 모양을 변경하는 객체의 경우 각 키 프레임을 다른 키 프레임과 비교할 위치에 그리는 것이 좋습니다. 이를 통해 두 가지 유형의 변경 사항을 모두 추적 할 수 있습니다.

III. 위치 만 변경되는 객체의 경우 단일 키 프레임을 그리고 디자인의 정적 객체와 관련하여 객체가 어디에 있는지 (예 : 원의 중심선) 나타내는 것이 도움이 될 수 있습니다.

4. 전환 프레임이 애니메이션의 모양을 어떻게 만들지 항상 기록하지만 각 프레임을 그리지는 마십시오 (나중에 수행 할 것입니다).

5. 각 전환 프레임은 동일한 시간 간격으로 구분되므로 키 프레임 사이가 많을수록 작업 속도가 느려집니다 (그 반대도 마찬가지). 나는 개인적으로 선을 사용하여 원하는 프레임 수와 원하는 위치 및 시간을 추적합니다.

6. 모든 객체가 같은 수의 프레임으로 루프를 완성하도록합니다 (이 경우 25 번 반복 키 프레임을 잘라낼 수 있습니다). 이것을 추적하기 위해 키 프레임에 번호를 매기십시오 (키 프레임 1은 프레임 1, 키 프레임 2, 3 등이 프레임 2와 24 사이에 있으며 마지막 키 프레임은 동일해야 함) 1은 25에 있습니다). 이를 통해 실수로 한 개체가 다른 개체보다 오래 걸리지 않도록하고 애니메이션을 다시 만들도록합니다.

7. 객체가 모션을 여러 번 순환하고 싶지만 총 프레임 수를 쉽게 나눌 수없는 경우 (예를 들어 25를 2 또는 3으로 나눌 수 없음), 객체를 갖도록 계획 할 수 있습니다 두 개의 유사한주기. 예를 들어, 나는 행성이 12 프레임 길이의 한주기와 13 프레임 길이의 거의 동일한주기를 거치도록 계획했습니다.

8. 아래와 같이 타임 라인을 만드십시오. 전체 애니메이션에 선을 그리고 그 옆에 애니메이션의 모든 개별 객체에 대한 상대 길이, 시작점 및 각 키 프레임의 위치를 나타내는 선을 그립니다. 이를 통해 객체의 속도를 비교하고 (가까운 키 프레임은 일반적으로 빠른 작업을 의미 함) 모든주기가 추가되는지 확인하고 더 많은 관심을 갖도록 조정합니다.

9. 기호를 사용하여 설명하거나 그리기 어려운 것들을 추적하십시오 (예를 들어, 애니메이션을 역방향으로 반복하고 싶을 때 두 가지 방법을 가리키는 화살표를 사용합니다).

10. 개체를 3D로 보이게 만들려면 기본 양식으로 스케치를 차단하십시오 (큐브가 특히 유용합니다 !!!).

4. 클립 스튜디오 애니메이션!

Clip Studio에서 작업 공간을 최적화하는 방법에 대한 많은 자습서가 있으므로 필요한 기본 사항과 시작 방법을 간단히 살펴 보겠습니다. Clip Studio EX를 사용하고 있으므로 Pro에 약간의 차이가있을 수 있습니다. 그러나 24 프레임 만 사용합니다.

뭔지 맞춰봐? 당신은 이미 종이에 많은 일을했습니다 !!! 새로운 일러스트레이션을 만듭니다. 나는 이것을 웹 사이트를 위해 만들고 있으므로 지금은 72ppi의 1920 * 1400 픽셀이 좋은 출발점입니다. 아직 애니메이션으로 만들지 마십시오!

전체 디자인을 스케치하거나 스케치 그림을 종이에 가져옵니다.

이제 평소와 같이 일러스트레이션을 만들지 만 레이어를 사용하여 객체를 분리하십시오.

애니메이션에 따라 벡터 레이어를 사용하여 아래 비디오와 같은 애니메이션 프로세스를 간소화 할 수 있습니다! 디자인을 설명하고 계층화 할 때 사용할 수있는이 방법과 다른 방법에 대해 생각해보십시오. 이렇게하면 많은 도움이됩니다.

완료되면 모든 레이어 (스케치 제외)를 폴더에 배치하십시오. 여전히 남아 있고 다른 모든 레이어 아래에있는 레이어가있는 경우 레이어를 폴더 밖으로 남겨 둘 수 있습니다 (여전히 다른 레이어와 동일 함).

마지막으로 애니메이션 할 시간입니다! 타임 라인 창을 열고 새 타임 라인 추가라는 단추를 찾은 다음 24 프레임으로 설정하십시오. 자신 만의 프레임 속도를 선택할 수 있지만 애니메이션의 프레임 수가 적을 때 15fps를 사용하는 것이 좋습니다. 상단의 애니메이션 메뉴로 이동하여 애니메이션 폴더 추가를 선택하십시오. 레이어 폴더를 새 애니메이션 폴더에 넣습니다. 이제 레이어 폴더의 복제본을 23 개 만듭니다 (이 작업의 바로 가기로 ctrl + alt + d를 설정했습니다). 더 쉽게 작업 할 수 있도록 이름을 바꾸고 숫자로 바꿀 수 있습니다.

애니메이션 메뉴로 돌아가서 트랙 편집, 배치 지정 셀을 선택하십시오. 애니메이션 폴더의 첫 번째 레이어 폴더가 선택되어 있는지 확인하고 배치 지정 대화 상자에서 "기존 애니메이션 셀의 이름 지정"을 선택하십시오. 첫 번째와 마지막 폴더의 이름이 나열되어야합니다. 애니메이션에서 각 폴더를 프레임으로 설정합니다.

이 방법을 사용하면 매번 다시 그릴 필요없이 약간만 변경하고, 개체를 분리하여 복잡한 애니메이션을보다 쉽게 관리 할 수 있으며, 반복해서 그림을 겹쳐 놓는 혼란을 피할 수 있습니다. 이 방법은 벡터 레이어를 사용할 때도 유용합니다. 각 프레임을 통과하고 제어점을 조정하여 빠르고 쉽게 선을 변경할 수 있습니다. 이제 각 객체의 키 프레임을 원하는 위치로 정확하게 이동 한 다음 타임 라인에서 계획 한대로 전환 프레임을 만들 수 있습니다.

또는 각 객체 (각 레이어)를 다른 애니메이션 폴더로 분리하고 각 레이어의 복제본을 만들 수 있습니다. 여러 가지 방법으로 유용 할 수 있습니다.

온 워드 !!!

5. 마무리

마지막으로 모든 것을 테스트 할 수 있습니다! 타임 라인을 재생하여 작업 결과를 확인하십시오!

겉으로 보이는 것이 있으면 이상하게 행동하는 이유를 이해 한 다음 돌아가서 문제를 일으키는 전환 프레임을 수정하십시오.

문제 해결을 마치면 지저분하거나 불완전하게 보이는 부분을 다듬을 수 있습니다.

개인적으로 두 개의 행성이 우연히 별 측면의 광선 앞에 있다는 것을 깨달았습니다. 내 이름을 위해 애니메이션을 다시 실행해야하며 거기에 지저분한 선이 있습니다!

참고 : 프레임을 더 추가하고 프레임 속도를 높이는 것만으로 애니메이션을 부드럽게 만들 수 없습니다. 더 많은 전환 프레임을 추가하는 것보다 스쿼시 및 스트레치, 아킹, 지연 등과 같은 애니메이션 원칙을 사용하여 잘 설계된 전환 프레임을 만드는 것이 훨씬 더 중요합니다.

6. 웹 사이트에서 사용

애니메이션을 GIF로 내보내십시오.이 형식은 가장 많이 사용되는 형식이며 Adobe Portfolio, Squarespace 등과 같은 대부분의 웹 사이트 제작자는 이미 애니메이션 반복을 지원하므로 사용자 (또는 클라이언트)가 간단하게 제자리에 배치 할 수 있어야합니다. 그렇지 않으면, 나는 (아직) 도울 수 없다고 두려워하지만이 주제와 다른 주제에 대한 많은 웹 개발 튜토리얼이 있어야합니다.