이번 시간에는 Shape Layer 작업 시, 불필요한 시간을 절약할 수 있게 해주는 ButtCapper Script와 타이포 그래픽이나 이미지 등의 오브제를 시뮬레이션처럼
손쉽게 애니메이션으로 바꿔주는 Wind Script를 알아보겠습니다.
1. Shape Layer 작업 시 Stroke
01. ButtCapper Script는 무료 Script입니다. 무료지만, Shape Layer 작업 시, 디테일한 디자인을 하는 분들에게는 상당히 도움이 되는 Script 중 하나입니다. 모양을 보면 알 수 있지만, Shape Layer의 Stroke에 있는 Line Cap과 Line Join의 형태를 결정할 수 있는 아이콘들이 눈에 보입니다.
02. RubberHose라는 멋진 AE 캐릭터 리깅 애니메이션 툴을 만든 Battleaxe社의 Script입니다. http://www.battleaxe.co에 방문해서 RubberHose Script도 한번 살펴보기 바랍니다. 사이트에 들어가면, ButtCapper를 무료로 다운로드할 수 있습니다(http://www.battleaxe.co/buttcapper/).
03. 먼저, ButtCapper의 환경 설정 또는 가이드를 보여주는 공구 모양의 아이콘을 클릭합니다. 간략하게 각 아이콘들이 어떤 기능을 하는지에 대한 설명이 있습니다. 아이콘들을 그냥 클릭하면, Line Cap의 스타일을 바꿀 수 있으며, PC는 ALT 키, Mac은 OPT 키를 누르고 아이콘을 클릭하면, Line Join의 스타일을 바꿀 수 있다는 기능 설명입니다. 아이콘 컬러는 기본형이 블루입니다. 그런데 다른 Script들과는 다르게 컬러 또는 흑백 스타일의 아이콘 컬러를 정하는 옵션이 있습니다.
04. Grey Icons 스타일로 컬러를 설정해 보았습니다.
05. 전반적인 테스트를 하기 위해서 3개의 도형과 2개의 라인을 만들었습니다.
06. ButtCapper는 Shape Layer들을 선택하지 않고 클릭해도 적용이 되는 희한한(?) 툴입니다. 어차피, Shape Layer의 Stroke기능 중 Cap과 Join의 스타일을 결정하는 기능만 가지고 있기 때문에 가능한 일입니다. 닫힌 도형 같은 경우는 Cap 기능이 소용없기 때문에, 클릭을 한다고 해도 아무런 변화가 없습니다. 열린 라인 형태를 가지고 있는 Shape Layer들만 적용됩니다.
07. Shape Layer들을 전체 선택하든지, 선택하지 않든지 간에 ALT 키를 누른 상태에서 보이는 것처럼 Round 버튼을 클릭하면, Line Join이 모두 바뀌게 됩니다.
08. 스타일을 바꾸고자 하는 Shape Layer들만 선택하고 적용하면, 선택한 Shape Layer들의 Cap이나 Join이 바뀌게 됩니다.
09. 선택한 Shape Layer들에게 ALT 키를 누른 상태에서 Miter Join 버튼을 누르면, 자동으로 보이는 그림처럼 타임라인에서 Shape Layer의 Contents 속성들이 보여집니다. Line Join 옵션 중에 유일하게 Miter Join만 부수적인 옵션 하나가 하단에 새롭게 생기기 때문으로 보입니다.
ButtCapper Script가 무료이지만, Shape Layer들이 많은 상태에서 작업을 하다가 전체적인 디자인의 톤 앤 매너를 맞출 때 사용한다면, 시간을 엄청나게 절약할 수 있어서 꼭 알아두었으면 합니다.
2. 바람에 날리는 것처럼 애니메이션 시켜주는 Wind Script
01. 이 Script가 처음 등장했을 때 상당히 기대를 했었습니다. 개인적으로 Apple社의 Motion이라는 프로그램처럼 제대로 된(?) 시뮬레이션을 할 수 있을 것이라 생각했습니다. 물론, 그 기대는 출시된 후에 이런 저런 테스트를 해본 결과, 실망이었습니다. 너무 기대가 커서 그랬을 수도 있습니다. 왜 실망했는지에 대한 이야기는 뒤에서 하겠습니다. Aescript 홈페이지에서 현재 49.99달러에 판매되고 있습니다.
02. Wind Script를 실행시키면, 세로로 상당히 옵션이 많은 창이 보입니다. WIND라는 영문 앞에 '바람 풍'이라는 한자가 재미있습니다. 온라인 상에 공개된 각각의 옵션들에 대한 설명을 적어 보았습니다.
사실 WIND Layer의 기본적인 알고리즘을 설명 드리면, 하나의 Layer에 하나의 Null Layer가 Parents되고, 그렇게 만들어진 여러 개의 Null Layer들이 Wind Master라는 메인 Null Layer에 다시 Parents되는 형식을 취합니다. 좀 더 쉽게 설명을 드리면, 하나의 오브제가 만약 5개의 조각으로 날아가서 흩어지는 애니메이션을 하려면, 타임라인 상에 Layer가 11개가 있어야 한다는 것입니다. 각 옵션들의 설명은 바로 그러한 것들을 간략하게 설명한 것들입니다. 사실 이렇게 설명 드려서는 아마도 이해하기가 어려울 것입니다. 그래서 WIND Script는 Restore 버튼이 있으며, 이것이 상당히 빠른 속도를 보입니다. 여러분들이 설정한 값으로 Apply 버튼을 눌러 애니메이션을 적용한 후에 혹시 마음에 들지 않으면, Restore 버튼만 누르면 원상태로 돌아갑니다. 간혹, Script들 중에서는 이러한 기능이 있는 것들도 있지만, WIND 버튼은 그 기능이 상당히 빠릅니다. 그래서 이런 저런 움직임들을 빠르게 적용해 볼 수 있습니다.
03. 타입 툴로 원하는 글자를 만들어 봅니다.
04. 각각의 철자가 하나의 독립된 Layer로 만들어져야 철자들이 흩날리는 표현을 할 수 있습니다. 그래서 방금 만든 Layer를 선택한 다음, 마우스의 오른쪽 버튼을 눌러 Create Shapes from Text를 선택합니다.
05. Shape Layer로 만들었습니다. 하지만, 하나의 Shape Layer의 Contents에 각각의 철자가 Path 형태로 있기 때문에, WIND Script를 적용하기는 아직 이릅니다.
06. 가장 빠르게 Shape Layer 안에 있는 여러 개의 Path들을 독립된 Shape Layer로 만드는 방법은 ExplodeShapeLayers Script를 사용하는 것입니다. 아이콘의 모양을 보면 대략 그 기능을 예측할 수 있습니다. 맨 앞부분에 있는 것이 바로 하나의 Shape Layer를 여러 개의 Shape Layer로 나눠주는 기능을 합니다. 클릭해 보겠습니다.
07. 클릭하면, 우리가 원하는 대로 철자들이 각각의 Shape Layer로 만들어집니다. 물론, 오리지널 Shape Layer도 그대로 있으며, 다만 Layer의 눈만 꺼져있는 상태입니다.
08. 만약, ExplodeShapeLayers Script가 없는 경우는 Illustrator나 Photoshop에서 Layer들을 나눠서 가지고 와야 합니다. WIND Script는 Shape Layer에만 적용되는 것이 아니라, 이미지나 영상 등에도 적용이 가능하기 때문에, 상황에 따라서 맞는 스타일로 하면 됩니다. 여기에서는 Illustrator에서 Layer를 분리해보았습니다. Illustrator에서 글자를 쓰면, Layer가 보는 것처럼 보일 것입니다. Layer의 을 선택하고, 오른쪽 상단에 있는 작은 아이콘을 클릭합니다. 현재는 각각의 철자들이 Layer가 아닌 Compound Path로 되어 있습니다.
09. 팝업 메뉴에서 Release to Layers(Sequence)를 선택합니다.
10. 이제 철자들의 명칭이 Compound Path에서 Layer로 바뀌었습니다. 이제 이것들을 선택한 다음, 드래그해서 맨 위로 옮겨줍니다.
11. 그런 다음, 나머지 불필요한 Layer들을 없애주면 됩니다.
12. After Effects로 불러들이면, 보이는 것처럼 각각의 철자가 Layer로 불러들여진 것을 확인할 수 있습니다. 상당히 귀찮습니다.
13. WIND에서 중요한 키 포인트는 바로 16개의 Preset입니다. 마지막에 하나하나 Preset들의 스타일을 알아보겠습니다.
14. 맨 처음 설명 드렸듯이 이 박스 안에 있는 수치 값들의 조절로 Layer들이 어떻게 바람에 날아가는지를 설정할 수 있습니다. 물론, 날아서 화면 안으로 들어올 수도 있습니다.
15. WIND Script를 적용하는 방법은 생각보다 쉽습니다. WIND Script에 적용될 Layer들을 선택합니다. 그런 다음에 Apply 버튼만 눌러 주면 됩니다.
16. Shy 버튼이 자동으로 켜진 것을 보면, 불필요한 Layer들은 모두 감췄다는 뜻입니다. 타임라인에 Wind Master Layer 하나만 보여집니다.
17. Shy 아이콘을 클릭하여 모든 Layer들을 확인해보면 그림처럼 보여집니다. 원본은 그대로 놔둔 채(물론, Layer의 눈은 꺼진 상태입니다. 노란색으로 표시된 부분입니다), 새롭게 복제된 Layer들과 Null Layer들이 보여지는데, 빨간색으로 표시된 부분입니다. 기존에 다른 Script들은 이런 방식이 아닙니다. 그냥 선택한 Layer들을 가지고 Script를 적용하여 뭔가를 만드는 방식이었습니다. 그런데 왜 Wind Script는 이런 방식을 썼을까요? 맞습니다. 이런 방식으로 효과를 적용하기 때문에, Restore 버튼을 누르면, 어떤 것들보다도 다시 원상태로 되돌아 가기가 쉬운 것입니다.
18. Restore 버튼을 클릭해 보겠습니다. 정말 놀라울 정도로 Apply를 시키기 전의 상태로 Layer들이 되돌아 오는 것을 확인할 수 있을 것입니다.
19. 다시 WIND의 옵션들을 간략하게 확인해보겠습니다. Interpolation과 Ease Type은 움직임의 가속과 감속을 어떻게 할 것이며, 애니메이션의 시작과 끝의 감칠 맛나는 재미를 추가해주는 기능입니다. 여기에서 구구절절 설명을 드리지 않겠습니다.
20. 그림처럼 애니메이션이 화면 밖으로 Out되는 설정으로 잡고, 다양한 Preset들의 움직임이 어떤지 비교해보겠습니다.
21. 앞부분에서 설명을 안 한 부분이 있습니다. WIND Script를 적용할 때는 항상 타임마커가 현재 어디에 있는지를 확인해 보기 바랍니다. 타임마커가 있는 시간부터 적용이 되도록 짜여져 있기 때문입니다. 각각의 Layer에 Layer 마커가 생성되며, 이 지점부터 애니메이션은 시작됩니다. 만약, Layer가 순차적으로 하나씩 별도로 움직이려면, Layer Bar를 움직여 계단식으로 만들어 주면 됩니다. 아니면, Layer 마커를 조금씩 움직여서 시작되는 시점을 틀리게 만들어도 됩니다.
22. Sea Breeze
23. Draft
24. Blowback
25. Air Stream
26. Breeze
27. Crosswind
28. Zephyr
29. Chinook
30. Whirlwind
31. Wind Tunnel
32. Gust
33. Twister
34. Downdraft
35. Dust Devil
36. Gale
37. Blast
38. Zero Turbulence
WIND라는 Script에 걸었던 기대는 자연스러운 움직임 + 바람에 날리는 듯한 움직임의 디테일을 사용자가 손 볼 수 있는 다양한 옵션들이었습니다. 그런데 WIND는 설정을 미리 한 상태에서 Apply를 시킨 후에 별도의 옵션 조절을 할 수 있는 것들이 별로 없어서 약간은 실망을 한 Script였습니다. 하지만, 옵션들에 조금 익숙해진다면, 간단한 애니메이션 같은 것들을 손 쉽게 할 수 있다는 장점이 있습니다. 다음 시간에는 WIND Script를 응용하여 만들 수 있는 것들을 찾아보려고 합니다.
이번 시간에는 Shape Layer 작업 시, 불필요한 시간을 절약할 수 있게 해주는 ButtCapper Script와 타이포 그래픽이나 이미지 등의 오브제를 시뮬레이션처럼
손쉽게 애니메이션으로 바꿔주는 Wind Script를 알아보겠습니다.
1. Shape Layer 작업 시 Stroke
01. ButtCapper Script는 무료 Script입니다. 무료지만, Shape Layer 작업 시, 디테일한 디자인을 하는 분들에게는 상당히 도움이 되는 Script 중 하나입니다. 모양을 보면 알 수 있지만, Shape Layer의 Stroke에 있는 Line Cap과 Line Join의 형태를 결정할 수 있는 아이콘들이 눈에 보입니다.
02. RubberHose라는 멋진 AE 캐릭터 리깅 애니메이션 툴을 만든 Battleaxe社의 Script입니다. http://www.battleaxe.co에 방문해서 RubberHose Script도 한번 살펴보기 바랍니다. 사이트에 들어가면, ButtCapper를 무료로 다운로드할 수 있습니다(http://www.battleaxe.co/buttcapper/).
03. 먼저, ButtCapper의 환경 설정 또는 가이드를 보여주는 공구 모양의 아이콘을 클릭합니다. 간략하게 각 아이콘들이 어떤 기능을 하는지에 대한 설명이 있습니다. 아이콘들을 그냥 클릭하면, Line Cap의 스타일을 바꿀 수 있으며, PC는 ALT 키, Mac은 OPT 키를 누르고 아이콘을 클릭하면, Line Join의 스타일을 바꿀 수 있다는 기능 설명입니다. 아이콘 컬러는 기본형이 블루입니다. 그런데 다른 Script들과는 다르게 컬러 또는 흑백 스타일의 아이콘 컬러를 정하는 옵션이 있습니다.
04. Grey Icons 스타일로 컬러를 설정해 보았습니다.
05. 전반적인 테스트를 하기 위해서 3개의 도형과 2개의 라인을 만들었습니다.
06. ButtCapper는 Shape Layer들을 선택하지 않고 클릭해도 적용이 되는 희한한(?) 툴입니다. 어차피, Shape Layer의 Stroke기능 중 Cap과 Join의 스타일을 결정하는 기능만 가지고 있기 때문에 가능한 일입니다. 닫힌 도형 같은 경우는 Cap 기능이 소용없기 때문에, 클릭을 한다고 해도 아무런 변화가 없습니다. 열린 라인 형태를 가지고 있는 Shape Layer들만 적용됩니다.
07. Shape Layer들을 전체 선택하든지, 선택하지 않든지 간에 ALT 키를 누른 상태에서 보이는 것처럼 Round 버튼을 클릭하면, Line Join이 모두 바뀌게 됩니다.
08. 스타일을 바꾸고자 하는 Shape Layer들만 선택하고 적용하면, 선택한 Shape Layer들의 Cap이나 Join이 바뀌게 됩니다.
09. 선택한 Shape Layer들에게 ALT 키를 누른 상태에서 Miter Join 버튼을 누르면, 자동으로 보이는 그림처럼 타임라인에서 Shape Layer의 Contents 속성들이 보여집니다. Line Join 옵션 중에 유일하게 Miter Join만 부수적인 옵션 하나가 하단에 새롭게 생기기 때문으로 보입니다.
ButtCapper Script가 무료이지만, Shape Layer들이 많은 상태에서 작업을 하다가 전체적인 디자인의 톤 앤 매너를 맞출 때 사용한다면, 시간을 엄청나게 절약할 수 있어서 꼭 알아두었으면 합니다.
2. 바람에 날리는 것처럼 애니메이션 시켜주는 Wind Script
01. 이 Script가 처음 등장했을 때 상당히 기대를 했었습니다. 개인적으로 Apple社의 Motion이라는 프로그램처럼 제대로 된(?) 시뮬레이션을 할 수 있을 것이라 생각했습니다. 물론, 그 기대는 출시된 후에 이런 저런 테스트를 해본 결과, 실망이었습니다. 너무 기대가 커서 그랬을 수도 있습니다. 왜 실망했는지에 대한 이야기는 뒤에서 하겠습니다. Aescript 홈페이지에서 현재 49.99달러에 판매되고 있습니다.
02. Wind Script를 실행시키면, 세로로 상당히 옵션이 많은 창이 보입니다. WIND라는 영문 앞에 '바람 풍'이라는 한자가 재미있습니다. 온라인 상에 공개된 각각의 옵션들에 대한 설명을 적어 보았습니다.
사실 WIND Layer의 기본적인 알고리즘을 설명 드리면, 하나의 Layer에 하나의 Null Layer가 Parents되고, 그렇게 만들어진 여러 개의 Null Layer들이 Wind Master라는 메인 Null Layer에 다시 Parents되는 형식을 취합니다. 좀 더 쉽게 설명을 드리면, 하나의 오브제가 만약 5개의 조각으로 날아가서 흩어지는 애니메이션을 하려면, 타임라인 상에 Layer가 11개가 있어야 한다는 것입니다. 각 옵션들의 설명은 바로 그러한 것들을 간략하게 설명한 것들입니다. 사실 이렇게 설명 드려서는 아마도 이해하기가 어려울 것입니다. 그래서 WIND Script는 Restore 버튼이 있으며, 이것이 상당히 빠른 속도를 보입니다. 여러분들이 설정한 값으로 Apply 버튼을 눌러 애니메이션을 적용한 후에 혹시 마음에 들지 않으면, Restore 버튼만 누르면 원상태로 돌아갑니다. 간혹, Script들 중에서는 이러한 기능이 있는 것들도 있지만, WIND 버튼은 그 기능이 상당히 빠릅니다. 그래서 이런 저런 움직임들을 빠르게 적용해 볼 수 있습니다.
03. 타입 툴로 원하는 글자를 만들어 봅니다.
04. 각각의 철자가 하나의 독립된 Layer로 만들어져야 철자들이 흩날리는 표현을 할 수 있습니다. 그래서 방금 만든 Layer를 선택한 다음, 마우스의 오른쪽 버튼을 눌러 Create Shapes from Text를 선택합니다.
05. Shape Layer로 만들었습니다. 하지만, 하나의 Shape Layer의 Contents에 각각의 철자가 Path 형태로 있기 때문에, WIND Script를 적용하기는 아직 이릅니다.
06. 가장 빠르게 Shape Layer 안에 있는 여러 개의 Path들을 독립된 Shape Layer로 만드는 방법은 ExplodeShapeLayers Script를 사용하는 것입니다. 아이콘의 모양을 보면 대략 그 기능을 예측할 수 있습니다. 맨 앞부분에 있는 것이 바로 하나의 Shape Layer를 여러 개의 Shape Layer로 나눠주는 기능을 합니다. 클릭해 보겠습니다.
07. 클릭하면, 우리가 원하는 대로 철자들이 각각의 Shape Layer로 만들어집니다. 물론, 오리지널 Shape Layer도 그대로 있으며, 다만 Layer의 눈만 꺼져있는 상태입니다.
08. 만약, ExplodeShapeLayers Script가 없는 경우는 Illustrator나 Photoshop에서 Layer들을 나눠서 가지고 와야 합니다. WIND Script는 Shape Layer에만 적용되는 것이 아니라, 이미지나 영상 등에도 적용이 가능하기 때문에, 상황에 따라서 맞는 스타일로 하면 됩니다. 여기에서는 Illustrator에서 Layer를 분리해보았습니다. Illustrator에서 글자를 쓰면, Layer가 보는 것처럼 보일 것입니다. Layer의 을 선택하고, 오른쪽 상단에 있는 작은 아이콘을 클릭합니다. 현재는 각각의 철자들이 Layer가 아닌 Compound Path로 되어 있습니다.
09. 팝업 메뉴에서 Release to Layers(Sequence)를 선택합니다.
10. 이제 철자들의 명칭이 Compound Path에서 Layer로 바뀌었습니다. 이제 이것들을 선택한 다음, 드래그해서 맨 위로 옮겨줍니다.
11. 그런 다음, 나머지 불필요한 Layer들을 없애주면 됩니다.
12. After Effects로 불러들이면, 보이는 것처럼 각각의 철자가 Layer로 불러들여진 것을 확인할 수 있습니다. 상당히 귀찮습니다.
13. WIND에서 중요한 키 포인트는 바로 16개의 Preset입니다. 마지막에 하나하나 Preset들의 스타일을 알아보겠습니다.
14. 맨 처음 설명 드렸듯이 이 박스 안에 있는 수치 값들의 조절로 Layer들이 어떻게 바람에 날아가는지를 설정할 수 있습니다. 물론, 날아서 화면 안으로 들어올 수도 있습니다.
15. WIND Script를 적용하는 방법은 생각보다 쉽습니다. WIND Script에 적용될 Layer들을 선택합니다. 그런 다음에 Apply 버튼만 눌러 주면 됩니다.
16. Shy 버튼이 자동으로 켜진 것을 보면, 불필요한 Layer들은 모두 감췄다는 뜻입니다. 타임라인에 Wind Master Layer 하나만 보여집니다.
17. Shy 아이콘을 클릭하여 모든 Layer들을 확인해보면 그림처럼 보여집니다. 원본은 그대로 놔둔 채(물론, Layer의 눈은 꺼진 상태입니다. 노란색으로 표시된 부분입니다), 새롭게 복제된 Layer들과 Null Layer들이 보여지는데, 빨간색으로 표시된 부분입니다. 기존에 다른 Script들은 이런 방식이 아닙니다. 그냥 선택한 Layer들을 가지고 Script를 적용하여 뭔가를 만드는 방식이었습니다. 그런데 왜 Wind Script는 이런 방식을 썼을까요? 맞습니다. 이런 방식으로 효과를 적용하기 때문에, Restore 버튼을 누르면, 어떤 것들보다도 다시 원상태로 되돌아 가기가 쉬운 것입니다.
18. Restore 버튼을 클릭해 보겠습니다. 정말 놀라울 정도로 Apply를 시키기 전의 상태로 Layer들이 되돌아 오는 것을 확인할 수 있을 것입니다.
19. 다시 WIND의 옵션들을 간략하게 확인해보겠습니다. Interpolation과 Ease Type은 움직임의 가속과 감속을 어떻게 할 것이며, 애니메이션의 시작과 끝의 감칠 맛나는 재미를 추가해주는 기능입니다. 여기에서 구구절절 설명을 드리지 않겠습니다.
20. 그림처럼 애니메이션이 화면 밖으로 Out되는 설정으로 잡고, 다양한 Preset들의 움직임이 어떤지 비교해보겠습니다.
21. 앞부분에서 설명을 안 한 부분이 있습니다. WIND Script를 적용할 때는 항상 타임마커가 현재 어디에 있는지를 확인해 보기 바랍니다. 타임마커가 있는 시간부터 적용이 되도록 짜여져 있기 때문입니다. 각각의 Layer에 Layer 마커가 생성되며, 이 지점부터 애니메이션은 시작됩니다. 만약, Layer가 순차적으로 하나씩 별도로 움직이려면, Layer Bar를 움직여 계단식으로 만들어 주면 됩니다. 아니면, Layer 마커를 조금씩 움직여서 시작되는 시점을 틀리게 만들어도 됩니다.
22. Sea Breeze
23. Draft
24. Blowback
25. Air Stream
26. Breeze
27. Crosswind
28. Zephyr
29. Chinook
30. Whirlwind
31. Wind Tunnel
32. Gust
33. Twister
34. Downdraft
35. Dust Devil
36. Gale
37. Blast
38. Zero Turbulence
WIND라는 Script에 걸었던 기대는 자연스러운 움직임 + 바람에 날리는 듯한 움직임의 디테일을 사용자가 손 볼 수 있는 다양한 옵션들이었습니다. 그런데 WIND는 설정을 미리 한 상태에서 Apply를 시킨 후에 별도의 옵션 조절을 할 수 있는 것들이 별로 없어서 약간은 실망을 한 Script였습니다. 하지만, 옵션들에 조금 익숙해진다면, 간단한 애니메이션 같은 것들을 손 쉽게 할 수 있다는 장점이 있습니다. 다음 시간에는 WIND Script를 응용하여 만들 수 있는 것들을 찾아보려고 합니다.