포토샵으로 움직이는 gif 이미지 만들기

포토샵으로 움직이는 gif 이미지 만들기

포토샵으로 움직이는 gif 이미지를 만드는 방법을 알아봅시다.

공이 굴러가는 애니메이션을 만들기 위해 도형툴로 공을 만들었습니다.

만든 도형레이어를 클릭하시고 Ctrl+J를 누르시면 레이어가 똑같이 복사가 됩니다.

복사된 레이어를 Shift + →(방향키)를 눌러서 오른쪽으로 한 칸 이동하시고, Ctrl+T를 눌러서 방향을 살짝 기울여 주세요.

이 순서대로 하얀색 원이 한 바퀴 돌 때까지 레이어를 만들고 이동하는 작업을 반복해 줍니다. 작업량에 따라서 노가다가 될 수도 있는 상황입니다. -_-;; 저는 25개의 레이어를 만들었습니다.

애니메이션을 주기 위해 Window > Timeline 을 클릭하세요.

하단에 타임라인 패널이 뜹니다. 거기서 Create Frame Animation을 클릭하세요.

타임라인에서 빨간색 부분을 클릭하시면 레이어가 복사가 됩니다. 만든 이미지의 갯수에 따라서 레이어를 만들어 주세요. 저는 25개를 만들었기 때문에 25개를 복사하겠습니다.

그리고타임라인과 오른쪽 레이어의 이미지를 순서에 맞게 맞춰주세요. 타임라인 레이어를 누르신 다음 오른쪽 레이어에서 나머지 눈을 다 끄고 하나만 켜 놓으시면 됩니다.

타임라인에 25개의 이미지가 순서대로 나열되었습니다. 

타임라인 레이어 밑에 보시면 지연시간을 설정할 수 있는 버튼이 있습니다. 이미지가 천천히 움직이거나 빨리 움직이기를 원하시면 여기서 설정하시면 됩니다. 전체를 선택하고 일괄적으로 시간을 바꿀 수도 있습니다.

타임라인 패널 하단에 보시면 프레임루프 버튼이 있습니다. 재생을 한 번할 것인지, 3번 할 것인지, 혹은 계속돌릴 것인지를 설정하는 버튼입니다. Other를 눌러 원하시는 횟수를 적으실 수 있습니다.

참고로 이 버튼은 프레임을 늘려주는 기능을 합니다. 이전 프레임과 다음 프레임 사이에 중간 프레임을 집어 넣어서 자연스럽게 이미지가 움직이는 게 도와줍니다. 지금 작업과는 안 맞아서 쓰지는 않았습니다.

설정이 다 되셨으면 빨간색 재생버튼을 눌러 제대로 움직이는 지 확인해 보세요. 혹시나 움직임이 끊긴다면 해당 레이어를 찾아서 수정하시면 됩니다. 제대로 움직이는 것이 확인되셨으면 저장을 해 봅시다.

File > Export > Save for Web을 클릭합니다. 단축키 Alt+Shift+Ctrl+S를 누르셔도 됩니다.

저장하실 때 꼭 GIF로 저장을 하셔야 움직이는 애니메이션 파일이 됩니다.

완성된 공입니다. 간단한 애니메이션이나 아이콘 등은 쉽게 작업이 가능하니 한 번 만들어 보세요. 카톡 이모티콘들도 이런식으로 작업합니다. 참고로 만든 gif파일은 포토샵으로 불러와서 다시 작업하실 수도 있습니다.