포토샵 사용하여 많은 작업을 하는데 그 작업 중에는 배너 만들기 작업도 매우 많이 하는 편이며 배너 중에서도 움직이는 배너 같은 경우는 웹페이지에서 사람들의 시신을 끌기에 매우 좋은 배너입니다.

하지만 그렇게 많이 사용하는 편은 아닌데 암튼 이렇게 움직이는 배너 만들기 위해서는 포토샵 애니메이션 기능을 사용해야 합니다.

또한 포토샵 애니메이션 기능은 gif 사진 파일에서만 사용이 가능하고 저장 하는 방법이 따로 있으니 애니메이션 저장 방법에 대해서도 알아볼것이며 기본적으로 애니메이션 기본 개념 알아보고 이후에 애니메이션 응용하는법 이렇게 나눠서 진행 하겠습니다.

이번시간에는 포토샵 애니메이션 만들기 방법 그리고 gif 배너만들기 방법 및 저장 방법 알아볼것이고 쉽게 설명할것이니 금방 할수 있을 거라 생각합니다.


포토샵 cs6 실행을 시키고 일단은 애니메이션 기본 개념에 대해 알아보겠습니다.

위와 같이 적당하게 글씨 입력을 하는데 꼭 글씨가 아니어도 상관없습니다.


그리고 상단에 윈도우 그리고 애니메이션 선택합니다.


그러면 위와 같이 애니메이션 창이 뜨는것을 확인 할수 있으며 현재 1프레임이 기본 생성된것을 알수 있습니다.


그리고 하단에 오른쪽에서 2번째 프레임 복사 버튼 클릭하면 위와 같이 이전에 프레임이 복사 되는것을 알수 있습니다.


그리고 각각에 프레임을 0.2초로 설정합니다

이 시간은 프레임당 보여지는 시간을 의미합니다.


위와 같이 프레임 마다 0.2초씩 설정이 되었고 2번째 프레임에서 오페스티 값을 변경 해 보겠습니다.

오페시티는 투명도를 의미합니다.


위와 같이 투명도 값을 0 주어서 2프레임에 글씨가 사라지도록 했습니다.

보면 1프레임에 글씨는 영향을 받지 않았습니다.

이상태에서 재생 버튼 클릭하면 글씨가 0.2초씩 나타났다 사라졌다 하는것을 알수 있습니다.


여기까지 포토샵 애니메이션 기본 개념은 파악 했습니다.

이제 애니메이션 응용편입니다.


위와 같이 네이버 검색창 사진을 하나 가져 왔습니다.


프레임을 하나 복사를 하고 거기에 위와 같이 글씨 입력합니다.


그리고 프레임을 하나더 복사를 하여 3번 프레임에 손가락 커서 모양 넣어줍니다.


손가락 커서 모양을 선택하고 컨트롤 + T 눌러서 사이즈를 작게 해주고 위치고 검색 버튼 위에 위치 합니다.

그리고 보면 새로 가져온 이미지라서 1,2,3번 프레임에 모두 손가락 커서가 있습니다.

1번 2번 프렘에는 손가락 커서 없애줍니다.


위와 같이 1번 2번 프레임에 손가락 커서가 사라지도록 레이어에서 않보도록 합니다.


그리고 3번 프레임에는 손가락 커서가 보이도로 설정을 하고 하단에 재생 버튼 선택하여 어떻게 나오는지 확인합니다.


위와 같이 1,2,3번 프레임이 하나씩 보이면서 타노스의 IT 검색을 하는 모습을 보여주고 있습니다.

그런데 프레임 시간이 조금 느린듯한 느낌을 받을수 있는데 조금더 빠르게 움직이도록 설정 하겠습니다.


아까는 프레임 시간이 1초로 설정 되어 있었으며 0.5초로 프레임 시간을 변경합니다.

그리고 하단에 재생 버튼 클릭하여 재생을 시켜 보고 마음에 든다면 이제 포토샵 애니메이션 저장 해야 합니다.


포토샵 애니메이션 저장 방법은 파일 그리고 save for web 선택 해야 합니다.

애니메이션 저장 단축키 같은 경우는 alt + shift + ctrl + s 키를 동시에 눌러야 합니다.


그러면 위와 같은 save for web 창이 뜨면서 조금 특별하게 저장을 할수 있는 창이 뜹니다.

여기서 gif 128 선택을 하고 하단에 세이브 선택


프레임을 0.5초 설정한 포토샵 애니메이션 결과물이 나왔습니다.

이정도 속도감에 필자는 만족하며 최대한 간단하게 설명을 햇으며 쉽게 따라할수 있을거라 생각합니다.

여기까지 포토샵 gif 애니메이션 만들기 방법 그리고 애니메이션 저장 방법에 대해 알아보았으며 오늘도 좋은 하루 되시기 바랍니다.


  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기