Article
움직이는 그림: 일러스트레이션에 애니메이션 적용하기
본문
닉 스톡스(Nick Stokes)의 포트폴리오는 시선을 사로잡는 매력이 있습니다. 포틀랜드에서 활동 중인 이 디자이너의 밝은 색상의 캐리커처 디자인은 보는 이에게 무지개색 그라디언트의 사이키델릭한 로고의 시대로 회귀한 듯한 인상을 줍니다. 닉은 이른 아침 만화를 시청하면서 어린 나이에 그림을 그리기 시작했고, 현재 낮에는 아트 디렉터로 근무하고 있지만, 여가 시간에는 어린 시절부터 그를 매료시켜 왔던 모티프를 완성하고 있습니다. 그는 어도비 일러스트레이터 CC에서 디자인을 완성한 다음 어도비 포토샵 CC에서 애니메이션을 적용합니다.
닉 스톡스의 “일상 속 사람들”
기존의 애니메이션은 항상 닉의 관심의 대상이었지만 제작 방법은 어렵고 복잡해 보였습니다. 첨단 기술의 발전이 이러한 스킬을 훨씬 더 용이하게 만들어 줍니다. “포토샵에서 GIF 기능을 발견하고 간단한 애니메이션을 쉽게 만들 수 있는지 알고 나서 얼마나 신났는지 모른다”고 닉은 말합니다.
멋진 애니메이션 GIF를 만드는 데 있어 핵심은 전문 셀 애니메이터처럼 각 프로젝트를 신중하게 다루어야 하는 것이지만, 제대로 된 툴이 있다면 자신의 아이디어를 더욱 쉽게 구현할 수 있을 것으로 닉은 확신합니다. 그는 “태블릿과 포토샵만을 사용해 디지털 방식으로 작업할 수 있다는 점은 놀라운 일”이라면서 “정말이지 적은 시간을 들여 시선을 사로잡는 비주얼을 만드는 일이 나날이 쉬워지고 있다”고 전합니다.
이미지에 애니메이션을 입히는 작업은 기술 수준과 상관없이 모든 디자이너가 배울 수 있다는 것을 입증하기 위해 닉은 자신의 애니메이션 프로세스를 통한 단계별 방법을 제공해 주었습니다. 이 간단한 방법과 여기에서 닉의 파일을 다운로드하여 따라 하다 보면 디자인 앱에 대한 지식과 크리에이티브 스킬을 향상시킬 수 있습니다.
1단계
창 메뉴에서 레이어 탭을 엽니다. 여기에는 애니메이션에 필요한 모든 에셋이 표시됩니다. “riders” 폴더를 클릭하여 다른 모든 라이더 레이어를 표시합니다. “rider 1” 레이어만 선택되어 있는지 확인합니다.(선택하면 레이어 왼쪽 상자에 눈 모양 아이콘이 보입니다.)
2단계
창 메뉴에서 타임라인을 선택합니다.
3단계
타임라인 막대의 왼쪽 하단에서 “프레임 애니메이션으로 변환합니다”라고 레이블이 붙여진 세 개의 정사각형 상자를 클릭합니다. 그러면 rider 1이 새 프레임에 표시됩니다. 그렇지 않은 경우 레이어 툴바에서 rider 1이 선택되어 있는지 확인합니다.
4단계
타임라인 막대의 rider 1 프레임 바로 아래에 “5초”라고 되어 있는 드롭다운 메뉴를 클릭하고 옵션에서 “기타…”를 선택한 다음 .07을 입력합니다. 이것은 이 프레임이 애니메이션으로 표시되는 시간입니다.
5단계
타임라인 툴바에서 “선택한 프레임을 복제합니다” 버튼을 클릭합니다(오른쪽에서 두 번째 버튼). 레이어 메뉴에서 rider 1을 선택 취소하고 rider 2를 선택합니다. 이제 첫 번째 프레임이 rider 1이 되고 두 번째 축소판은 rider 2가 됩니다.
6단계
프레임 3부터 15까지 각 프레임마다 해당 rider를 선택하여 레이어를 계속 복제합니다. 마지막에는 모두 15개의 프레임이 타임라인에 있어야 하고, 각 프레임마다 다른 rider가 포함되어 있어야 합니다.
7단계
15개 축소판을 만든 다음에는 타임라인 툴바의 왼쪽 하단에 있는 “루핑 옵션을 선택합니다”(왼쪽에서 두 번째)를 선택하고 “한 번”에서 “계속”으로 변경합니다. 그러면 재생이 끝난 후에도 다시 시작되는 연속 재생 비디오가 만들어집니다.
타임라인 툴바에 있는 재생 버튼(오른쪽에서 다섯 번째)을 눌러 반복 애니메이션을 확인합니다.
8단계
아직 끝난 것이 아닙니다. 자전거 타는 사람의 다리와 바퀴 색상에도 애니메이션을 적용해야 합니다.
다리부터 시작해 보겠습니다. 레이어 탭을 보면 “rider legs” 폴더가 있습니다. 이 레이어 왼쪽에 있는 상자를 클릭하여 활성화합니다. 이 폴더에는 rider 1부터 15까지의 다리가 포함되어 있습니다. 이 메뉴에서 rider 1이 선택되어 있는지 확인합니다. 이제 주황색 다리가 자전거 너머로 표시됩니다.
9단계
각 rider와 해당 다리 레이어를 연결하는 이 프로세스, 즉 프레임 2는 leg 2에, 프레임 3은 leg 3에, 프레임 4는 leg 4에 연결하는 단계를 반복 수행합니다.
10단계
이제 바퀴에도 이같은 작업을 수행합니다. 각 rider에는 서로 다른 색상값으로 바퀴 색상이 적용되어 있습니다.
“bike wheels” 폴더 이름 왼쪽에 있는 상자를 클릭하여 폴더를 활성화합니다. 그런 다음 bike wheels 폴더를 클릭하면 15개 바퀴를 모두 확인할 수 있습니다.
11단계
이제 각 바퀴와 해당 프레임을 동기화합니다. rider와 다리를 연결했던 것처럼 wheel 1은 프레임 1에, wheel 2는 프레임 2에, wheel 3은 프레임 3에 연결합니다.
12단계
모든 바퀴를 해당 프레임과 동기화한 후에는 타임라인 막대에 있는 재생 버튼을 눌러 작업 결과를 확인합니다.
어도비 크리에이티브 클라우드와 함께라면 자연스럽게 움직이는 일러스트레이션을 손쉽게 만들 수 있습니다.
이 단계까지 따라 해보신 분들을 위해 특별한 팁을 준비했습니다. 기존의 디자인에 애니메이션을 적용하는 방법을 배웠으므로, 이제는 어도비 캡처와 어도비 드로우를 사용하여 어디에서나 셀카에 신속하게 애니메이션을 적용하는 방법을 살펴보십시오.
그리고 구독에 대한 감사의 표시로, 튜토리얼을 준비했습니다. 다운로드하여 확인해 보십시오. 변함없는 관심을 보여주시는 여러분을 위해 어도비에서 할 수 있는 최소한의 보답입니다. 재미있는 gif를 만들어 보십시오.
