포토샵으로 움직이는 배너 광고 만들기 기초 (gif)

네이버든 카카오톡이든 우리가 폰이나 PC에서 접하는 모든 움직이는 배너 광고는 gif 형식입니다. 그리고 이 gif는 주로 포토샵으로 만들어지는데요. 오늘은 이 배너 광고 제작의 기초를 초보자분들도 쉽게 따라할 수 있도록 세세하게 알려드리겠습니다.

일단 움직이는 GIF를 만들기 위해선 새로운 창 하나를 띄워야 합니다. 가장 위 쪽 메뉴에서 '창'을 찾은 뒤 세부 메뉴에 보시면 '타임라인'이라는 것이 있습니다. 이것을 눌러주세요.

누르시면 화면 하단에 새로운 창 공간에 '프레임 애니메이션 만들기'라는 내용의 선택지가 뜰것입니다. 누르시면 위 사진처럼 타임라인이라는 창에 작은 정사각형 박스가 생깁니다.

이 상태에서 자신이 구상한 첫 화면을 만들어줍니다. 저는 손가락 모양이 왼쪽에서 오른쪽으로 움직이는 애니메이션을 만들어보겠습니다. 그럴려면 일단 가장 첫 화면은 해당 이미지가 왼쪽에 위치해야겠죠?

그리고 바로 다음은 이미지가 오른쪽으로 이동했을 때의 최종 장면을 만들어주어야 합니다. 이때는 아예 다른 새로운 시공간(?)을 만들어주어야 하는데요. 사진에서처럼 하단에 '레이어 새창' 만들때와 같이 비슷하게 생긴 아이콘이 있습니다. 얘를 눌러주세요. 그럼 새로운 타임라인(프레임)이 생성된답니다.

그럼 숫자 2라고 적힌 타임라인이 선택되어져 있는 상태에서 아까 손가락 모양의 이미지를 원하는 최종 위치로 옮겨줍니다. 그러면 1번 타임라인과는 다르게 이동된 모습의 타임라인이 2번 썸네일에 보여질 것입니다.  

이제 이들에게 움직임을 주어야 합니다. 1번과 2번의 타임라인을 모두 선택합니다. 그리고 하단에 공이 날아가는 듯한 모양을 표현한 아이콘이 있는데요. 이것을 '트윈'이라고 부른답니다. 얘를 클릭해줍니다.

※ 포토샵 '선택' 팁

Shift를 누른채 선택 : 1번에서부터 X번 사이의 모든 레이어 혹은 프레임이 선택.

Ctrl를 누른채 선택 : 해당 레이어 혹은 프레임만을 같이 선택.

그럼 다음과 같은 창이 뜹니다. 여기서 중요한 것은 '추가할 프레임'이라는 부분. 이것은 1번과 2번 사이에 얼마나 많은 구분 동작을 넣어줄 것인가를 조정하는 부분입니다. 저는 보통의 웹배너 크기 기준 '8'을 넣어 제작합니다. 그럼 이제 1번과 2번 사이에 8개의 프레임 창이 더 생성됩니다.

해당 이미지가 왼쪽에서 오른쪽으로 이동하는데 8개의 구분동작이 프레임(타임라인)으로 만들어졌습니다. 참고로 이것의 갯수가 늘어날수록 구분 동작은 부드럽지만 이동 속도는 느려집니다. 반대로 개수가 줄어들수록 끊기지만 이동 속도는 빨라집니다. 

아래 쪽의 '▶' 아이콘을 눌러보시면 미리 gif 애니메이션을 재생해볼 수 있습니다.

이제 이렇게 만들어진 애니메이션을 웹에 올릴 수 있는 gif로 저장하는 방법입니다. 위 사진처럼 '파일' 부분을 누르고 '웹용으로 저장'을 선택합니다.

여기서 꼭 확인하실 것은 바로 루핑 옵션입니다. 보통의 GIF 배너 광고들은 1회로 끝나지 않고 무한히 반복됩니다. 이 루틴을 정하는 것이 바로 애니메이션 루핑 옵션입니다. 이것이 '계속'으로 되어있는지 꼭 확인하시고 저장을 해주시기 바랍니다.

이것이 만들어진 최종본입니다. ^^ 끝으로 저장시에는 파일명을 '영어'로 해주셔야 어떤 환경에서든 오류가 없답니다. 그럼 다음에는 활용편으로 돌아오겠습니다. 감사합니다.