간편한 애니메이션: 색상

색상 콘셉트와 관련해서는 파란색 배경과 노란색 글자로 전체를 매우 단순하고 간결하게 만드는 것을 고려했습니다. 파란색과 노란색은 보색이기 때문에 가독성이 뛰어나고 서로 잘 돋보입니다.

이제 이론적으로는 새로운 색상 영역을 만들어 파란색을 지정한 다음 텍스트를 노란색으로 채색할 수 있습니다. 이렇게 할 수 있지만 애니메이션 중간에 전체 이미지 위에 와이퍼를 배치하여 색상을 반전시키는 방법에 대한 문제가 발생합니다.

레이어>새로 만들기 >조정 레이어 또는 Ctrl+Alt+Y를 사용하여 조정 레이어를 만든 다음 채널 반전 효과를적용할 수 있습니다. 하지만 색상이 완전히 보색이 아니라는 것을 알 수 있습니다. 주황색은 파란색과 보색이 되어야 하는데 여기에는 맞지 않아서 색상이 맞지 않습니다.




하지만 저는 이 작업을 꼭 하고 싶고 가능성이 있습니다.

1단계

다음과 같이 구축해 봅시다: 감청색 영역을 선택하고 Ctrl+Shift+Y를 누르거나 레이어>색상 영역 설정으로 이동하여 색상을 검정색으로 설정합니다.

그러면 색상이 멋지게 변경되고 After Effects에서 색상 영역의 이름도 바뀝니다.

이제 "애니메이션이 쉬워졌습니다"라는 텍스트를 흰색으로 간단히 작성합니다.

투명도가 없는 흑백으로 되어 있어 아주 쉽게 되돌릴 수 있습니다.





하지만 지금은 흑백으로 유지되지만 파란색과 노란색을 원합니다.

2단계

Ctrl+Alt+Y를 사용하여 다른 조정 레이어("조정 레이어 2")를 만들고 효과>색상 보정>색상을 적용합니다.

이 효과는 매우 간단하며 색상을 미리 매핑하기만 하면 됩니다. 흑백을 가져와서 다른 색상 값을 할당합니다.

그런 다음 여기에서 검정색을 가져와 파란색을 조정합니다. 저는 이미 이 아름다운 파란색인 "008FF"라는 색상 코드를 적어두었습니다.

그리고 노란색으로 흰색을 조정하고 색상 값은 매우 강한 노란색인 "FFF000"입니다.

3단계

이제 반전 레이어 다음에 이 레이어를 적용했습니다. 전체 이름을 "색상 변경"과 "색상화"로 지정합니다.

또한 다시는 건드릴 필요가 없으므로 상단 레이어를 잠급니다.

"색상 변경"을 켜고 끄면 주황색이나 보라색으로 미끄러지지 않고 색상이 멋지게 반전됩니다.





하지만 전환을 어떻게 디자인할까요? '색상 변경' 레이어를 이미지에서 왼쪽에서 오른쪽으로 또는 위에서 아래로 이동하여 전환을 만들 수 있습니다. 하지만 그다지 흥미롭지 않습니다.

저는 전체를 스트립으로 나누고 이 스트립을 이미지 전체에 걸쳐 닦아 가장자리를 조금 더 나누고 싶습니다. 이를 위한 가장 좋은 방법은 무엇인가요?

4단계

효과>전환 효과와 같은 효과가 있는데, 여기에는 한 방향으로 진행되지만 먼저 한 줄이 끝나고 다음 줄이 시작되는 라인 스윕이 있습니다.

저에게는 충분히 불규칙하지 않습니다.

5단계

그렇기 때문에 마스크를 사용하는 것이 가장 좋습니다. 마스크 아이콘을 두 번 클릭하고 제 치수에 정확히 맞는 마스크를 만듭니다. 이것은 나중에 다시 사용할 매우 실용적인 기능입니다.

6단계

이 마스크를 20개 조각으로 나누어 20개의 개별 열을 만들고 싶습니다. 이것은 표준 After Effects 도구로는 불가능합니다.

하지만 이런 상황에서는 스크립트를 작성합니다. 여기서 사용하는 스크립트는 각 튜토리얼에 스크립트를 포함시켰습니다.

레이어 체인저, 마스크 슬라이서 및 시퀀스 스트로크를 찾을 수 있습니다. 여기서 마스크 슬라이서가 필요한 것은 상상할 수 있듯이 마스크 슬라이서입니다.

파일 이름 앞에 있는 이 기호는 여기에서 시작할 수 있는 확장 스크립트 툴킷에 속합니다. 마스크 슬라이서를 시작하면 이 익스텐드스크립트 툴킷도 함께 시작됩니다.

이 툴킷은 기본적으로 설치되어 있지 않기 때문에 별도로 설치해야 합니다. 그래도 이 작업을 수행해야 하며 CreativeCloud를 통해 매우 쉽게 수행할 수 있습니다.

위의 스크립트에는 몇 가지 설정이 있습니다. 모든 스크립트는 제가 직접 사용하기 때문에 사용자 인터페이스를 만들지 않았습니다. 즉, 텍스트 파일에서 직접 여기에 있는 모든 설정을 변경해야 합니다.

이 경우 두 가지 값을 변경할 수 있습니다: "noOfSplices", 즉 최종적으로 얼마나 많은 개별 슬라이스를 가질 것인지.

그리고 참 또는 거짓으로 설정할 수 있는 "seperateLayers"입니다. 참이면 각 슬라이스에 대해 새 레이어가 추가됩니다.

4개의 슬라이스로 시도해 보겠습니다...

... After Effects로 이동하여 슬라이스할 마스크를 선택합니다. 이것은 매우 중요합니다.

그런 다음 응용 프로그램 대상의 상단에서 After Effects CC를 선택합니다. 보시다시피 이 툴킷에는 스크립트를 작성하고 테스트하기 위한 다른 프로그램도 있습니다.

이 경우 After Effects를 선택한 다음 재생 버튼을누릅니다 ...

... 그리고 After Effects로 돌아갑니다. 거기에는 각각 하나의 레이어로 구성된 새 레이어가 있습니다.

이제 여기에 4 색 그라디언트를 생성하면 ...

... 그러면 전체가 다시 이미지를 제공하는 것을 볼 수 있습니다. 실제로는 하나의 좌표를 가진 레이어이며 마스크만 슬라이스됩니다. 즉, 이 레이어의 개별 슬라이스를 개별적으로 이동하고 회전할 수 있기 때문에 매우 실용적일 수 있습니다.





하지만 여기서는 그럴 필요가 없습니다. 다른 것을 원합니다.

7단계

모든 마스크를 4개가 아닌 20개로 하나의 레이어에 배치하고 싶습니다.

그리고 seperateLayers를 false로 설정합니다 . 저장하고 재생으로 돌아가서 ...

... 이제 하나의 레이어에 20개의 마스크가 모두 있습니다.

1-20 중에서 선택하고 Ctrl+C 또는 cmd+C를 누릅니다 . 그런 다음 원본 마스크를 삭제하고 그 자리에 모두 붙여넣습니다.

이제 마스크가 모두 완성되었으므로 다음 단계에서 애니메이션을 적용하고 싶습니다.

8단계

안타깝게도 마스크에는 회전 및 크기 조정과 같은 변형 속성이 없고 마스크 경로만 있습니다. 하지만 이는 문제가 되지 않습니다.

모든 마스크를 선택하고 펼치면 됩니다. 그런 다음 마스크 경로를 클릭 하고 키 프레임을 설정한 다음 조금 후에 컴포지션으로 이동하여 모든 마스크를 이미지에서 직접 아래로 이동합니다.

9단계

이것을 살펴봅시다. 음악이 배경에서 재생되고 있습니다. 이제 두 개의 선형 키프레임이 생겼는데, 특별히 흥미롭지는 않습니다.

저는 좀 더 흥미진진했으면 좋겠고, 디즈니 규칙에서 이미 들었듯이 일정한 속도는 현실에서 일어나지 않으므로 애니메이션에서도 필요하지 않으므로 선형 키프레임으로 작업하고 싶지 않습니다.

10단계

이를 위해 다이어그램 편집기를 클릭합니다. 거기에서 튀는 공에 대해 자세히 알아볼 곡선을 얻습니다.

마스크 경로로 제한하기 위해 모든 마스크를 선택하고 U를 누르면 모든 애니메이션 속성이 제공되기 때문입니다.

이제 속도 그래프를 볼 수 있습니다. 나중에 살펴보겠지만 값 곡선만큼 작업하기 좋지는 않습니다. 하지만 동시에 많은 프로퍼티에 애니메이션을 적용하려는 경우 유용하게 사용할 수 있습니다.

먼저 F9 키를 누르거나 이 버튼을 사용하여 쉽게 적용하고 싶습니다.

이렇게 하면 그래프가 크게 달라집니다. 왼쪽의 그래프는 일정한 속도이며, 특정 속도에서 시작하여 갑자기 멈춥니다.

이지 이즈를 사용하면 0에서 천천히 속도를 높인 다음 다시 속도를 낮춥니다. 이것은 포물선 모양입니다.

좀 더 극단적으로 만들고 싶어요. 탄젠트를 잡고 약간 당겨서 가운데에 정점이 생기도록 하겠습니다.

어떻게 생겼는지 봅시다...





실행해보고 볼게요: 바로 그 위로 부드럽게 움직입니다. 시작과 끝보다 중간에 훨씬 더 빠른 움직임이 있습니다. 아주 마음에 듭니다.

11단계

위치도 똑같이 할 수 있었지만 왜 슬라이스를 만들었을까요?

이제 시간에 따라 불규칙하게 움직이고 키 프레임을 무작위로 배열하여 노출 모양에 약간의 변화를 주었습니다. 선이 모두 동시에 지나가면 안 됩니다.

결국 스카이라인처럼 보이게 됩니다. 일반적으로 이미지를 구분하는 이 하나의 선을 나누고 싶습니다. 때로는 한쪽에만, 또는 앞쪽에만, 또는 뒤쪽에만 그어도 충분합니다. 같은 높이에서 끝나는 것을 피하려고 노력합니다.

보기 좋네요.

미리 보기를 활성화하면 멋지게 보입니다. 환상적이네요.

12단계

이제 이 레이어를 가져와서 회전하고, 크기를 조정하고, 이동하고, 반전 효과이므로 더 자주 사용할 수 있습니다.

우리는 그것을 복제하고 시간에 맞춰 이동하고 노란색에서 파란색으로, 파란색에서 노란색으로 변경합니다.





그러나 이 경우에는 미리 표시되었다가 더 이상 표시되지 않습니다. 레이어가 처음에 있는 것을 원하지 않고 레이어가 그 앞으로 이동하기를 원하기 때문에 여전히 이것을 뒤집어야 합니다.

그래서 복제된 레이어를 다시 삭제하고 '색상 변경' 레이어를 활성화합니다. 그런 다음 모든 키프레임 위에 직사각형을 그려서 선택합니다.

키프레임 마법사를 마우스 오른쪽 버튼으로 클릭하고 하단에서 키프레임 순서 반전을 찾습니다.

방금 누르고 나니 노란색이 아래쪽에서 파란색으로 이동합니다.

이제 레이어를 다시 복제하고 전체를 조금 더 뒤로 이동해도 작동합니다.

이제 한 색상에서 다른 색상으로 이동했다가 다시 돌아올 수 있습니다. 완벽하네요.





이미 작동합니다. 이 튜토리얼 시리즈의 다음 구성 사이트는 텍스트입니다.