지난 시간 After Effects의 Mask Shape 윈도우 창을 활용한 다중 화면 분할 방식에 이어서, 이번 시간은 Adobe Illustrator를 사용한 좀 더 효율적인 방식을 알아보겠습니다.
캐릭터 디자인 혹은, 그래픽 디자인 소스를 만들 때 자주 사용하는 Illustrator는 레이아웃과 그리드 형식의 작업을 Photoshop 보다 빠르게 작업할 수 있습니다. After Effects에서 은근히 까다로운 작업 중에 하나가 마스크(Show & Hide, 무엇을 보여주고 무엇을 숨길 것인가? 디지털 이전의 아날로그 이전의 마스크 작업은 Stencil) 작업입니다. Adobe Illustrator 기능 중 Split Into Grid를 사용해서 대칭적인 방식과 비대칭적인 방식의 마스크 패스 제작 및 알파 매트 소스를 만드는 방법을 진행하겠습니다. 이때 사용된 소스는 After Effects로 가져갈 때, 작업자가 원하는 대로 마스크 패스와 알파 매트 소스로 사용할 수 있습니다. 우선 알아두면 좋은 점은 After Effects에서 기본적으로 하게 되는 마스크 작업을 Illustrator와 사용하게 되면 좀 더 빠르면서 정확하게 할 수 있다는 것입니다. 예제를 같이 만들어 봄으로써 After Effects와 Illustrator의 멋진 조합을 느껴보길 바랍니다.
01. 우선 Illustrator 프로그램을 실행한 후, File > New를 선택해서 새로운 Document를 생성합니다(단축키 Ctrl + N).
02. New Document 윈도우 창의 세팅을 Profile 항목은 Web, 가로 세로 길이는 각각 1280px, 720px로 해서 아래 그림과 같이 세팅합니다. 그리고 OK 버튼을 눌러 새로운 Document를 생성합니다. Profile 세팅에서 Web을 지정하고 만들게 되면, After Effects에서 Illustrator 소스를 Composition 형태로 임포트시켰을 때, Pixel Aspect Ration 값이 자동으로 Square Pixels로 세팅됩니다(Pixel Aspect Ration = 픽셀 종횡비, 세로 사이즈를 1로 잡았을 때, 가로 비율을 뜻합니다). 그리고, Web을 지정하더라도 사용자가 사이즈 등 주어진 정보값을 변경하게 되면, Profile 세팅 이름은 사용자 정의를 뜻하는 Custom으로 변경됩니다. 이름만 바뀔 뿐 여전히 Web 세팅입니다.
Illustrator에서 Profile 세팅을 Web으로 지정하면, 아래 After Effects의 Composition 세팅값에서 Pixel Aspect Ratio: Square Pixels로 세팅한 것과 같습니다.
03. 상단 메뉴에서 Window > Workspace > Layout를 차례대로 선택합니다. 그리고 View > Zoon In/Out을 선택해 적당한 크기의 화면으로 보이게 합니다.
04. 왼쪽 도구 툴 패널에서 사각형 도형(Rectangle Tool)을 선택합니다. 마우스 포인터를 Illustrator의 빈 화면 아무 곳이나 클릭하게 되면, 사각형 도형 옵션 윈도우 창이 나옵니다. 가로, 세로 길이를 뜻하는 Width, Height 항목에 1280, 720px 수치를 입력한 후, OK 버튼을 눌러 사각형 도형을 만듭니다.
05. 선택된 사각형의 기본 색상 정보를 바꿔 좀 더 보기 편하게 해보겠습니다. 도구 툴 패널 하단에 면 색(Fill)과 선 색(Stroke) 작업을 할 수 있는 색상 아이콘을 클릭해서 Color Picker 윈도우 창의 그래프와 스펙트럼에서 면 색은 마젠타(#ff00cf)를 선택한 후, OK 버튼을 누릅니다. 선 색은 우측 하단에 보이는 None 버튼을 눌러 색상 없음으로 만듭니다.
06. 만들어진 마젠타 색상의 사각형 도형을 화면 크기 안에 넣어보도록 하겠습니다. 우측 패널 모음 중 Transform 패널에서 앵커 포인트 위치를 9개의 앵커 포인트 위치 중 제일 왼쪽 위를 지정하고, 화면의 위치를 잡을 수 있는 X, Y 포지션 항목에 똑같이 0을 입력하고 키보드의 Enter를 누릅니다. 그럼 마젠타 색상의 사각형 도형을 도큐먼트 크기가 1280, 720px인 화면에 정확하게 넣을 수 있습니다. Transform 패널에서 앵커 포인트의 위치를 제일 왼쪽 위를 지정한 이유는 선택한 사각형 도큐먼트를 X, Y 위치 정보가 0, 0인 장소에 넣기 위해서인데, 위의 05번 항목 그림에서 보이는 흰색 배경의 왼쪽 모서리 X, Y 위치가 각각 0, 0이기 때문입니다. 그래서 사각형 도형 툴을 선택해서 화면의 정확한 위치를 지정할 수 있는 패널이 Transform 패널입니다.
07. 이제 마젠타 색상의 사각형 도형을 원하는 크기로 나누는 방법을 알아보겠습니다. 이 방법은 After Effects에서 굉장히 까다롭게 해야 하는 마스크 패스 제작과 알파 매트 소스를 손쉽게 만들 수 있는 방법이기도 합니다. 먼저, 마젠타 색상의 사각형 도형을 선택한 상태에서(사각형 도형을 선택하는 방법은 왼쪽 도구 툴 패널에서 선택 툴(Selection Tool)을 선택한 후, 사각형을 마우스 클릭. 선택 해제는 도큐먼트의 빈 공간에 클릭) 상단 Object > Path > Split Into Grid를 차례대로 선택합니다.
08. Split Into Grid 윈도우 창에서 왼쪽 하단에 세팅값을 미리 볼 수 있는 Preview를 체크한 후, Rows(줄)는 1, Columns(칸)는 3, Gutter(틈새)는 3을 입력하면, 서로간의 간격이 10px인 세로로 3칸으로 만들어진 사각형을 볼 수 있습니다. OK 버튼을 눌러 완성합니다(Split Into Grid로 만들어진 사각형들은 그룹으로 묶여지는 것이 아니라 개별적으로 만들어집니다).
09. 현재 나눠진 3개의 사각형을 선택하고 복사해서 After Effects에 있는 레이어에 붙여 넣기 하면, 마스크로 자동으로 생성이 됩니다. 우선 Illustrator의 레이어 패널에서 개수만큼의 레이어를 만든 후, Illustrator ai 파일로 저장하겠습니다. 저장된 ai 파일은 After Effects에서 알파 매트 소스나 기타 그래픽 소스 레이어로 활용이 가능합니다. 우측 패널에 레이어(Layers, 단축키 F7) 패널이 안보이면, 상단 Window 메뉴에서 레이어 패널을 체크하면, 우측 패널 모음 상단에 레이어 패널이 보이게 됩니다.
10. 레이어 패널 하단에 종이가 접힌 모양의 새로운 레이어 생성(단축키 Ctrl +L) 버튼을 눌러 사각형 오브제 개수만큼 총 3개의 레이어를 만들어 줍니다.
11. 각각의 자리에 있는 3개의 박스를 Layer1, Layer2, Layer3 레이어들에 넣어 보도록 하겠습니다. 우선 Illustrator에서 레이어의 이름을 변경하고 싶을 때는 레이어 이름 부분에 마우스를 두 번 클릭하고 원하는 레이어 이름으로 변경하면 됩니다. 여기에서는 제일 밑에 있는 Layer1은 left, Layer2는 Center, Layer3은 right라고 레이어 이름을 변경합니다.
12. 이제 화면에 보이는 중앙과 제일 오른쪽 사각형을 차례대로 center, right 레이어에 옮기도록 하겠습니다. 먼저 중앙에 있는 사각형을 선택 툴로 선택 후, Ctrl+X를 눌러 잘라내기 하고, Illustrator의 center 레이어 자리에 붙여 넣기 Ctrl+F를 눌러 옮깁니다. 그리고 같은 방법으로 가장 오른쪽 박스도 선택 툴로 선택 후, Ctrl+X를 눌러 잘라내고, right 레이어를 선택 후, Ctrl+F를 눌러 그 자리에 붙여 넣기 합니다. 그럼 비어있던 center, right 레이어에 박스 모양의 섬네일이 생긴 것을 볼 수 있습니다. 혹은, 각각의 레이어 앞에 있는 삼각형 아이콘을 눌러서 확인해 봐도 됩니다.
13. 상단 File 메뉴를 눌러 현재 작업이 끝난 도큐먼트를 Save 메뉴를 선택해서 저장합니다. 적당한 저장 이름으로 ai 작업 파일로 저장합니다. 버전 확인 윈도우 창이 뜨면 현재 사용하고 있는 버전으로 OK 버튼을 눌러 파일을 저장합니다.
그럼, 이제 작업이 끝난 Illustrator 소스를 활용해서 After Effects에서 마스크와 알파 매트 소스를 활용한 화면을 연출하는 기본 방식을 알아보겠습니다.
14. 활용하는 방식은 간단합니다. 현재 Illustrator에서 작업이 끝난 3개의 사각형을 선택 툴로 선택한 후, 복사(Ctrl+C)하고, After Effects에서 적용할 영상, 그래픽 등의 레이어를 선택하여 붙여 넣기(Ctrl+V)를 하면 됩니다. 마스크를 적용한 레이어를 선택한 후, 단축키 M을 두 번 눌러 보면 깔끔하게 적용된 모습을 볼 수 있습니다. 지난 5월호 연재에서 언급한 Mask Shape 윈도우 창 기능을 사용할 수도 있지만, 3개 이상의 블록은 마스크의 가로 세로 길이와 간격이 들어간 경우엔 간격의 크기도 계산해서 작업을 해야 하는 불편함이 있습니다.
15. 적용된 마스크 라벨 아이콘을 클릭해 Mask 1부터 차례대로 빨강, 파랑, 노랑으로 구분해 보면, Illustrator에서 차례와 동일하게 적용된 것을 확인할 수 있습니다. 이렇게 복잡한 화면을 나눠야 하는 상황에서는 After Effects의 Mask Shape 윈도우 창의 Bounding Box 기능 보다는 Illustrator의 패스를 After Effects에 불러와 활용하는 것이 좀 더 효율적인 것을 알 수 있습니다. 다양한 운용이 가능한 방법이니 잘 익혀 두길 바랍니다.
그럼 이제 제작된 Illustrator 작업 파일을 After Effects에 불러와서 알파 매트 소스로 활용하는 방식을 알아 보겠습니다.
16. After Effects 프로그램에서 상단 File > Import > File(단축키 Ctrl+I, 혹은 Project 패널의 빈 공간을 마우스 두 번 클릭)를 선택해서 좀 전에 작업한 .ai 파일(gridata.ai)을 선택합니다. 가져오기 양식은 Composition - Retain Layer Sizes(Photoshop, Illustrator에서 제작된 각각의 레이어를 유지하고 레이어의 크기는 제작된 크기만큼 불러오기)를 선택하고 열기 버튼을 누릅니다.
17. Photoshop, Illustrator 소스(*.psd, *.ai) 소스를 Composition-Retain Layer Sizes로 불러오면 자동으로 After Effects에서 Composition 소스로 변환된 것을 볼 수 있습니다. gridata Composition 소스를 두 번 클릭해서 타임 패널에서 확인해 보면, Illustrator에서의 레이어 명칭과 배열을 똑같이 불러올 수 있어서 After Effects 작업을 좀 더 효율적으로 할 수 있습니다. gridata Composition에 놓인 3개의 레이어를 선택한 후, 햇님 모양의 아이콘(For Comp layer: Collapse Transformations; For vector Layer: Continuously Rasterize)을 활성화 시켜 줍니다. Illustrator 소스일 경우엔 모서리 부분의 해상도를 높여져서 화면에 끊어져 보이는 현상을 방지할 수 있습니다.
18. 각 left, center, right 레이어에 Effects & Presets 패널에서 ‘fill’을 입력하고 이펙트를 적용해 색상을 차례대로 빨강, 파랑, 노랑 색상으로 구분해 줍니다(레이어를 선택 후, ‘fill’ 이펙트 명칭을 두 번 클릭, 혹은 상단 Effects > Generate > Fill 선택)
19. gridata Composition을 활용한 알파 매트 연출을 해 보겠습니다. Illustrator 소스의 크기와 같은 새로운 Composition을 만든 후, 적당한 이미지나 영상을 준비합니다.
20. Project 패널에 있는 gridata Composition을 새로 만든 Composition에 마우스 클릭 후, 준비된 영상이나 이미지 레이어 위에 가져다 놓습니다(단축키 Ctrl+alt+/)
21. 알파/루마 매트 소소는 하나만 사용할 수 있기에, 미리 다수의 소스를 하나로 만들어진 Composition 스타일로 만들면 하나의 레이어를 만들어주는 효과가 있습니다. 준비된 gridata Composition 레이어를 두 번 클릭해서 타임라인 패널에 gridata Composition 화면을 준비합니다.
22. left, center, right 3개의 레이어를 선택한 후, 0프레임, 10프레임에 포지션 키프레임 각각 시계 모양의 아이콘을 클릭해서 생성합니다(단축키 Ctrl+alt+ship+p). 그리고 첫 번째 키프레임의 정보를 아래 수치로 변경해서 3개의 레이어 위치를 화면 위로 올립니다.
* 첫 번째 포지션 키프레임 X, Y 정보값
left: 210, -381.5
center: 640, -381.5
right: 1070, -381.5
* 두 번째 포지션 키프레임 X, Y 정보값
left 210, 360.5
center 640, 360.5
right 1070, 360.5
23. 포지션 키프레임 작업한 center, right 레이어를 10프레임씩 가져다 놓습니다.
* 레이어가 위치한 시간
center: 10프레임.
right: 20프레임.
24. gridata Composition과 이미지, 영상이 함께 있는 Composition을 클릭해 확인해보면, 간단한 키프레임 애니메이션이 연출된 화면을 볼 수 있습니다.
25. 타임라인 패널 왼쪽 하단에 있는 Toggle Switches/Modes 버튼을 눌러 타임라인 패널을 모드/알파, 루마 매트 합성 화면으로 변경합니다. 이미지 혹은 영상 레이어의 우측에 매트 드롭박스 메뉴를 눌러 Alpha Matte “gridata” 메뉴를 선택해 알파 매트 합성을 적용합니다.
26. 적당한 색상의 배경을 넣도록 하겠습니다. 상단 Layer > New > Solid를 선택해 이름은 ‘bg’, 색상 아이콘을 클릭해 노랑색 계열을 지정하고, OK 버튼을 눌러 확인합니다. 그리고 노랑색 bg 솔리드 레이어를 선택해 가장 아래로 마우스를 사용해 가져다 놓습니다.
27. Preview 패널에 있는 RAM Preview 버튼을 눌러 작업한 결과물을 확인합니다(단축키 우측 키패드 숫자 0).
28. 잘려진 상태에서 왼쪽부터 차례대로 내려 오는 모습을 확인할 수 있습니다.
정리해보겠습니다. After Effects의 도형 툴, 펜 툴을 활용한 마스크 작업도 가능하지만, 좀 더 복잡한 레이아웃의 마스크나 알파 소스 작업은 Illustrator의 소스를 활용하는 것이 효율적입니다. Illustrator의 Split Into Grid 메뉴를 활용하면 오와 열이 딱 맞는 비율적인 레이아웃이 가능합니다.
이번 연재에서 사용된 기능을 활용하면, 아래 링크 페이지의 작품처럼 좀 더 복잡한 작업도 가능합니다.
* CNBC Prime(https://vimeo.com/64655813)
다음에는 After Effects의 Shape Layer 기능을 활용한 HUD Design 작업과 Illustrator 도형 툴, 패스파인더 패널, 브러쉬 패널, 벡터 지우개 도구 툴 등을 활용해서 SF 영화에 사용된 선 연출법에 대해서 알아보겠습니다.
지난 시간 After Effects의 Mask Shape 윈도우 창을 활용한 다중 화면 분할 방식에 이어서, 이번 시간은 Adobe Illustrator를 사용한 좀 더 효율적인 방식을 알아보겠습니다.
캐릭터 디자인 혹은, 그래픽 디자인 소스를 만들 때 자주 사용하는 Illustrator는 레이아웃과 그리드 형식의 작업을 Photoshop 보다 빠르게 작업할 수 있습니다. After Effects에서 은근히 까다로운 작업 중에 하나가 마스크(Show & Hide, 무엇을 보여주고 무엇을 숨길 것인가? 디지털 이전의 아날로그 이전의 마스크 작업은 Stencil) 작업입니다. Adobe Illustrator 기능 중 Split Into Grid를 사용해서 대칭적인 방식과 비대칭적인 방식의 마스크 패스 제작 및 알파 매트 소스를 만드는 방법을 진행하겠습니다. 이때 사용된 소스는 After Effects로 가져갈 때, 작업자가 원하는 대로 마스크 패스와 알파 매트 소스로 사용할 수 있습니다. 우선 알아두면 좋은 점은 After Effects에서 기본적으로 하게 되는 마스크 작업을 Illustrator와 사용하게 되면 좀 더 빠르면서 정확하게 할 수 있다는 것입니다. 예제를 같이 만들어 봄으로써 After Effects와 Illustrator의 멋진 조합을 느껴보길 바랍니다.
01. 우선 Illustrator 프로그램을 실행한 후, File > New를 선택해서 새로운 Document를 생성합니다(단축키 Ctrl + N).
02. New Document 윈도우 창의 세팅을 Profile 항목은 Web, 가로 세로 길이는 각각 1280px, 720px로 해서 아래 그림과 같이 세팅합니다. 그리고 OK 버튼을 눌러 새로운 Document를 생성합니다. Profile 세팅에서 Web을 지정하고 만들게 되면, After Effects에서 Illustrator 소스를 Composition 형태로 임포트시켰을 때, Pixel Aspect Ration 값이 자동으로 Square Pixels로 세팅됩니다(Pixel Aspect Ration = 픽셀 종횡비, 세로 사이즈를 1로 잡았을 때, 가로 비율을 뜻합니다). 그리고, Web을 지정하더라도 사용자가 사이즈 등 주어진 정보값을 변경하게 되면, Profile 세팅 이름은 사용자 정의를 뜻하는 Custom으로 변경됩니다. 이름만 바뀔 뿐 여전히 Web 세팅입니다.
Illustrator에서 Profile 세팅을 Web으로 지정하면, 아래 After Effects의 Composition 세팅값에서 Pixel Aspect Ratio: Square Pixels로 세팅한 것과 같습니다.
03. 상단 메뉴에서 Window > Workspace > Layout를 차례대로 선택합니다. 그리고 View > Zoon In/Out을 선택해 적당한 크기의 화면으로 보이게 합니다.
04. 왼쪽 도구 툴 패널에서 사각형 도형(Rectangle Tool)을 선택합니다. 마우스 포인터를 Illustrator의 빈 화면 아무 곳이나 클릭하게 되면, 사각형 도형 옵션 윈도우 창이 나옵니다. 가로, 세로 길이를 뜻하는 Width, Height 항목에 1280, 720px 수치를 입력한 후, OK 버튼을 눌러 사각형 도형을 만듭니다.
05. 선택된 사각형의 기본 색상 정보를 바꿔 좀 더 보기 편하게 해보겠습니다. 도구 툴 패널 하단에 면 색(Fill)과 선 색(Stroke) 작업을 할 수 있는 색상 아이콘을 클릭해서 Color Picker 윈도우 창의 그래프와 스펙트럼에서 면 색은 마젠타(#ff00cf)를 선택한 후, OK 버튼을 누릅니다. 선 색은 우측 하단에 보이는 None 버튼을 눌러 색상 없음으로 만듭니다.
06. 만들어진 마젠타 색상의 사각형 도형을 화면 크기 안에 넣어보도록 하겠습니다. 우측 패널 모음 중 Transform 패널에서 앵커 포인트 위치를 9개의 앵커 포인트 위치 중 제일 왼쪽 위를 지정하고, 화면의 위치를 잡을 수 있는 X, Y 포지션 항목에 똑같이 0을 입력하고 키보드의 Enter를 누릅니다. 그럼 마젠타 색상의 사각형 도형을 도큐먼트 크기가 1280, 720px인 화면에 정확하게 넣을 수 있습니다. Transform 패널에서 앵커 포인트의 위치를 제일 왼쪽 위를 지정한 이유는 선택한 사각형 도큐먼트를 X, Y 위치 정보가 0, 0인 장소에 넣기 위해서인데, 위의 05번 항목 그림에서 보이는 흰색 배경의 왼쪽 모서리 X, Y 위치가 각각 0, 0이기 때문입니다. 그래서 사각형 도형 툴을 선택해서 화면의 정확한 위치를 지정할 수 있는 패널이 Transform 패널입니다.
07. 이제 마젠타 색상의 사각형 도형을 원하는 크기로 나누는 방법을 알아보겠습니다. 이 방법은 After Effects에서 굉장히 까다롭게 해야 하는 마스크 패스 제작과 알파 매트 소스를 손쉽게 만들 수 있는 방법이기도 합니다. 먼저, 마젠타 색상의 사각형 도형을 선택한 상태에서(사각형 도형을 선택하는 방법은 왼쪽 도구 툴 패널에서 선택 툴(Selection Tool)을 선택한 후, 사각형을 마우스 클릭. 선택 해제는 도큐먼트의 빈 공간에 클릭) 상단 Object > Path > Split Into Grid를 차례대로 선택합니다.
08. Split Into Grid 윈도우 창에서 왼쪽 하단에 세팅값을 미리 볼 수 있는 Preview를 체크한 후, Rows(줄)는 1, Columns(칸)는 3, Gutter(틈새)는 3을 입력하면, 서로간의 간격이 10px인 세로로 3칸으로 만들어진 사각형을 볼 수 있습니다. OK 버튼을 눌러 완성합니다(Split Into Grid로 만들어진 사각형들은 그룹으로 묶여지는 것이 아니라 개별적으로 만들어집니다).
09. 현재 나눠진 3개의 사각형을 선택하고 복사해서 After Effects에 있는 레이어에 붙여 넣기 하면, 마스크로 자동으로 생성이 됩니다. 우선 Illustrator의 레이어 패널에서 개수만큼의 레이어를 만든 후, Illustrator ai 파일로 저장하겠습니다. 저장된 ai 파일은 After Effects에서 알파 매트 소스나 기타 그래픽 소스 레이어로 활용이 가능합니다. 우측 패널에 레이어(Layers, 단축키 F7) 패널이 안보이면, 상단 Window 메뉴에서 레이어 패널을 체크하면, 우측 패널 모음 상단에 레이어 패널이 보이게 됩니다.
10. 레이어 패널 하단에 종이가 접힌 모양의 새로운 레이어 생성(단축키 Ctrl +L) 버튼을 눌러 사각형 오브제 개수만큼 총 3개의 레이어를 만들어 줍니다.
11. 각각의 자리에 있는 3개의 박스를 Layer1, Layer2, Layer3 레이어들에 넣어 보도록 하겠습니다. 우선 Illustrator에서 레이어의 이름을 변경하고 싶을 때는 레이어 이름 부분에 마우스를 두 번 클릭하고 원하는 레이어 이름으로 변경하면 됩니다. 여기에서는 제일 밑에 있는 Layer1은 left, Layer2는 Center, Layer3은 right라고 레이어 이름을 변경합니다.
12. 이제 화면에 보이는 중앙과 제일 오른쪽 사각형을 차례대로 center, right 레이어에 옮기도록 하겠습니다. 먼저 중앙에 있는 사각형을 선택 툴로 선택 후, Ctrl+X를 눌러 잘라내기 하고, Illustrator의 center 레이어 자리에 붙여 넣기 Ctrl+F를 눌러 옮깁니다. 그리고 같은 방법으로 가장 오른쪽 박스도 선택 툴로 선택 후, Ctrl+X를 눌러 잘라내고, right 레이어를 선택 후, Ctrl+F를 눌러 그 자리에 붙여 넣기 합니다. 그럼 비어있던 center, right 레이어에 박스 모양의 섬네일이 생긴 것을 볼 수 있습니다. 혹은, 각각의 레이어 앞에 있는 삼각형 아이콘을 눌러서 확인해 봐도 됩니다.
13. 상단 File 메뉴를 눌러 현재 작업이 끝난 도큐먼트를 Save 메뉴를 선택해서 저장합니다. 적당한 저장 이름으로 ai 작업 파일로 저장합니다. 버전 확인 윈도우 창이 뜨면 현재 사용하고 있는 버전으로 OK 버튼을 눌러 파일을 저장합니다.
그럼, 이제 작업이 끝난 Illustrator 소스를 활용해서 After Effects에서 마스크와 알파 매트 소스를 활용한 화면을 연출하는 기본 방식을 알아보겠습니다.
14. 활용하는 방식은 간단합니다. 현재 Illustrator에서 작업이 끝난 3개의 사각형을 선택 툴로 선택한 후, 복사(Ctrl+C)하고, After Effects에서 적용할 영상, 그래픽 등의 레이어를 선택하여 붙여 넣기(Ctrl+V)를 하면 됩니다. 마스크를 적용한 레이어를 선택한 후, 단축키 M을 두 번 눌러 보면 깔끔하게 적용된 모습을 볼 수 있습니다. 지난 5월호 연재에서 언급한 Mask Shape 윈도우 창 기능을 사용할 수도 있지만, 3개 이상의 블록은 마스크의 가로 세로 길이와 간격이 들어간 경우엔 간격의 크기도 계산해서 작업을 해야 하는 불편함이 있습니다.
15. 적용된 마스크 라벨 아이콘을 클릭해 Mask 1부터 차례대로 빨강, 파랑, 노랑으로 구분해 보면, Illustrator에서 차례와 동일하게 적용된 것을 확인할 수 있습니다. 이렇게 복잡한 화면을 나눠야 하는 상황에서는 After Effects의 Mask Shape 윈도우 창의 Bounding Box 기능 보다는 Illustrator의 패스를 After Effects에 불러와 활용하는 것이 좀 더 효율적인 것을 알 수 있습니다. 다양한 운용이 가능한 방법이니 잘 익혀 두길 바랍니다.
그럼 이제 제작된 Illustrator 작업 파일을 After Effects에 불러와서 알파 매트 소스로 활용하는 방식을 알아 보겠습니다.
16. After Effects 프로그램에서 상단 File > Import > File(단축키 Ctrl+I, 혹은 Project 패널의 빈 공간을 마우스 두 번 클릭)를 선택해서 좀 전에 작업한 .ai 파일(gridata.ai)을 선택합니다. 가져오기 양식은 Composition - Retain Layer Sizes(Photoshop, Illustrator에서 제작된 각각의 레이어를 유지하고 레이어의 크기는 제작된 크기만큼 불러오기)를 선택하고 열기 버튼을 누릅니다.
17. Photoshop, Illustrator 소스(*.psd, *.ai) 소스를 Composition-Retain Layer Sizes로 불러오면 자동으로 After Effects에서 Composition 소스로 변환된 것을 볼 수 있습니다. gridata Composition 소스를 두 번 클릭해서 타임 패널에서 확인해 보면, Illustrator에서의 레이어 명칭과 배열을 똑같이 불러올 수 있어서 After Effects 작업을 좀 더 효율적으로 할 수 있습니다. gridata Composition에 놓인 3개의 레이어를 선택한 후, 햇님 모양의 아이콘(For Comp layer: Collapse Transformations; For vector Layer: Continuously Rasterize)을 활성화 시켜 줍니다. Illustrator 소스일 경우엔 모서리 부분의 해상도를 높여져서 화면에 끊어져 보이는 현상을 방지할 수 있습니다.
18. 각 left, center, right 레이어에 Effects & Presets 패널에서 ‘fill’을 입력하고 이펙트를 적용해 색상을 차례대로 빨강, 파랑, 노랑 색상으로 구분해 줍니다(레이어를 선택 후, ‘fill’ 이펙트 명칭을 두 번 클릭, 혹은 상단 Effects > Generate > Fill 선택)
19. gridata Composition을 활용한 알파 매트 연출을 해 보겠습니다. Illustrator 소스의 크기와 같은 새로운 Composition을 만든 후, 적당한 이미지나 영상을 준비합니다.
20. Project 패널에 있는 gridata Composition을 새로 만든 Composition에 마우스 클릭 후, 준비된 영상이나 이미지 레이어 위에 가져다 놓습니다(단축키 Ctrl+alt+/)
21. 알파/루마 매트 소소는 하나만 사용할 수 있기에, 미리 다수의 소스를 하나로 만들어진 Composition 스타일로 만들면 하나의 레이어를 만들어주는 효과가 있습니다. 준비된 gridata Composition 레이어를 두 번 클릭해서 타임라인 패널에 gridata Composition 화면을 준비합니다.
22. left, center, right 3개의 레이어를 선택한 후, 0프레임, 10프레임에 포지션 키프레임 각각 시계 모양의 아이콘을 클릭해서 생성합니다(단축키 Ctrl+alt+ship+p). 그리고 첫 번째 키프레임의 정보를 아래 수치로 변경해서 3개의 레이어 위치를 화면 위로 올립니다.
* 첫 번째 포지션 키프레임 X, Y 정보값
left: 210, -381.5
center: 640, -381.5
right: 1070, -381.5
* 두 번째 포지션 키프레임 X, Y 정보값
left 210, 360.5
center 640, 360.5
right 1070, 360.5
23. 포지션 키프레임 작업한 center, right 레이어를 10프레임씩 가져다 놓습니다.
* 레이어가 위치한 시간
center: 10프레임.
right: 20프레임.
24. gridata Composition과 이미지, 영상이 함께 있는 Composition을 클릭해 확인해보면, 간단한 키프레임 애니메이션이 연출된 화면을 볼 수 있습니다.
25. 타임라인 패널 왼쪽 하단에 있는 Toggle Switches/Modes 버튼을 눌러 타임라인 패널을 모드/알파, 루마 매트 합성 화면으로 변경합니다. 이미지 혹은 영상 레이어의 우측에 매트 드롭박스 메뉴를 눌러 Alpha Matte “gridata” 메뉴를 선택해 알파 매트 합성을 적용합니다.
26. 적당한 색상의 배경을 넣도록 하겠습니다. 상단 Layer > New > Solid를 선택해 이름은 ‘bg’, 색상 아이콘을 클릭해 노랑색 계열을 지정하고, OK 버튼을 눌러 확인합니다. 그리고 노랑색 bg 솔리드 레이어를 선택해 가장 아래로 마우스를 사용해 가져다 놓습니다.
27. Preview 패널에 있는 RAM Preview 버튼을 눌러 작업한 결과물을 확인합니다(단축키 우측 키패드 숫자 0).
28. 잘려진 상태에서 왼쪽부터 차례대로 내려 오는 모습을 확인할 수 있습니다.
정리해보겠습니다. After Effects의 도형 툴, 펜 툴을 활용한 마스크 작업도 가능하지만, 좀 더 복잡한 레이아웃의 마스크나 알파 소스 작업은 Illustrator의 소스를 활용하는 것이 효율적입니다. Illustrator의 Split Into Grid 메뉴를 활용하면 오와 열이 딱 맞는 비율적인 레이아웃이 가능합니다.
이번 연재에서 사용된 기능을 활용하면, 아래 링크 페이지의 작품처럼 좀 더 복잡한 작업도 가능합니다.
* CNBC Prime(https://vimeo.com/64655813)
다음에는 After Effects의 Shape Layer 기능을 활용한 HUD Design 작업과 Illustrator 도형 툴, 패스파인더 패널, 브러쉬 패널, 벡터 지우개 도구 툴 등을 활용해서 SF 영화에 사용된 선 연출법에 대해서 알아보겠습니다.