week 모션 그래픽스와 시각 효과는 after effects가...

50
모션 그래픽스(Motion Graphics)란 말 그대로 움직이는(Motion) 그래픽스(Graphics) 혹은 동작하는(Motion) 그래픽스(Graphics)를 의미한다. 여기서 움직임(동작)이란 본래 갖고 있는 그래픽스의 의미에 시간과 공간이 더해진 개념이다. 모션 그래픽스의 의미를 풀어서 설명하면 시각적인 효과를 보여주는 이미지(사진)의 연속된 조합과 청각적인 효과를 들려주는 사운드(오 디오) 등의 효과를 통해 각종 브랜드와 서비스에 새로운 활기를 불어 넣는 일련의 작업을 의미 한다. 즉, 시간과 공간 타이포(Typography, 인쇄의 문자배열)와 사진(이미지)의 움직임(동작)이 나 사운드(오디오) 등의 요소들을 이용하여 창의적이고 효과적인 영상으로 나타내는 것이 모션 그래픽스라고 할 수 있다. 최근에는 영상 산업이 급속도로 발전하면서 대부분의 영상 매체의 디자인을 통칭하여 모션 그래픽스라 부르기도 한다. 현재 모션 그래픽스는 거의 모든 그래픽스 분야에 적용되고 있으며, 특히 모션 그래픽스로 인하여 크게 빛을 보고 있는 대표적인 곳은 영 화 스크린, TV 화면, 컴퓨터의 모니터 등이 있다. 이들에 대하여 좀 더 구체적으로 알아본 모 션 그래픽스의 활용 분야는 다음과 같다. ✔ 영화 타이틀 시퀀스 디자인(Title Sequence Design) ✔ 엔딩 크레딧(Ending Credit) ✔ 영화 예고편 (Movie Trailer) ✔ 방송 채널 디자인(Channel Design) ✔ 프로그램 타이틀 디자인(Title Design) ✔ 2D 애니메이션(Flash 등을 사용한 2D Animation) ✔ 3D 애니메이션(3D Studio MAX 등을 사용한 3D Animation) ✔ 타이포 애니메이션(Typo Animation) ✔ 뮤직 비디오(Music Video), 컴퓨터 게임(Computer Game), 광고 등 여기서 크레딧(Credit)은 ‘영화나 TV, 공연 등에서 참여한 사람들과 단체 및 사용한 기기 등 의 이름과 종류를 밝히는 것’을 의미하기도 하고, ‘영화 등의 작품을 만드는 데 공을 들인 사 람들’을 의미하기도 하며, 가장 쉽게 이해할 수 있는 의미로는 ‘출연자 및 스태프들’을 의미하 기도 한다. 그러므로 엔딩 크레딧(Ending Credit)이란 ‘영화가 끝난 후 배우, 스태프(Staff), 작 가, 협찬 등 영화와 관련된 사람이나 조직 등이 자막으로 올라가는 것’을 의미하며, 그 반대인 오프닝 크레딧(Opening Credit)은 ‘영화가 시작할 때 배우나 기획자 등이 자막으로 나오는 것’ 을 의미한다. Week 09 모션 그래픽스와 시각 효과는 After Effects가 최고 !

Upload: others

Post on 22-Sep-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

모션 그래픽스(Motion Graphics)란 말 그대로 움직이는(Motion) 그래픽스(Graphics) 혹은 동작하는(Motion) 그래픽스(Graphics)를 의미한다. 여기서 움직임(동작)이란 본래 갖고 있는 그래픽스의 의미에 시간과 공간이 더해진 개념이다. 모션 그래픽스의 의미를 풀어서 설명하면 시각적인 효과를 보여주는 이미지(사진)의 연속된 조합과 청각적인 효과를 들려주는 사운드(오디오) 등의 효과를 통해 각종 브랜드와 서비스에 새로운 활기를 불어 넣는 일련의 작업을 의미한다. 즉, 시간과 공간 타이포(Typography, 인쇄의 문자배열)와 사진(이미지)의 움직임(동작)이나 사운드(오디오) 등의 요소들을 이용하여 창의적이고 효과적인 영상으로 나타내는 것이 모션 그래픽스라고 할 수 있다. 최근에는 영상 산업이 급속도로 발전하면서 대부분의 영상 매체의 디자인을 통칭하여 모션 그래픽스라 부르기도 한다. 현재 모션 그래픽스는 거의 모든 그래픽스 분야에 적용되고 있으며, 특히 모션 그래픽스로 인하여 크게 빛을 보고 있는 대표적인 곳은 영화 스크린, TV 화면, 컴퓨터의 모니터 등이 있다. 이들에 대하여 좀 더 구체적으로 알아본 모션 그래픽스의 활용 분야는 다음과 같다.

✔ 영화 타이틀 시퀀스 디자인(Title Sequence Design)✔ 엔딩 크레딧(Ending Credit)✔ 영화 예고편 (Movie Trailer)✔ 방송 채널 디자인(Channel Design)✔ 프로그램 타이틀 디자인(Title Design)✔ 2D 애니메이션(Flash 등을 사용한 2D Animation)✔ 3D 애니메이션(3D Studio MAX 등을 사용한 3D Animation)✔ 타이포 애니메이션(Typo Animation)✔ 뮤직 비디오(Music Video), 컴퓨터 게임(Computer Game), 광고 등

여기서 크레딧(Credit)은 ‘영화나 TV, 공연 등에서 참여한 사람들과 단체 및 사용한 기기 등의 이름과 종류를 밝히는 것’을 의미하기도 하고, ‘영화 등의 작품을 만드는 데 공을 들인 사람들’을 의미하기도 하며, 가장 쉽게 이해할 수 있는 의미로는 ‘출연자 및 스태프들’을 의미하기도 한다. 그러므로 엔딩 크레딧(Ending Credit)이란 ‘영화가 끝난 후 배우, 스태프(Staff), 작가, 협찬 등 영화와 관련된 사람이나 조직 등이 자막으로 올라가는 것’을 의미하며, 그 반대인 오프닝 크레딧(Opening Credit)은 ‘영화가 시작할 때 배우나 기획자 등이 자막으로 나오는 것’을 의미한다.

Week09 모션 그래픽스와 시각 효과는 After Effects가 최고 !

Page 2: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

12

모션 그래픽스의 핵심은 무엇보다 화면 요소의 움직임(동작)과 사운드(오디오)의 결합에서 파생되는 효과를 어떻게 조절하고 표현하느냐 라고 볼 수 있다. 또한 모션 그래픽스에서 가장 중요한 작업 중 하나라고 할 수 있는 것은 모션 그래픽스와 3D 객체(Object) 작업, 음악(오디오, 사운드) 삽입 등의 작업들을 진행하는 것이라고 할 수 있다. 본 장에서는 이러한 모션 그래픽스를 표현함에 있어서 전문가들이 주로 사용하고 있는 필수적인 소프트웨어 중의 하나인 Adobe사의 After Effects를 사용하여 모션 그래픽스를 표현하는 방법에 대하여 알아보도록 한다. 단, 한 가지 주의할 점은 After Effects는 CS4 버전까지는 32bit를 지원하는 일반 PC에서 작업이 가능하였지만, CS5 버전부터는 64bit를 지원하는 PC에서만 작업이 가능하다는 것을 알고 본인의 PC 환경에 맞는 버전을 설치하여 작업하기 바란다. 본 장에서는 CS4 버전을 기준으로 설명하기로 한다.

불에 타는 영화 포스터 만들기1 본 절에서는 영화 포스터의 중심부를 시작으로 원형 모양으로 확장되면서 불에 타는 효과를 주는 모션 그래픽스를 제작해보고자 한다. 이를 위해서는 먼저 배경으로 사용할 영화 포스터 이미지 파일을 준비해야한다. 그리고 After Effects는 Composition 단위로 작업을 하기 때문에 모션 그래픽스 작업을 시작하기 위해서는 Composition Setting을 먼저 수행하여야 한다.

단계 1 Composition Setting을 하기 위해서는 메뉴 [Composition > New Composition]을 선택하여 대화창 [Composition Setting]이 나타나게 한 다음, 대화창 [Composition Setting]에서 Composition Name을 “불에 타는 포스터”라고 입력한다. 그리고 Basic > Presets를 Custom으로 변경하고 Width와 Height를 영화 포스터 이미지 크기와 동일하게 설정(Width : 400, Height : 572)한다. 이때 Lock Aspect Ratio to 100:143 (0.70)이 체크가 되어있으면 사용자가 원하는 이미지 크기 입력을 할 수가 없으므로 이 체크를 해제해준다. 여기서 Lock Aspect Ratio to 100:143(0.70)는 사용자가 불러온 이미지의 크기를 고려하지 않고 Width와 Height의 비율을 100:143(0.70)으로 고정시키는 기능을 하기 때문에 사용자가 원하는 크기의 이미지를 그대로 사용하고자 한다면 반드시 체크를 해제시켜줘야 한다. 그런 다음, ‘OK’ 버튼을 클릭하여 대화창 [Composition Setting]을 빠져나간다. 이제 배경으로 사용할 영화 포스터 이미지 파일을 외부(하드디스크, CD-ROM, DVD-ROM, USB Memory 등)에서 불러와야 한다.

Page 3: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

13

단계 2 외부 파일을 불러오기 위한 방법은 세 가지가 있는데, 첫째는 메뉴 [File > Import > File]을 사용하는 방법이고, 둘째는 Project panel의 빈 곳을 마우스로 더블클릭하는 방법이며, 셋째는 Project panel의 빈 곳을 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴들 중에서 메뉴 [Import > File]을 선택하는 것이다. 세 가지 방법 중에서 가장 편한 방법을 선택하여 영화 포스터 파일을 불러오면 Project panel에 불러온 영화 포스터 파일의 파일명을 비롯한 파일 정보가 나타나게 되는데, 마우스로 영화 포스터 파일을 클릭한 상태로 아래에 있는 Timeline panel의 빈 곳으로 드래그(Drag)하여 배치한다.

Page 4: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

14

단계 3 이제 불꽃을 만들기 위해 필요한 레이어(Layer)를 생성해야하는데, 이를 위해서는 메뉴 [Layer > New > Solid]를 선택하고 대화창 [Solid Settings]이 나타나게 한다. 대화창 [Solid Settings]에서 Name을 “불타는 테두리”라고 입력하고 ‘OK’ 버튼을 클릭하여 대화창을 빠져나간다.

Page 5: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

15

단계 4 불꽃을 만들기 위해 새로 생성한 '불타는 테두리' 레이어(Layer)에 불꽃 효과를 내기 위한 모양(형태)을 설정해주어야 하는데, 이를 위해서 먼저 Timeline panel에 있는 Current Time Indicator( )를 시작 위치로 이동시킨다. 그리고 메뉴 [Effect > Generate > Ellipse]을 적용하고 Ellipse의 Effect Controls panel에서 Width : 10, Height : 10, Thickness : 8로 변경하고 각각의 스톱와치(Stop Watch)를 마우스로 클릭하여 활성화시켜준다. 또한 Softness : 0, Inside Color : 주황색(#FFA500), Outside Color : 갈색(#A52A2A)으로 변경해준다.

Page 6: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

16

------------------------------------------------------------------------------참 고 스톱와치(Stop Watch)를 활성화 시켜주는 이유는 키 프레임 기법으로서 포스터의

중심부에서 출발하여 바깥쪽으로 점차 확대되어지면서 Ellipse가 커지게 할 수 있도록 하기 위함이다. 그리고 Inside Color와 Outside Color를 설정하는 이유는 불꽃의 안쪽과 바깥쪽을 색상으로 구분하여 효과적인 불꽃의 형태를 보여주기 위함이다. Ellipse는 원래 타원으로서 Width와 Height의 비율이 일정하지 않는 것이 특징이지만 본 절에서는 Width와 Height의 비율을 유지시킬 필요가 있다. 왜냐하면 불꽃의 영화 포스터의 중심부에서 시작하여 영역을 확장해나갈 때 Width와 Height의 비율이 유지된 거의 원형에 가깝게 적용하기 위해서이다. 혹자는 그러면 Width와 Height의 비율을 같게 유지시킬 것이면 Circle을 사용하면 되지 않느냐고 할 수도 있으나 Ellipse와 Circle는 성격이 다르기 때문에 본 절에서 Circle을 사용하지는 않는다.------------------------------------------------------------------------------

단계 5 Ellipse의 Width와 Height의 비율을 유지시키기 위해서 Timeline panel의 ‘불타는 테두리’ 레이어(Layer)를 확장하여 Effects > Ellipse > Height를 선택해 놓고 메뉴 [Animation > Add Expression]을 적용해주고, Expression : Height의 ‘effect("Ellipse","Height")’를 effect("Ellipse","Width")’로 수정한다.

단계 6 Timeline panel은 기본적으로 30초에 맞게 설정되어져 있는데, 본 절에서는 10초로 수정하고 5초 정도에 최대의 불꽃 효과를 주고자 한다. 그러므로 최대 시간을 수정하여야 하는데, 이를 위해서는 Timeline panel의 제일 오른쪽 윗부분의 작은 삼각형 메뉴( )를 마우스로 클릭하여 하부 메뉴 [Composition Settings...]을 선택하여 준다. 그리고 나타나는 대화창 [Composition Settings]의 Duration(시간) 값 00;00;30;00을 00;00;10;00으로 변경해주고 ‘OK’ 버튼을 클릭하여 대화창을 빠져 나간다.

Page 7: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

17

Timeline panel의 Current Time Indicator( )를 5초 뒤로 이동시키고 Ellipse의 속성 값을 Width : 240, Height :240, Thickness : 80으로 설정한다. 그리고 지금까지 수정한 속성 값들을 다음 작업에서 사용하기 위해 Ellipse의 Animation Presets를 Save Selection as Animation Presets로 변경하여 “불꽃.ffx”이라는 이름으로 저장해둔다.

Page 8: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

18

여기서 Width와 Height 및 Thickness의 값을 정하는 기준은 따로 정해진 것이 아니라 Ellipse의 크기를 설정하는 것으로서 불꽃의 효과를 약하게 줄 것인지 강하게 줄 것인지에 따라 사용자가 적당히 설정하면 된다. 본 절에서는 불꽃의 효과를 어느 정도 강하게 주기 위해서 Thickness를 ‘80’으로 설정하였다.

단계 7 지금까지는 불타는 영화 포스터를 제작하기 위한 테두리 생성 작업까지 완성하였다. 그래서 ‘불타는 테두리’ 레이어(Layer)를 메뉴 [Layer > Pre-compose...]를 선택하여 대화창 [Pre-compose]가 나타나게 한 다음 “불타는 테두리”라는 이름으로 변경하고, 체크 메뉴 [Move all attributes into the new composition]을 체크해준다. 왜냐하면 새로운 Composition에 모든 속성 값들을 이동시켜 그대로 사용해야 하기 때문이다. 그런 다음, ‘OK’ 버튼을 클릭하여 대화창을 빠져나간다.

Page 9: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

19

단계 8 지금부터는 본격적으로 불꽃 모양을 만들어야 하는데, 이를 위해서는 먼저 메뉴 [Layer > New > Solid]를 선택하여 대화창 [Solid Settings]이 나타나게 하고, Name을 “프랙탈 노이즈”라고 입력한 다음 ‘OK’ 버튼을 클릭하여 대화창 [Solid Settings]을 빠져 나간다.

Page 10: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

20

단계 9 Timeline panel의 Current Time Indicator( )를 시작 위치로 이동시키고 ‘프랙탈 노이즈’ 레이어(Layer)를 선택한 다음 메뉴 [Effect > Noise & Grain > Fractal Noise]를 적용한다. 그리고 Effect Controls panel의 속성 값들 중에서 Contrast(대비/대조) : 240, Transform의 Uniform Scaling : 해제, Scale Width : 20, Scale Height : 40 등으로 변경하고, Transform > Offset Turbulence(교류/난류 상태의 차감/오프셋)와 Evolution(전개/발전)의 스톱와치(Stop Watch)를 클릭하여 활성화시켜준다.

단계 10 Fractal Noise 기능을 사용하는 이유는 실제 화면에 보여 질 불꽃 내부의 형상을 보여주기 위함이다. 다시 Timeline panel의 Current Time Indicator( )를 5초 뒤로 이동시킨 다음 Fractal Noise의 속성 값들 중 Offset Turbulence : Y -300, Evolution : 2 × +40 으로 변경한다. 여기서 설정한 값은 앞서 언급한 것처럼 특별하게 정해진 것이 아니라 사용자가 설정하기 나름임을 감안하기 바라며 각 속성 값들을 사용자가 직접 수차례 변경시켜보면서 가장 적당한 값을 선택하면 되는 것이다.

Page 11: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

21

단계 11 지금까지는 불타는 영화 포스터를 제작하기 위한 불꽃 모양을 만드는 작업까지 완성하였다. 그래서 ‘프랙탈 노이즈’ 레이어(Layer)를 메뉴 [Layer > Pre-compose]를 선택하여 대화창 [Pre-compose]가 나타나게 한 다음 “프랙탈 노이즈”라는 이름으로 변경하고, 체크 메뉴 [Move all attributes into the new composition]을 체크해준다. 왜냐하면 새로운 Composition에 모든 속성 값들을 이동시켜 그대로 사용해야 하기 때문이다. 그런 다음, ‘OK’ 버튼을 클릭하여 대화창을 빠져나간다.

Page 12: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

22

단계 12 지금부터는 지금까지 작업한 Fractal Noise를 기반으로 Displacement Map(변위 맵) 효과를 적용할 것이다. Displacement Map이란 Displacement Map 레이어(Layer) 특성에 의해 정의된 제어 레이어(Layer) 즉, ‘프랙탈 노이즈’ 레이어(Layer)내의 픽셀(Pixel)들의 색상 값을 기반으로 수평 및 수직으로 픽셀들을 옮김으로써 레이어(Layer)를 왜곡시키는 효과를 의미한다. Displacement Map에 의해서 생성된 왜곡의 형태는 사용자가 선택한 옵션과 제어 레이어(본 절에서는 ‘프랙탈 노이즈’ 레이어(Layer))에 따라 크게 변할 수 있다. 본 절에서 Displacement Map을 사용하는 이유는 불꽃이 활활 타오르는 모양이 규칙적이지 않고 불규칙적이기 때문에 그와 같은 효과를 주기 위함이다. 그러므로 이와 같은 Displacement Map 효과를 적용하기 위해서는 먼저 Timeline panel의 Current Time Indicator( )를 시작 위치로 이동시키고 ‘프랙탈 노이즈’ 레이어(Layer)를 ‘Composition-불에 타는 포스터’에서 보이지 않게 한 다음 ‘불타는 테두리’ 레이어(Layer)를 마우스로 선택한다.

Page 13: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

23

단계 13 메뉴 [Effect > Distort > Displacement Map]을 선택하여 Displacement Map을 적용하고 Effect Controls panel에서 Displacement Map의 속성 값들 중 Displacement Map Layer를 ‘프랙탈 노이즈’로 변경한다. 즉, 프랙탈 노이즈(Fractal Noise)에 Displacement Map을 적용하겠다는 의미이다.

단계 14 Max Vertical Displacement의 값을 ‘25’로 변경하고 Max Vertical Displacement의 스톱와치(Stop Watch, )를 클릭하여 활성화시킨다. 여기서 Displacement는 Displacement Map의 색상 값으로부터 결정되어지는데, 색상 값의 범위는 0에서 255까지이다. 그리고 각 색상 값은 -1에서 1까지의 영역 내에서 크기 변경이 수행되어진다. 이러한 Displacement의 양

Page 14: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

24

(Amount)은 사용자가 정의한 Max Displacement 양(Amount)에 의해서 변환된 값을 곱함으로써 계산되어진다. 색상 값 ‘0’은 최대 Negative Displacement를 만들어내고, 색상 값 ‘255’는 최대 Positive Displacement를 만들어낸다. 그리고 색상 값 ‘128’은 No Displacement를 만들어낸다. 다음 그림은 Displacement Map을 Timeline panel의 시작 위치에서 ‘불타는 테두리’ 레이어(Layer)에 적용한 것이다.

단계 15 Timeline panel의 Current Time Indicator( )를 5초 뒤로 이동시킨 다음 Displacement Map의 속성 값들 중 Max Vertical Displacement 값을 ‘40’으로 변경한다.

Page 15: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

25

단계 16 Displacement Map 효과에 의해서 어느 정도 불꽃이 활활 타오르는 효과를 보여주고 있으나 불꽃 자체가 너무 거친 느낌이 있다. 그러므로 Blur(흐리기) 효과를 주어 부드러운 불꽃 효과를 주고자 한다. 이를 위해서는 메뉴 [Effect > Blur & Sharpen > Fast Blur]를 선택하여 Blur 효과를 준다. 이때 불꽃이 거칠지 않게 하기 위해 직접 변경해야할 속성 값은 Blurriness(흐림 정도)로서 사용자가 적당히 변경해보면서 가장 적당한 값을 선택하면 된다. 필자는 Effect Controls panel에서 Blurriness의 값을 ‘4’로 변경하였다.

Page 16: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

26

단계 17 그러나 아직까지 불꽃이 자연스럽지 못한 부분(불꽃의 가장자리가 뚜렷하지 못해서 부자연스럽게 보이는 현상 등)이 존재하고 있기 때문에 조금 더 불꽃 부분을 보완하도록 하겠다. 이를 위해서 Timeline panel에서 ‘불타는 테두리’ 레이어(Layer)를 마우스로 선택한 상태에서 메뉴 [Edit > Duplicate]를 선택하여 ‘불타는 테두리’ 레이어(Layer)를 복제하고, 복제된 ‘불타는 테두리’ 레이어(Layer)를 Timeline panel의 제일 위 트랙으로 이동시킨다. 그리고 바로 전에 적용한 Fast Blur 효과를 마우스로 선택하고 키보드의 < Delete > 키를 눌러서 삭제한다.

Page 17: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

27

단계 18 Timeline panel에서 ‘불타는 테두리’ 레이어(Layer)를 복제하고 Fast Blur 효과를 삭제해줌으로써 불꽃이 조금 더 자연스러워졌다. 이제 불꽃이 영화 포스터의 중심부에서 시작하여 밖으로 확장해갈 때 영화 포스터의 불탄 부분은 영화 포스터 이미지가 나타나지 말아야 한다. 즉, 영화 포스터가 불에 탔기 때문에 검정색으로 채워져야 한다는 것이다. 이를 위해서는 새로운 레이어(Layer)를 생성하고 알파 채널(Alpha Channel)을 이용하여야 한다. 그러므로 메뉴 [Layer > New > Solid]를 선택하여 대화창 [Solid Setting]이 나타나면 Name을 “불꽃”이라고 입력한다.

Page 18: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

28

‘불꽃’ 레이어(Layer)를 Timeline panel의 제일 아래에 있는 영화 포스터 레이어(Layer) 바로 위로 이동시킨다. 그리고 Timeline panel의 Current Time Indicator( )를 시작 위치로 이동시키고 메뉴 [Effect > Generate > Ellipse]를 적용한다. 우리는 Effect Controls panel에서 Ellipse의 속성 중 Animation Presets를 ‘불꽃’으로 저장한 것이 있었으므로 기존에 저장된 속성 값을 그대로 동일하게 사용하기 위해 지금 새로 생성한 ‘불꽃’ 레이어(Layer)의 속성 중 Animation Presets를 ‘불꽃’으로 변경해준다. 만약 Animation Presets에 ‘불꽃’ 항목이 보이지 않으면 메뉴 [Animation > Recent Animation Preset > 불꽃 ]을 선택해주면 된다.

Page 19: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

29

그런 다음, Timeline panel에서 ‘불꽃’ 레이어(Layer)를 마우스로 선택하고 메뉴 [Layer > Pre-compose]를 선택하여 대화창 [Pre-compose]이 나타나게 한다. 그리고 New Composition Name을 “불꽃”으로 입력하고 ‘OK’ 버튼을 클릭하여 대화창을 빠져 나간다.

Page 20: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

30

단계 19 Timeline panel의 Current Time Indicator( )가 시작 위치에 있는지 확인한 다음 Timeline panel의 ‘불꽃’ 레이어(Layer)를 선택하고 메뉴 [Effect > Distort > Displacement Map]을 적용한다. 그리고 Effect Controls panel에서 Displacement Map의 속성 값들 중 Displacement Map Layer를 ‘프랙탈 노이즈’로 변경하고, Max Vertical Displacement의 값을 ‘25’로 변경하고 Max Vertical Displacement의 스톱와치(Stop Watch)를 클릭하여 활성화한다. 그리고 Displacement Map Behavior을 'Stretch Map to Fit'로 변경한다.

단계 20 그런 다음 Timeline panel의 Current Time Indicator( )를 5초 뒤로 이동시키고 Displacement Map의 속성 값들 중 Max Vertical Displacement를 ‘40’으로 변경한다.

Page 21: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

31

단계 21 이제 영화 포스터에서 불타고 없어진 부분을 구멍이 뚫린 것처럼 투명한 상태로 표현하기 위한 매트(Matt)를 제작하도록 한다. 여기서 매트(Matte)란 사전적인 의미로는 카메라나 인화기의 렌즈 앞에 놓여 연기 행위가 이루어지는 화면 부분으로부터 빛을 조정하거나 차단하는 마스크(Mask)의 일종이라는 의미와 실경이나 무대장치에 맞춰 투명 유리에 장면을 그려놓은 다음 이것을 렌즈 앞에 놓고 촬영함으로써 두 개의 분리된 화면을 합성하는 방법 등의 의미가 있는데, 본 과정에서의 매트(Matte)란 마스크(Mask)의 일종이라는 의미가 더 가깝다고 보면 될 것 같다. 이러한 매트를 제작하기 위해 Timeline panel의 Current Time Indicator( )가 있는 곳에서 ‘불꽃’ 레이어(Layer)의 부분( )을 마우스로 더블클릭하면 Timeline panel에 ‘불꽃’ 탭(Tab)이 생성된다. ‘불꽃’ 탭에서 Timeline panel의 Current Time Indicator( )를 5초 위치로 이동시키고 Effect Controls panel에서 속성 값 Width, Height 및 Thickness를 모두 ‘120’으로 변경한다. 여기서 설정된 속성 값 ‘120’은 이미 언급한 것과 같이 특별히 정해진 것이 아니라 본인이 임의로 설정할 수 있는 값으로서 수차례 다양한 값으로 설정하여 실험해본 후에 가장 적당한 값을 선택하도록 한다.

Page 22: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

32

단계 22 Timeline panel에서 ‘불에 타는 포스터’ 탭을 선택하고, 영화 포스터에서 불에 타고 난 빈 공간을 투명하게 하기 위해 Timeline panel의 영화 포스터 레이어(Layer)의 TrkMat(Track Matte)를 Alpha Inverted Matte “불꽃”으로 변경한다. 이때 Timeline panel에 TrkMat(Track Matte)가 나타나지 않으면 Timeline panel 아래에 있는 ‘Toggle Switches/Modes’를 마우스로 클릭하면 나타난다. 결국 마스크(Mask) 기능을 가진 매트(Matte)를 사용함으로서 바로 위의 불꽃 레이어(Layer)와 영화 포스터 레이어(Layer)를 합성하여 불꽃 부분이 투명하게 된다.

Page 23: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

33

단계 23 이제 어느 정도 불타는 영화 포스터가 완성 되었다고 볼 수 있다. 그러나 아직 불타는 장면을 자세히 보면 실감나는 표현으로는 부족한 면이 없지 않다. 그래서 조금만 더 보완 작업을 하도록 하겠다. Timeline panel의 세 번째에 있는 ‘불타는 테두리’ 레이어(Layer)를 마우스로 선택하고 메뉴 [Edit > Duplicate]를 선택하여 복제하고, 복제된 ‘불타는 테두리’ 레이어(Layer)를 마우스로 선택한 상태에서 메뉴 [Effect > Perspective > Drop Shadow]를 적용한다. 그리고 Effect Controls panel에서 Drop Shadow의 속성 값들 중 Opacity : 100, Distance : 0으로 변경하는데, 그 이유는 불에 탄 자리가 실제로 나무가 불에 타서 숯처럼 보이는 것과 같은 효과를 연출하기 위해서이다. 또한 Timeline panel의 ‘불타는 테두리’ 레이어(Layer)의 Mode를 ‘Linear Burn’으로 변경해줌으로써 불에 탄 자리가 보다 더 실감나도록 해준다. 이때 Timeline panel의 Current Time Indicator( )의 위치를 따로 지정할 필요가 없는데, 그 이유는 특별한 시간에 제한된 효과를 적용하는 것이 아니기 때문이다. 그래서 Drop Shadow의 속성 값을 변경할 때 스톱와치(Stop Watch)를 클릭하여 활성화시키지 않은 것이다.

Page 24: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

34

단계 24 불꽃을 자세히 보면 주황색이 많이 눈에 보이는데, 실제 불꽃은 붉은 계통이 더 많을 것으로 생각된다. 그러므로 불꽃의 색상을 붉은 계통으로 변경시켜 보겠다. 먼저 Timeline panel의 제일 위 ‘불타는 테두리’ 레이어(Layer)를 마우스로 선택한 상태에서 메뉴 [Edit > Duplicate]를 적용하여 복제를 한다. 그리고 Timeline panel에서 복제된 ‘불타는 테두리’ 레이어(Layer)의 Mode를 ‘Multiply’로 변경시켜주면 불꽃이 전체적으로 붉은 계통의 색상으로 변경되어짐을 확인할 수 있다.

Page 25: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

35

단계 25 그러나 불꽃의 색상이 너무 붉은 계통이면 실제 불꽃의 색상과 다를 수 있으므로 Timeline panel의 복제된 ‘불타는 테두리’ 레이어(Layer)를 확장하여 속성 메뉴 [Transform > Opacity ]의 값을 ‘50’ 정도로 변경하여 보다 자연스러운 불꽃이 되도록 함으로써 불타는 영화 포스터의 모든 작업은 끝난다.

Page 26: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

36

단계 26 이제 불타는 영화 포스터 작업을 모두 마쳤기 때문에 최종 결과물을 파일로 저장해야 한다. 메뉴 [File > Export]에서 사용자가 저장하기를 원하는 파일 형식을 선택하면 되는데, 일반적인 동영상 파일로 저장하기 위해서는 메뉴 [File > Export > AVI...]을 선택하면 된다. 대화창 [AVI 설정]에서 비디오와 사운드 각각의 [설정] 버튼을 클릭하여 코덱(Codec) 등의 속성 값들을 적당히 변경하면 되고, 만약 기본 값을 그대로 사용하려면 바로 [확인] 버튼을 클릭하여 대화창 [AVI 설정]을 빠져 나가면 새로운 대화창 [다른 이름으로 저장]이 나타난다.

Page 27: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

37

그런 다음, 적당한 파일 이름을 입력하고 ‘저장(S)’ 버튼을 클릭하여 대화창 [다른 이름으로 저장]을 빠져나가면 끝난다.

단계 27 지금까지 작업한 모든 과정을 거쳐 탄생한 ‘불타는 영화 포스터’의 완성 작품을 초당 한 장씩의 스틸(Still) 이미지로 제작하여 순서대로 살펴보면 다음 그림들과 같다.

Page 28: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

38

Page 29: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

39

사진 합성 화법 기법으로 멋진 영상 만들기2

단계 1 Project panel에서 마우스를 더블클릭하여 대화창 [Import File]이 나타나게 하고 사진들이 모여 있는 폴더를 검색하여 멋진 영상을 만들기 위한 사진들과 배경으로 사용할 Texture 이미지 등을 선택한 후 가져온다. 단, 가져온 영상들의 크기는 동일한 해상도를 가지고 있어야 한다.

단계 2 배경 Texture 이미지로 사용할 사진을 클릭하여 선택하고 Project panel의 바닥 부분에 있는 아이콘 메뉴 [Create a New Composition, ]으로 드래그(Drag)한다. 그러면 사진의 크기에 맞는 새로운 Composition이 사진 파일명(‘wood_bg’)으로 생성되고 열려질 것이다. 본 저자는 메뉴 [Composition > Composition Settings]에서 ‘10:00’의 Duration(지속시간)을 가지는

Page 30: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

40

1280 픽셀 크기의 정사각형 이미지를 배경으로 사용한다. 여러 가지 사진들 중 하나를 선택하고 Timeline panel의 배경 Texture 이미지 위로 드래그(Drag)한다. 그런 다음 Timeline panel에서 Scale 속성 값을 보기 위해서 키보드의 < S > 키를 눌러주고 20%로 조절한다. 단, 사진의 해상도에 따라 적절히 Scale을 조절하여야 하므로 Scale의 속성 값을 조절하는 것은 사용자가 판단하기 바란다. 이때 배경 Texture 이미지를 모두 볼 수 있도록 Composition panel의 왼쪽 아래 부분에 있는 Magnification ratio popup ( )을 클릭하여 33.3% 내외가 되도록 설정해준다.

단계 3 대부분의 디지털 사진들은 테두리 부분에 흰색 에지(Edge)를 가지고 있지 않다. 그러므로 사진의 테두리에 흰색 에지를 추가하고자 한다. Timeline panel의 사진 레이어(Layer)를 선택하고 Toolbar에서 Rectangle Tool( )을 마우스로 더블클릭하여 레이어 주변에 자동적으로 마스크가 추가되도록 한다. 그런 다음, 메뉴 [Effect > Generate > Stroke]를 선택하고 Effect Controls panel에서 Brush Size : ‘10 px’, Brush Hardness :‘100%’, Spacing ‘0%’로 조정한다. 단, 각 속성 값들을 조정하는 것은 사진의 크기에 맞게 사용자가 적당히 조절하여야 한다. 이때 사진을 제대로 볼 수 있도록 Composition panel의 왼쪽 아래 부분에 있는 Magnification ratio popup ( )을 클릭하여 100.0% 내외가 되도록 설정해준다.

Page 31: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

41

단계 4 대부분의 디지털 사진들은 또한 3D 레이어(Layer)와 그림자 생성을 위한 빛을 사용하지 않고 있다. 그러나 본 단계에서는 그림자를 생성하고자 하는데, 그 이유는 사진들에게 입체적인 효과를 주기 위해서이다. 메뉴 [Effect > Perspective > Drop Shadow]를 선택하면 Effect Control panel에 Drop Shadow가 추가되어진다. 참고로 [Effect > Perspective > Radial Shadow]는 한 장의 사진들이 더 현실적이고 제어할 수 있도록 하기 위한 목적으로 사용되어진다. Effect Control panel에서 Distance : ‘0 px’, Softness : ‘120 px’로 설정한다. 단, 이 속성 값들을 설정할 때 사진에 적합한 그림자가 생성되도록 사용자가 적당히 조정할 수 있어야 한다.

Page 32: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

42

단계 5 Timeline panel에서 Zoom in(In time, )을 최대화하고 Current Time Indicator( )를 00:20f로 이동시킨 다음, 사진의 위치와 회전 값을 조정하기 위해서 키보드의 < P > 키와 < Shift + R > 키를 눌러준다. 그런 다음, 키 프레임을 추가하기 위하여 아이콘 메뉴 [Stopwatches, ]를 각각 클릭한다.

Page 33: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

43

단계 6 키보드의 < V > 키를 눌러 Selection Tool이 선택되게 하고 Composition panel의 바닥 부분으로 사진을 이동시킨다. 또한 키보드의 < W > 키를 눌러 Rotation Tool이 선택되게 하고 사진을 적당히 회전시킨다. 그리고 Timeline panel의 00:00f으로 Current Time Indicator( )를 이동시키고 사진을 반대 방향으로 원하는 만큼 회전한 다음, 키보드의 < V > 키를 눌러 Selection Tool이 선택되게 하여 Composition panel에서 스크린 밖으로 사진을 적당히 드래그(Drag)한다. 이때 배경 Texture 이미지를 모두 볼 수 있도록 Composition panel의 왼쪽 아래 부분에 있는 Magnification ratio popup ( )을 클릭하여 25.0% 내외가 되도록 설정해준다. 그리고 그 상태에서 사진 레이어(Layer)의 Motion Blur 스위치( )를 클릭한다.

Page 34: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

44

단계 7 Timeline panel에서 마우스를 사용하여 00:20f에서 있는 키 프레임들을 포함하는 Marquee를 그려 키 프레임들이 모두 선택되게 한 다음, 메뉴 [Animation > Keyframe Assistant > Easy Ease In]을 선택한다. Timeline panel의 아이콘 메뉴 [Graph Editor, ]를 클릭하고 사진의 모션 속도 곡선을 보기 위해 사진의 Position 값을 클릭한다.

Position에 해당하는 모션 속도 곡선의 두 번째 키 프레임 즉, 00:20f에 있는 곡선의 끝점을 마우스로 선택하면 모션 속도 곡선의 핸들(Handle, )을 볼 수 있으며, 첫 번째 키 프레임에서의 속도에 비하여 두 번째 키 프레임에서의 속도가 매우 빠르게 감소하도록 키보드의 < Shift >

Page 35: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

45

키를 누른 상태에서 핸들(Handle)을 클릭하고 왼쪽으로 드래그(Drag)한다.

또한 사진의 Rotation 값을 선택하여 Position 값과 같이 정확하게 같은 과정으로 반복하라.

단계 8 단계 3 에서 단계 6 까지 과정을 통하여 우리는 여러 번 재사용할 수 있는 하나의 레이어(Layer)를 준비했으며 핵심적인 사진 이미지는 나중에 쉽게 교체되어질 수 있다. 레이어(Layer)를 복제하기 위해서는 사진 이미지 레이어(Layer)를 선택하고 키보드의 < Ctrl + D > 키를 눌러주면 된다. 실수로 중간 키 프레임이 추가되지 않도록 하기 위해서 Current Time Indicator( )를 00:20f에 있게 하고, 다른 최종 위치(Position)와 각도(Angle)로 이 레이어(Layer)를 이동하고 회전한다. 그런 다음 Current Time Indicator( )를 00:00f로 이동하고 다른 시작 위치와 각도로 이 레이어(Layer)를 이동하고 회전한다.

Page 36: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

46

단계 9 단계 8 에 복제된 레이어(Layer)에 대하여 사진의 Position과 Rotation에 대한 키 프레임 값(00:00f 및 00:20f)을 단계 7 과 같이 조정한다. 그리고 단계 8 에서 단계 9 까지 과정과 동일한 방법으로 배경 Texture 이미지 전체적으로 사진 이미지들이 채워질 수 있도록 반복 작업해준다. 이때 가능하면 Composition panel의 네 개의 모퉁이에 있는 임의의 위치들로부터 사진 이미지들이 각각 날아올 수 있도록 설정해주기 바란다. 또한 배경 Texture 이미지에 떨어지게 될 사진 이미지들의 최종 Position은 배경 Texture 이미지의 바닥에서 꼭대기 방향으로 향하게 하면 된다. 단, 배경 Texture 이미지의 꼭대기 조금 아래 부분은 제일 마지막에 제목을 작성하고 보여주기 위한 공간으로 남겨두어야 한다.

Page 37: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

47

단계 10 지금 현재 모든 사진 이미지 레이어(Layer)들은 모두 같은 시간에서 출발(00:00f)하고 배경 Texture 이미지에 같은 시간에 도착(00:20f)하게 된다. 그러므로 Photo Montage가 제대로 되도록 하기 위해서는 각각의 사진 이미지 레이어(Layer)들의 출발 시간과 도착 시간이 모두 다르게 설정하여야할 필요가 있다. 키보드의 < F2 > 키를 사용하여 모든 레이어(Layer)들이 선택되지 않도록 하고, 제일 아래 있는 사진 이미지 레이어(Layer)를 선택한다. 그리고 키보드의 < Shift > 키를 누른 상태에서 제일 위에 있는 사진 이미지 레이어(Layer)를 선택해준다. 이때 제일 아래 있는 사진 레이어(Layer)를 먼저 선택하고 제일 위에 있는 사진 레이어(Layer)를 나중에 선택하는 이유는 제일 아래 있는 사진 레이어(Layer)가 배경 Texture 이미지에 제일 먼저 던져지게 하기 위한 것이고 제일 위에 있는 사진 레이어(Layer)가 제일 나중에 던져지게 될 것이기 때문이므로 이 순서를 잘 지켜야 한다.

Page 38: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

48

그런 다음 메뉴 [Animation > Keyframe Assistant > Sequence Layers]를 선택하고 대화창 [Sequence Layers]가 나타나게 한다. 대화창 [Sequence Layers]에서 체크 박스 메뉴 [Overlap]을 체크해주고 콤보 박스 메뉴 [Transition]은 ‘Off’로 변경한다. 또한 Timeline panel에서 설정한 마지막 프레임보다 약 10∼20 프레임 정도 작게 Duration을 설정한다. 예를 들어 Timeline panel이 10:00f이면 09:20f로 설정하면 된다. 그리고 ‘OK’ 버튼을 클릭하여 대화창을 빠져나간다.

Page 39: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

49

단계 11 지금 현재 Timeline panel에는 하나의 사진 이미지를 복제한 수십 개의 레이어(Layer)들이 있다. 그러므로 모든 사진 레이어(Layer)들의 사진을 교체하여야 한다. Timeline panel에서 두 번째 사진 레이어(Layer)를 선택하고 사진 이미지를 Composition panel에서 확인할 수 있도록 Current Time Indicator( )를 제일 마지막 프레임으로 이동시킨 다음, Project panel에서 교체하고자 하는 사진 이미지를 선택한다. 그리고 키보드의 < Ctrl + Alt + / > 키를 눌러주면 사진의 경계선, 그림자, 키 프레임 및 속도 제어 등은 그대로 있고 두 번째 사진 레이어(Layer)의 사진 내용만 교체되게 된다. 이와 같은 방법으로 Timeline panel에 있는 모든 레이어(Layer)들의 사진 이미지를 Project panel로부터 교체하도록 한다.

Page 40: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

50

단계 12 지금까지 Photo Montage를 위한 힘든 과정은 끝났다. 지금부터는 새로운 Composition을 생성하여 단계 1 에서 단계 11 까지 작업한 결과물을 카메라가 이동하면서 보이도록 한다. 새로운 Composition을 생성하기 위하여 키보드의 < Ctrl + N > 키를 눌러 대화창 [Composition Settings]이 나타나게 한다. 여기서 Composition Name은 “Comp 2”를 그대로 사용하거나 “Final Comp”와 같이 적당한 이름을 입력하고 탭 메뉴 [Basic]의 콤보 박스 메뉴 [Preset]에서 ‘HDV/HDTV 720 29.97’을 선택해준다. 그런 다음 ‘OK’ 버튼을 클릭하여 대화창을 빠져나간다.

Page 41: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

51

Project panel에서 단계 1 에서 단계 11 까지 작업한 결과인 Master animation comp( 단계 2 에서 생성한 ‘wood_bg’)을 클릭하고 새로 생성된 Comp 2의 Timeline panel로 드래

그(Drag)한다.

Page 42: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

52

Composition panel에서 새로 생성된 Comp 2의 Edge 바닥에 맞게 Master animation comp( 단계 2 에서 생성한 ‘wood_bg’)의 Edge를 위로 올려 정렬해준다.

Page 43: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

53

단계 13 Timeline panel의 00:00f에서 Master animation comp(‘wood_bg’) 레이어(Layer)의 Position 값을 볼 수 있도록 키보드의 < P > 키를 눌러주고 키 프레임을 추가하기 위하여 아이콘 메뉴 [Stopwatches, ]를 클릭해준다. Timeline panel의 Current Time Indicator( )를 08:00f로 이동시키고 Composition panel에서 Master animation comp(‘wood_bg’) 레이어(Layer)의 꼭대기 Edge가 Comp 2의 꼭대기에 오도록 아래로 이동시켜 정렬한다.

Page 44: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

54

Timeline panel의 두 번째 키 프레임을 선택하고 메뉴 [Animation > Keyframe Assistant > Easy Ease In]을 선택한다. 그리고 RAM에서 미리보기를 생성하기 위해 키보드의 [Num Lock]을 켜준 다음 < 0 > 키를 눌러주거나 메뉴 [Composition > Preview > RAM Preview]를 선택해 준다.

Page 45: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

55

단계 14 메뉴 [Layer > New > Adjustment Layer]를 선택하여 새로운 Adjustment Layer를 생성한다. 그리고 메뉴 [Effect > Color Correction > Photo Filter]를 선택하고 Filter 옵션에서 ‘Warming Filter (81)’을 선택한다.

레이어(Layer)의 불투명도(Opacity) 속성 값을 보기 위해 키보드의 < T > 키를 눌러주고 Timeline panel의 Current Time Indicator( )를 04:00f로 이동시킨 다음, 아이콘 메뉴 [Stopwatches, ]를 클릭하여 불투명도(Opacity) 키 프레임을 추가한다. Current Time Indicator( )를 07:00f로 이동시키고 마지막에 원래 색상으로 되돌아가게 하기 위해 불투명도(Opacity)를 0%로 변경한다.

Page 46: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

56

단계 15 마지막으로 사진들에 잘 어울리는 제목을 추가한다. 이를 위해서는 Toolbar에서 Horizontal Type Tool( )을 마우스로 클릭하여 선택하고 Composition panel에서 제목을 입력할 부분을 마우스로 클릭한 다음 제목을 위한 문자를 입력한다. 이때 Timeline panel에는 ‘Text 1’이라는 이름의 새로운 레이어(Layer)가 생성되어지며, 입력할 문자에 대한 속성 값은 Character panel을 사용하면 된다. 만약 문자를 입력하면 Timeline panel의 문자 레이어 이름은 입력된 문자(“Adorable Twin Babies”)로 변경된다.

그러나 입력된 제목은 모든 사진들이 배경 Texture 이미지에 던져지고 나서 나타나야 하는데, 첫 프레임부터 마지막 프레임까지 모두 나타나고 있다. 그러므로 Timeline panel에서 문자 레이어(Layer)의 시작 프레임을 07:00f 위치로 마우스를 사용하여 클릭 및 드래그(Drag)하여 이동

Page 47: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

57

시키면 된다.

사진 합성 화법 기법으로 멋진 영상 만들기가 모두 끝났으며, 메뉴 [File > Export]에서 저장하고자 하는 최종 파일 포맷을 선택하고 저장하면 된다. 또한 나중에 편집을 하기 위해서는 메뉴 [File > Save As...]을 사용하여 After Effects 파일 포맷(*.aep)으로 저장해두면 된다.

Page 48: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

58

참고문헌501 김성호, "멀티미디어 기본+활용 제대로 배우기", 생능출판사, 2008.

02 http://layersmagazine.com/create-a-photo-montage-with-after-effects.html

03 http://www.adobe.com/

04 http://videohive.net/

Page 49: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

Chapter 12 모션 그래픽스와 시각 효과는 After Effects가 최고 !

59

연 습 문 제

01 박스(Cube), 구(Sphere), 원통(Cylinder) 및 각종 프리미티브(Primitives) 형태들을 이용한 입체 멀티스크린을 만들어 보라.

02 동영상에 3D 문자(Text)를 삽입하여 잘 어울리게 제작해 보라.

03 동영상을 시작하는 첫 부분에 등장하는 타이틀(Title)을 생동감 있게 보여주기 위한 방법을 고안하여 제작해 보라.

Page 50: Week 모션 그래픽스와 시각 효과는 After Effects가 최고it.sangji.ac.kr/~3D/ppt/CapstoneDesign/Movie/AfterEffects.pdf · 주는 모션 그래픽스를 제작해보고자

동영상 편집에서 특수효과 제작까지WEEK 09

60

04 동영상으로 특정 회사의 로고를 생동감 있는 3D 동영상으로 제작해 보라.