<서론> 포토샵을 이용하여 움직이는 그림을 만드는 방법을 설명합니다. 사용되는 포토샵은 7.0을 기준으로 합니다.

움직이는 그림의 기본원리는 각기 다른 이미지를 레이어에 배치한 후 순차적으로 레이어를 바꾸어 보여 주어 움직이는 것처럼 보이는 것이라는 것은 다 아시겠지요?

이미지를 레이어에 배치하는 방법은 포토샵을 이용하는 경우와 이미지레디를 이용하는 경우로 나눌 수 있습니다.

설명의 순서는
<첫 번째> 일반적으로 사용하는 방법인 포토샵에서 작업 후 이미지레디로 가서 작업하는 방법 중 이미지레디로 가기 까지를 설명합니다.
<두 번째> 포토샵을 이용하지 않고 이미지레디에서 바로 파일 불러오기
<세 번째> 첫 번째, 두 번째에서 불러온 파일로 애니메이션 만들기
<네 번째> 투윈 효과로 부드러운 전환 만들기
<다섯 번째> 하나의 이미지로 움직이는 사진 만들기

1. <첫 번째> 포토샵에서 작업 후 이미지레디로 가기

포토샵을 실행 후 움직이는 그림에 사용할 이미지를 불러옵니다. 여기서는 ABC라는 글자 이미지를 가지고 설명합니다.

(1) File - Open에서 사용할 이미지를 불러옵니다.

(2) 그러면 아래 그림과 같이 이미지 3개가 포토샵에 나타납니다.

(3) 이 3개의 이미지를 하나의 이미지에 각기 다른 레이어로 배치하여야 합니다. 우선 B 이미지를 선택한 후 Ctrl + A하여 전체를 선택한 후 Ctrl + C하여 클립보드에 복사합니다.(클립보드는 컴퓨터의 임시 저장장소로 여러분께 보이지는 않습니다.)

(4) 다음 다시 A 이미지를 선택한 후 Ctrl + V하여 클립보드에 저장된 B 이미지를 붙여 넣습니다. 그러면 이 B 이미지는 A 이미지에 새로운 레이어로 생성됩니다. 그리고 화면상에는 B 레이어가 위에 있어 아래 있는 A 이미지는 보이지 않습니다. 레이어 팔레트를 보면 확인할 수 있습니다.

(5) 이제 C 이미지를 선택한 후 다시 Ctrl + A하여 전체를 선택한 후 Ctrl + C하여 클립보드에 복사합니다.

(6) 다시 A 이미지로 가서 Ctrl + V하여 클립보드의 C 이미지를 복사해 넣습니다. 레이어 팔레트를 보면 이미지가 어떻게 배치되어 있는 지를 확인할 수 있습니다.

(7) 이제 도구상자의 Jump To ImageReady를 눌러 이미지레디로 갑니다.

(8) 그러면 이미지레디가 실행되며 포토샵의 이미지가 자동으로 이미지레디로 연결됩니다. 여기서 주의하여야 할 부분이 우측 상단에 보이는 Optimize 팔레트입니다. 여기서 Setting 값을 빨간 사각형 부분에 GIF로 설정하여야 합니다. 그렇지 않을 경우 움직이는 이미지는 만들어 지지 않습니다.
아울러 그 아래 Colors는 이미지의 품질을 좌우하는데 최고값이 256입니다. 물론 이 경우 이미지의 크기는 커집니다. 이 값을 낮추면 해상도는 떨어지는 대신 이미지의 용량은 작아집니다.

(9) 그리고 위의 그림에서 Animation 팔레트가 열려 있는 것을 볼 수 있습니다.(만일 이 팔레트가 보이지 않으면 Window 메뉴에서 Animation을 체크하면 보입니다.

2. <두 번째> 이미지레디에서 바로 이미지 불러오기

(1) 이미지레디를 이용해 애니메이션을 만들 파일들을 하나의 폴더에 모아둡니다. 그리고 파일들의 이름을 이름 바꾸기를 이용해 이미지레디에서 사용할 순서로 바꾸어 둡니다.
예를 들면 01xxx.jpg  02xxx.jpg, 03xxx.jpg

(2) 이제 이미지레디를 실행하고 File - Import -Folder as Frames를 선택하고 폴더 찾아보기가 나오면 이미지를 모아놓은 폴더를 선택하면 순서대로 프레임에 정렬되어 나타납니다.

(3) 이미지레디에 자동으로 정렬된 모습입니다.

3. <세 번째> 첫 번째, 두 번째에서 불러온 파일로 애니메이션 만들기

(1) 레이어 팔레트에서 위에 있는 레이어의 눈 아이콘을 끄고 A레이어의 눈 아이콘만 살려 두면 애니메이션 팔레트 첫 프레임에 A이미지가 보입니다.

(2) 다음  Animation Palette의 하단에 있는 Duplicates Current Frame(그림에서 빨간 사각형부분)을 눌러 Frame을 추가합니다.
☞ 첫 번째 Frame을 복제한 Frame이 생성됩니다.

(3) 2 Frame을 선택하고 Layer Palette에서 2 Frame에 들어갈 Layer만 선택하여 눈 아이콘을 켜고 나머지 layer의 눈 아이콘은 닫습니다. 그러면 두 번째 프레임에 B 이미지가 자리합니다.

(4) 같은 방법으로 세 번째 프레임에 C 이미지를 배치합니다.

(5) 첫 프레임을 클릭 후 Shift키를 누르고 마지막 프레임을 누르면 모든 프레임이 선택됩니다. 그리고 시간이 표시된 부분을 클릭하면 시간을 설정하는 메뉴가 나옵니다. 첫 번째 프레임을 보여 주고 얼마의 시간이 경과 후 두 번째 프레임을 보여 줄 것인가를 결정하는 것입니다.

(6) 설정이 완료되면 플레이 단추를 눌러 애니메이션이 실행되는 가를 확인합니다.

(7) 문제없이 실행되면 꼭 Save Optimized를 이용해 GIF파일로 저장합니다.(만일 Save나 Save As를 사용하여 저장할 경우 애니메이션 기능으로 저장되지 않습니다.)

4. <네 번째> 투윈 효과로 부드러운 전환 만들기

(1) 한 프레임에서 다름 프레임으로 전환될 때 투윈 효과를 이용하면 스스르 변하는 것과 같은 효과를 줄 수 있습니다.

(2) 투윈 효과를 줄 두개의 프레임을 선택합니다. 여기서는 A프레임과 B프레임을 선택했습니다. 그리고 아래 빨간 표시가 된 Tweens animation frames 단추를 누릅니다.

(3) 그러면 아래와 같은 창이 열립니다. 여기서 첫 프레임에서 두 번째 프레임으로 전환 할 때 몇 단계를 거칠 것인가를 지정합니다. 여기서는 5단계로 설정했습니다.

(4) 그러면 A와 B 사이에 점차적으로 A에서 B로 변하는 5개의 프레임이 추가됩니다.

5. <다섯 번째> 하나의 이미지로 움직이는 사진 만들기

(1) 이미지레디를 실행합니다.

(2) 사용하고자하는 이미지를 불러옵니다.(여기서는 여자사진)

(3) 다시 File- new를 하면 나오는 대화 상자에서 애니메이션으로 보여줄 크기를 설정합니다. - (이 창을 작업창이라고 하고 설명합니다. - 여자 사진보다 작아야 여자사진을 부분적으로 보여줄 수 있습니다.)

(4) 여자사진에서 Ctrl  + A하여 전체를 범위로 설정하고  Ctrl + C하여 복사해 둡니다.

(5) 다시 작업창으로 가서 Ctrl + V하여 복사한 이미지를 붙여 넣습니다.
 - (작업창이 원래 이미지보다 작기 때문에 이미지의 일부분만 보입니다.)

(6) 이동 도구를 선택해 이미지를 드래그 하여 처음 프레임에 보여주고 싶은 부분이 나타나게 합니다.(아래 애니메이션 팔레트에 보여줄 부분이 나타납니다.)

(7) 첫 프레임에 원하는 부분이 나타났으면 프레임 추가 아이콘을 눌러 두 번째 프레임을 생성합니다. -첫 번째 프레임이 그대로 복사됩니다. 여기서 다시 이동도구로 두 번째 보여줄 부분이 보이게 조정합니다.

(8) 다시 프레임 추가 아이콘을 눌러 세 번째 프레임을 생성합니다.  - 두 번째 프레임이 그대로 복사됩니다. 여기서 다시 이동도구로 세 번째 보여줄 부분이 보이게 조정합니다.

(9) 계속 이런 식으로 보여줄 프레임을 추가한 후 원하는 프레임이 완성되면 시간을 조정하면 됩니다.