포 토 샵

움직이는 gif

수정천 2008. 2. 21. 14:17
  인터넷을 돌아다니다 보면 움직이는 배너나 GIF이미지를 많이 볼 수 있습니다. 플래쉬를 이용한 것도 있지만 포토샵과 연동된 프로그램인 'Image Ready'를 사용하면 간단한 레이어 조작만으로도 움직이는 이미지를 간단히 만들 수 있습니다.

  이번 강좌에서는 Image Ready를 이용한 움직이는 이미지를 만들어 보겠습니다.
 


<1번촬영>


<2번촬영>


<3번촬영>


<4번촬영>


<5번촬영>

  다음과 같이 여러장의 연속적인 사진을 준비합니다.


<Adobe Photoshop의 'Open'화면>

  Adobe Photoshop에서 연속적인 사진을 한번에 열어줍니다.


<레이어 팔레트의 모습>

  이렇게 열어준 이미지들을 순서대로 '이동 툴'을 이용해 하나의 파일에 모두 옮겨 옵니다.

  옮겨온 레이어를 '툴 박스'의 점프버튼(단축키 : Ctrl+Alt+M)을 눌러 이미지레디(Image ready)로 가져 갑니다.

  이미지레디는 '에니메이션 팔레트' 등의 몇가지만 제외하면 포토샵과 동일한 '툴박스'와 '레이어팔레트' 메뉴를 가지고 있습니다.


<이미지레디의 '레이어 팔레트'>


<에니메이션 팔레트>

  포토샵에서 가져온 이미지를 차례대로 열어줍니다. 이때 주의할 것은 애니메이션 팔레트에서 Duplicates 버튼을 눌러 새로운 프레임을 추가하면서 아래의 보기와 같이 애니메이션에서 보여줄 레이어만 선택하여야 합니다.

  애니메이션 팔레트에서 프레임 추가를 선택한 후 그곳에서 보여지는 이미지를 레이어 팔레트를 통해 보여줄 것인가 안보여줄 것인가를 선택합니다. (눈 아이콘을 켜느냐 끄느냐에 따라 이미지가 보이거나 안보이게 결정할 수 있습니다.)

  위와 같은 애니메이션 팔레트에서 프레임 추가과정의 동일한 작업 다음과 같이 반복 합니다.

  애니메이션 팔레트의 0 sec 옆에있는 조그마한 화살표를 눌러 한 프레임이 보여질 시간을 선택합니다.(프레임 재생속도를 조절할 수 있는 메뉴가 나옵니다. No delay를 선택하면 속도를 조절하지 않고 원래 속도대로 재생됩니다.)
나머지 프레임에도 각각 속도(보여질 시간)를 설정합니다.

  또한 애니메이션 팔레트에 있는 'Forever 버튼'을 통해 에니메이션 재생횟수를 지정합니다. (Once : 1회만 재생합니다. Forever : 무한 대로 반복하여 재생합니다. Other... : 재생횟수를 임의로 설정합니다.)

  File 메뉴의 > Save Optimized (Ctrl+Alt+S)를 눌러 GIF 이미지를 저장합니다.(Save. Save As를 선택하면 이미지를 GIF로 저장할 수 없어 움직이는 이미지를 만들어 주지 못합니다.)


<위의 과정으로 완성한 GIF 이미지>

  하지만 이것만으로는 뭔가 어색하고 끊기는 느낌이 강하여 좀더 부드러운 이미지를 원하시면,

  에니메이션 팔레트의 각각 프레임에 'Tween' 버튼을 눌러 프레임제작을 합니다.

  -Layers : All Layers를 선택하면 전체 레이어에 작업이 적용됩니다. Selected Layer를 선택하면 아이콘이 켜진 레이어에만 작업이 적용됩니다.

  -Parameters : 제작될 애니메이션의 효과방식을 선택합니다. (Position : 레이어가 이동되는 애니메이션 보여줍니다. Opacity : 레이어의 투명도가 변하는 애니매이션을 보여줍니다. Effects : 스타일이 적용된 경우 효과가 변하는 애니메이션을 보여줍니다.)

  -Tween With : 자동으로 제작될 프레임이 어느위치에 삽입되는 지 선택합니다.(Selection : 선택한 두프레임 사이에 삽입, Next Frame : 선택한 프레임 앞에 삽입, Previous Frame : 선택한 프레임 뒤에 삽입)

  -Frames to Add : 중간에 넣을 애니메이션 프레임의 수를 결정합니다.

  다음과 같은 설정을 하고 'OK'버튼을 누르면 다음과 같은 과정이 나타납니다.

  이렇게 만들어진 이미지를 다시 File 메뉴의 > Save Optimized (Ctrl+Alt+S)를 눌러 GIF 이미지를 저장합니다.


<완성된 부드럽게 움직이는 GIF 이미지>

  이번 강좌에서는 레이어를 이용한 간단한 움직임이 있는 이미지를 제작하였습니다. 이외에도 많은 이미지의 제작방법이 있습니다. 하지만 어떤 프로그램이든지 처음부터 많은걸 익혀 나간다면 각 기능들의 의미를 알아가기 힘들 것입니다. 이미지레디의 기본적인 기능을 차근차근 익혀 나간다면 훌륭한 웹이미지를 제작할 수 있습니다. 다음강좌에서는 이미지레디를 사용하는 좀더 구체적인 방법에 대해서 알아보도록 하겠습니다.

'포 토 샵' 카테고리의 다른 글

형광색  (0) 2008.03.22
자료모음  (0) 2008.02.21
종이말림효과(펌))  (0) 2008.02.21
GIF 애니메이션(펌)  (0) 2008.02.21
신기한 사진 퍼즐 맞추기(펌)  (0) 2008.02.21