인터넷에서 애니메이션 gif를 보면 우아! 멋진데! 이건 도대체 어떻게 만든거야? 하고 감탄과 의문을 갖게 됩니다.
그래서 이번 강좌는 기존 애니메이션 GIF파일을 편집하는 방법에 대해 알아보기로 하겠습니다. 타인이 만든 작품을 편집해서 자기것인양 변경시켜 사용하면 저작권법에 걸리겠죠? 하지만 잘 만든 작품을 보면 나도 이렇게 해보고 싶은데 어떻게 만들었는지 궁금하다, 그래서 다른 그림으로 이렇게 만들고 싶다...이럴경우는 타인의 작품이 훌륭한 참고서가 됩니다. 창작은 결코 무에서 태어난 것은 아닐 것입니다. 기존의 창작물을 모방하고 나의 창의력을 불어넣음으로서 새로운 창작이 탄생하죠. 창작의 역사는 이런게 아닐까요?
애니메이션 gif파일을 편집하기 위해서는 퀵타임플레이어가 필요합니다. 이곳을 클릭하여 다운받으신후 설치해야합니다. 이곳을 클릭하여 샘플 gif파일을 다운 받습니다. 압축파일을 해제하세요.
포토샵 화면에서 메뉴(화면 좌측상단)의 file를 클릭하고 import, Video Frames to Layers.. 를 클릭합니다. 포토샵 cs5 64비트 버전은 이 기능을 지원하지 않고 윈도우탐색기에서 파일에 우클릭하여 연결프로그램을 포토샵으로 선택하면 바로 열립니다. 32비트버전은 두가지 기능을 다 지원합니다. 애니메이션 gif파일을 여는 두가지 방법중 포토샵에서 import로 열게되면 배경이 흰색으로 나오고 윈도우탐색기에서 연결프로그램을 포토샵으로 선택하여 열면 배경이 투명으로 나옵니다. 이 기능은 CS5버전부터 가능합니다. 이전버전은 애니메이션 gif파일을 이 방식으로 열면 한장의 gif사진만 나오게 됩니다. 그러니 CS5가 기능이 향상된 것이죠.
여기서는 cs4 이전 버전을 기준으로 설명드립니다. 위와같은 화면이 뜨면 애니메이션 gif파일이 있는 폴더로 이동합니다. 처음에는 아무 화면도 안보이는데 이것은 지금 하고있는 것이 (2)의 MOV, AVI, MPG..등 동영상파일을 불러오는 작업이기 때문입니다. GIF파일은 움직이는 사진이지 정확히 말하면 동영상 파일이 아닙니다. 하지만 편집하자면 이 방법으로 불러오는 수 밖에 없습니다. 그러면 파일이름란의 (1)에서 그림처럼 "*.*"을 쳐주고 엔터키를 누르면 위와같이 모든 파일들이 나타납니다. GIF파일인 (3)을 클릭하고 (4)의 LOAD를 클릭합니다.
그랬더니 위와같은 화면이 뜹니다. OK클릭하시고 넘어갑니다.
GIF파일의 화면이 나오고 오른쪽(2)의 레이어창에 3개의 레이어가 보입니다. (1)의 애니메이션 창이 없는 경우, 메뉴의 WINDOW-ANIMATION을 클릭하면 나옵니다(cs3버전부터 이미지레이가 포토샵에 통합되었습니다. 이전버전은 이미지레이에서 작업합니다). (1)의 애니메이션 창에서 (3)의 플레이버튼을 클릭하면 프레임이 차례로 선택되면서 애니메이션이 실행됩니다. 다시 (3)을 클릭하여 중지시킵니다.
이 애니메이션을 분석해보도록 하겠습니다. 현재상태에서 (2)의 레이어창에서 지금은 아래쪽 하나만 켜져있는 눈아이콘을 나머지 두개도 클릭해 줍니다. 그런다음 (3)의 플레이버튼을 클릭해보세요. 애니메이션이 안될겁니다. 1번 프레임을 선택한 상태에서 레이어창의 모든 레이어가 켜져있기 때문에 이 프레임에 레이어의 3가지 사진이 적용되어 프레임은 돌아가는데 변화가 없는것이죠.
필름의 각 프레임은 서로 변화가 있어야 합니다. 변화가 없으면 정지화상이죠. 레이어의 각 사진은 서로 다른 사진입니다. 그런데 눈아이콘을 다 켜놓음으로서 각프레임에 모든 사진이 적용되고 있는 것이죠.
그러면 이것을 원상복귀 시켜보겠습니다. 1번프레임을 선택하고 레이어창의 제일 아래 레이어의 눈아이콘만 켜지게 하고, 2번 프레임을 선택하고 가운데 레이어만 켜지게 하고, 3번 프레임을 선택하고 제일 위 레이어만 켜지게 해준다음 플레이버튼을 클릭합니다. 이번에는 애니메이션이 될겁니다. 각 프레임에 동작에 필요한 서로 다른 사진을 넣어주므로서 가능한 것이죠.
각 프레임에 필요한 사진만을 보여주기 위한 눈아이콘을 클릭해주는 것이 프레임 작업입니다.
이전강좌에서 애니메이션을 만들때 세장의 사진을 사용하지는 않았었죠. 4장의 사진이 있었는데 변화가 되는 사진은 별에 해당하는 사진과 과자가 있는 사진이었습니다. 이 애니메이션 파일을 위와같은 방법으로 포토샵에 불러오면 어떻게 될까요? 원래 4장의 사진이 있는 레이어가 나올까요? 아닙니다. 애니메이션 GIF파일은 변화가 있는 서로 다른 사진만을 레이어에 쏴주기 때문에 3장의 사진만 나옵니다. 또한 각 레이어는 배경화면은 같지만 별빛이 없거나 과자가 없거나 하는 사진이 있는 것입니다.
화면에서 좌측의 도구상자을 보시면 (1)의 빠른선택도구를 클릭합니다. 이런것이 안보이는 경우가 있는데, 그 위치에서 클릭한 상태로 1~2초 기다리면 작은 상자가 나오고 몇개의 다른 도구를 선택할 수 있게 됩니다. 그중에서 선택하시면 됩니다. 도구상자에는 보이는 것만 있는 것이 아닙니다. 도구 아이콘을 보시면 아이콘의 오른쪽 아래에 조그만 삼각형이 보입니다. 이것이 있는 도구아이콘들은 다른 도구가 포함되어 있습니다. 대부분 2~5개의 도구가 포함되어 있습니다.
여기서 한숨 나오시는 분들 계시겠죠? 이런... 보이는게 다가 아니잖아! 하지만 포토샵고수가 되더라도 도구를 다 쓰는거 아닙니다. 처음엔 그저 몇개만 사용할 뿐이죠.
(1)의 아이콘은 빠른선택툴이란 것인데 이것은 뭐냐하면, 사진에서 어떤 부분을 빠르게 선택하는 도구입니다. 느린선택도구는 없습니다만, 빠르다는 의미는 다른 선택도구에 비해 효율적이라는 의미죠. 하지만 그만큼 제한이 있습니다. 위 사진처럼 배경의 하얀화면과 사물인 그림의 색이 확연히 차이가 날 경우에 효율적으로 사용됩니다.
그러면 왜 이도구를 사용하는거지?
애니메이션 gif파일은 사물을 제외한 배경은 없어야 합니다. 이전에 말씀드린대로 gif파일은 인터넷에서 물체만 움직이는 애니메이션입니다. 그런데 흰색 배경까지 있으면 인터넷화면에서 보는데 방해가 됩니다. 깨끗하지도 않고요. 원래의 파일을 인터넷에 올리면 배경의 흰색은 안보입니다. 그러나 편집하기 위해 포토샵에 불러오면 흰색으로 나옵니다. 그래서 이 흰색을 없애줘야 편집의 기초작업을 할 수 있습니다.
빠른선택도구 마우스를 흰색배경에 클릭합니다. (2)부터 시작해서 (6)까지 해주면 점선들이 깜빡거리면서 흰색부분만 선택이 됩니다. 위 화면에서 레이어창을 보면 (7)의 레이어 1이 선택되어 있습니다. 키보드의 delete키를 눌러줍니다. (8)의 레이어2를 클릭하고 delete키를 눌러줍니다. (9)의 레이어3를 클릭하고 delete키를 눌러줍니다. 위 사진은 세개의 레이어 배경이 동일하기 때문에 이런 것이 가능합니다. 산타는 움직이지 않고 반짝이는 부분만 변화가 있을뿐입니다. 만약 산타가 움직인다면 레이어별로 배경을 제거해줘야합니다. 그러니 CS5가 사용하기 편리하죠.
정상적으로 하셨다면 위와같이 사진의 배경이 체크무늬로 보일겁니다. 또한 레이어창이나 애니메이션 창도 배경이 체크무늬로 바뀔거구요. 포토샵에서 체크무늬가 보인다면 그것은 인터넷화면에서는 투명을 의미합니다.
다음에는 글씨를 넣기 위해 사진화면을 좀 위쪽으로 늘리겠습니다.
(1)의 아이콘을 클릭합니다. 자르기 도구인데요. 사진의 일정부분을 선택하여 엔터키를 누르면 그 부분만 남게됩니다. 하지만 그림처럼 선택하고 주변의 조그만 네모를 마우스로 클릭해서 드래그하면 범위를 늘릴 수 있습니다. 여러부분을 해보시기 바랍니다. 취소시에는 (4)의 아이콘을 클릭하시면 됩니다. 여기서는 사진의 상단부분만 위로 늘릴 것이므로 마우스를 (2)에서 클릭하여 대각선 방향으로 드래그해서 사진 전체를 선택한 다음 (3)의 사각형을 위쪽으로 그림처럼 클릭드래그 해준 다음 엔터하시든가 (5)를 클릭하시면 됩니다.
제가 사진의 크기를 위쪽으로 늘린 것은 그 공간에 글씨를 넣고 글씨도 애니메이션이 되도록 하기 위함입니다.
반짝거리는 효과는 3개의 프레임으로 반복시켜주므로서 가능합니다. 글씨 또한 3개의 프레임으로 깜박거리게 할 수도 있지만 좀 우아하게 만들기 위해 프레임들을 늘려야합니다. 글씨가 천천히 나타났다 천천히 사라지는 효과를 주려고 하는데요. 그러자면 프레임이 많이 필요하게 됩니다. 하지만 기존의 사진에서 반짝이는 효과는 그대로 둬야합니다. 그래서 기존의 3개의 프레임을 여러번 복사해 줘야합니다. 4번 복사하면 총 15개의 프레임이 될 것입니다.
1번 프레임을 클릭한 후 shift키를 누른채 3번 프레임을 마우스로 클릭합니다. 그러면 3개의 프레임이 선택됩니다. 그런다음 (1)의 프레임복사아이콘을 클릭하면 그림처럼 4,5,6의 3개의 프레임이 만들어집니다. 5번 더 클릭해줘서 21개 프레임이 만들어지도록 합니다. 그런다음 애니메이션이 실행되는지 알아보기 위해 플레이버튼을 눌러봅니다.3개의 프레임만 있을때하고 같을겁니다. 프레임은 늘어나지만 반복되는 것은 3개의 프레임이니까요.
(7)의 레이어3을 클릭하고글자 애니메이션을 만들기 위해 (1)의 글자툴(Type Tool)을 클릭하면 영문 대문자 I자 형태의 커서로 변경됩니다. (2)의 빈공간에 마우스를 클릭하고 한글로 글자를 쳐줍니다. 글자를 만들면 (5)처럼 글자레이어가 생깁니다.
글자를 만들었으면 마우스를 (6)의 이동툴을 클릭하여 글자툴에서 벗어납니다. 어떤 툴을 사용했으면 항상 이동툴로 돌아오는 것을 습관화 해야합니다. 안그러면 그 툴을 계속 사용하게 되어 생각지도 않은 변화가 생기기도 하거든요.
그런다음 글자를 공간에 맞게 크기를 맞추기 위해 키보드의 Ctrl+T를 눌러줍니다. 그러면 글자 주변에 (3)처럼 박스가 생기고
주변에 조그만 사각형이 보입니다. 이 조그만 사각형은 클릭드래그 하면 크기를 변경할 수 있게 해줍니다. (4)의 모서리 부분을 클릭하고 오른쪽 아래로 드래그하면 글자의 크기가 변경됩니다. 공간에 맞게 해주시고 글자전체의 이동이 필요하면 박스안의 공간에 마우스 클릭드래그하여 이동하면 됩니다.
글자가 완성되었으면 두번째 프레임을 클릭하고 숫자 9를 칩니다. 그러면 (8)의 투명도가 90%로 바뀝니다. 세번째 프레임을 클릭하고 8을 치면 80%로 바뀝니다. 이런식으로 하면 10번째는 10%가 됩니다. 11번째는 0%가 돼야하는데 0을 누르면 100%가 됩니다. 그러니 직접 0%를 투명도 란에 입력합니다. 12번째는 다시 1을 입력....21째는 다시 100%로 됩니다. 여기까지 하면 완성입니다. 이곳의 글을 참고하여 저장하면 됩니다. 참고로 이미지의 크기가 일정크기 이상이 되면 인터넷상에서 애니메이션이 안됩니다. 그 크기는 가로 650픽셀정도 됩니다.
