Photoshop CS3에서 평면 애니메이션을 만드는 방법에 대한 일련의 튜토리얼(1): 개요.
애니메이션 형성의 원리는 인간의 눈이 시각 지속성의 특성을 가지고 있다는 것입니다. 소위 시각 지속성이란 물체를 본 후 물체가 빨리 사라지더라도 계속해서 눈에 지속적인 이미지를 남기는 것을 의미합니다. 이는 물체가 상대적으로 밝을 때 특히 그렇습니다. 가장 일반적인 것은 밤에 사진을 촬영할 때 플래시를 사용하는 것입니다. 플래시가 꺼진 지 오래되더라도 후광은 여전히 피사체의 눈에 남아 일정 시간 동안 지속됩니다.
이 기능의 가장 초기 적용은 우리가 초등학교 때 수행했을 것입니다. 교과서의 바닥글에 여러 인물의 움직임을 그린 다음 빠르게 넘겨서 눈에 연속적인 이미지를 만드는 것이었을 것입니다. 애니메이션이다. 여기서 애니메이션은 만화 애니메이션을 의미하지 않는다는 점에 유의해야 한다. 만화 애니메이션의 제작 원리는 동일하지만 일반적으로 여기서 애니메이션은 연속적인 모든 이미지를 의미한다.
요약하자면, 소위 애니메이션은 여러 장의 정지 사진을 사용하여 연속적으로 재생되고 시각의 지속성을 사용하여 연속적인 이미지를 형성하는 것입니다. 예를 들어, 전통적인 영화는 긴 시리즈의 영화를 사용하여 단일 프레임을 연속적으로 기록하고 특정 속도로 순차적으로 조명을 사용하여 화면에 투사합니다. 여기에는 속도 요구 사항이 있습니다. 교과서를 천천히 넘기면 연속 이미지가 아닌 여러 개의 정지 이미지만 경험하게 될 것입니다. 영화를 재생할 때도 마찬가지입니다. 속도가 너무 느리면 관객이 보는 것은 회전하는 슬라이드쇼와 같습니다. 관객이 연속적인 영상을 경험할 수 있도록 영화는 초당 24프레임의 속도로 재생된다. 즉, 1초에 24개의 정지영상이 화면에 연속적으로 투사된다. 애니메이션 재생 속도의 단위는 fps이며, f는 영단어 Frame(picture, 프레임), p는 Per(per), s는 Second(초)를 의미합니다. 중국어에서는 초당 프레임 수, 또는 초당 프레임 수를 의미합니다. 영화는 24fps(종종 24프레임이라고도 함)입니다.
실생활에서 영상을 생성할 수 있는 다른 장치에도 TV 신호와 같은 프레임 레이트라는 개념이 있습니다. 중국과 유럽에서 사용되는 PAL 형식은 25프레임이고, 일본과 미국에서 사용되는 NTSC 형식은 29.97프레임입니다. 애니메이션을 컴퓨터 모니터에서 재생하면 15프레임으로 연속 이미지 효과를 얻을 수 있습니다. 이런 식으로 앞으로 영상을 만들 때는 어떤 기기에 올릴지 고민하고 프레임 속도도 다르게 설정해야 합니다.
인간의 눈과 뇌로 구성된 시각 시스템이 매우 발달되어 있기 때문에 인간의 눈의 인식 정확도는 실제로 위의 프레임 속도보다 훨씬 높습니다. 예를 들어 어두운 환경에서는 밝은 광원의 시각적 지속 시간이 길어지므로 영화에는 24프레임만 필요합니다. 그런데 여담이지만, 어떤 면에서는 인간을 능가하는 눈을 가진 동물은 소수에 불과하지만, 다른 면에서는 모두 심각하게 부족합니다. 예를 들어, "세부 사항의 왕"인 독수리는 색맹인 반면, "야간 투시의 왕"인 올빼미는 눈이 고정되어 있어 주변을 관찰하기 위해 고개를 돌려야 합니다.
우리가 Tianji Design Online에서 본 Photoshop 디자인 튜토리얼에서 Photoshop은 포스터나 인쇄된 원고와 같은 정적인 이미지를 만드는 데 주로 사용된다고 언급했습니다. 이제 Photoshop에서 여러 프레임으로 구성된 애니메이션을 만들어 보겠습니다. 단일 화면을 여러 화면으로 확장합니다. 그리고 이러한 여러 장면 사이에 일종의 이미지 연속성을 만들어 애니메이션에 형태를 부여합니다.
요즘에는 Flash를 사용하여 제작된 많은 애니메이션에 더빙 및 상호 작용 기능이 추가되어 전체 애니메이션을 더욱 생생하게 만들 수 있습니다. 포토샵으로 제작한 애니메이션은 단순한 애니메이션이라고 할 수 밖에 없는데, 주된 이유는 그림만 있고 소리를 추가할 수 없고 관객이 고정된 방식으로만 볼 수 있기 때문입니다. 그러나 단순함이 조잡함을 의미하지는 않습니다. 전자가 더 많은 제작 및 표현 방법을 제공하지만 후자는 여전히 고유한 장점을 가지고 있습니다. 예를 들어 레이어 스타일 애니메이션은 다른 애니메이션 세부 사항으로는 달성하기 어려운 몇 가지 아름다운 것들을 쉽게 만들 수 있습니다. 게다가 종이에 그림을 그리는 것이 아주 간단한 행위이듯이, 그리는 사람마다 그림이 다릅니다. 따라서 뛰어난 애니메이션이 반드시 복잡한 기술을 필요로 하는 것은 아니며, 중요한 것은 뛰어난 창의성입니다.
어떤 소프트웨어이든 생산 원리는 동일합니다. 우리가 열심히 연구한 RGB 색상 모드처럼 모든 곳에 적용할 수 있습니다. 그래서 우리의 현재 과제는 지금까지 배운 포토샵의 기본 지식을 활용하여 이를 애니메이션 제작으로 확장하고, 애니메이션 제작의 일반적인 기술과 방법을 배우는 것입니다. 이 지식은 나중에 다른 측면에도 적용될 수 있습니다. 그리고 포토샵 애니메이션을 동영상으로 변환하고 사운드를 추가하는 방법도 소개하겠습니다.
생산의 차이 외에도 용도의 차이도 있습니다. 애니메이션은 광고 애니메이션과 같이 특정 콘텐츠를 강조하기 위해 웹페이지의 특정 영역에 배치되는 경우가 많습니다. 이러한 종류의 애니메이션은 일반적으로 468x60, 140x60, 90x180 등과 같은 다양한 배치 위치에 따라 해당 고정 크기를 갖습니다. 애니메이션은 휴대폰 MMS(사진, 소리, 동영상을 보낼 수 있는 멀티미디어 문자 메시지 서비스)에도 적용할 수 있습니다. 이러한 용도에는 각각 고유한 특성이 있으며 크기 외에도 고려해야 할 다른 요소가 있습니다. 바이트 수, 프레임 유지 시간 등에 대한 제한 등이 있습니다. 튜토리얼에서 단계별로 설명하겠습니다.
참고: 이 튜토리얼 시리즈를 시작하기 전에 독자는 Photoshop의 기본 사항을 배우고 "곡선 조정 레이어를 만드는 방법"과 같은 조정 레이어, 레이어 스타일 등과 같은 개념과 작업을 이해하고 숙달해야 합니다. on. 동작에 대한 간략한 소개만 하고, 자세한 원리는 설명하지 않습니다. 따라서 새로운 독자들은 먼저 기본 사항을 익히는 것이 좋습니다.
또한, 일반 버전에서는 볼 수 없는 애니메이션 제작 기능은 포토샵 CS3 확장(확장) 버전에서만 가능합니다. CS2 버전에는 액션 생성 기능이 포함되어 있으며 작업은 CS3 Extended와 유사합니다. CS 및 이전 버전에서는 애니메이션 제작을 위해 번들로 제공되는 ImageReady 소프트웨어가 필요합니다. 튜토리얼과 동일한 CS3 Extended 버전을 사용하는 것이 좋습니다.
애니메이션이라고 하니까 화면 속 이미지를 움직이게 한다는 뜻인데, 이제 실제로 "간단하고 투박한" 애니메이션을 그려서 만들어 보겠습니다.
150×150의 새 빈 이미지를 만들고 새 레이어를 만들고 대략 아래 왼쪽과 같이 직사각형을 그리고 오른쪽과 같이 레이어 팔레트를 그립니다. 이를 통해 이는 일반적인 격자 레이어임을 알 수 있습니다. 실제 작업에서는 벡터 레이어를 최대한 많이 사용해야 합니다.
아래 왼쪽 그림과 같이 [Window_Animation]을 통해 애니메이션 팔레트를 엽니다. 이때 아래 오른쪽 그림의 빨간색 화살표로 표시된 것처럼 레이어 팔레트에는 몇 가지 추가 옵션도 있습니다. 애니메이션 팔레트를 닫으면 원래 상태로 복원됩니다. 지금은 걱정하지 마세요. 또한 애니메이션 팔레트는 측정 기록 팔레트와 결합되는 경우가 많습니다. 후자는 현재 콘텐츠와 관련이 없으며 끌 수 있습니다.
애니메이션 팔레트를 연 후 애니메이션 팔레트의 빨간색 화살표에 있는 "선택한 프레임 복사" 버튼을 클릭하여 애니메이션 제작을 시작할 수 있습니다. 
을 클릭하면 새 프레임이 추가된 것을 볼 수 있습니다. 아래 그림과 같습니다. 이전 습관에 따르면 이 아이콘은 새 레이어 등 새로운 아이콘을 나타내야 합니다. 여기서 문자 그대로의 설명은 복사이지만 실제로는 새로운 것이지만 새로 추가된 프레임은 실제로 이전 프레임과 동일합니다. . 같은 내용입니다. 따라서 누구나 상상할 수 있어야 한다. 
버튼의 기능은 프레임을 삭제하는 것입니다.
현재 애니메이션 팔레트에서 복사한 두 번째 프레임이 선택되어 있는지 확인한 후 이동 도구를 사용하여 아래 왼쪽 그림과 같이 대략적으로 레이어의 사각형을 일정 거리만큼 이동합니다. 이때 애니메이션 팔레트는 아래 가운데 그림과 같습니다. 프레임 2에서는 블록의 위치가 변경되었지만 프레임 1에서는 블록의 위치가 변경되지 않은 것을 볼 수 있습니다. 이것은 매우 중요한 기능입니다.
먼저 프레임을 복사한 다음 블록을 여러 번 이동하는 이 작업을 반복하면 마지막으로 오른쪽 아래 그림과 같은 결과가 나옵니다(이와 유사). 이제 7개의 프레임이 있고 블록은 각 프레임에서 서로 다른 위치에 있습니다. "프레임마다 사각형의 위치가 다릅니다"라는 문장에 주목하고 레이어 팔레트를 보면 레이어가 하나만 존재하는 것이 분명합니다 (배경 레이어는 당분간 계산되지 않습니다). 기능: 하나의 레이어에 대해 해당 위치(또는 좌표)를 다른 프레임에서 개별적으로 지정할 수 있습니다. 이 기능에 따르면 단 하나의 레이어를 사용하여 객체의 움직임에 애니메이션을 적용할 수 있습니다.
이제 애니메이션 팔레트에서 재생 버튼을 누를 수 있습니다 
, 이미지 창에서 상자가 움직이는 효과를 볼 수 있지만 매우 빠르게 움직입니다. 프레임 지연 시간이 설정되지 않았기 때문입니다. 이제 애니메이션 팔레트의 각 프레임 아래에 "0초"가 표시됩니다. 이는 프레임 지연 시간(또는 체류 시간)입니다. 프레임 지연 시간은 애니메이션 중에 프레임이 표시되는 시간을 나타냅니다. 예를 들어, 특정 프레임의 지연 시간이 2초로 설정된 경우 해당 프레임이 재생되면 다음 프레임이 계속 재생되기 전에 2초 동안 유지됩니다. 지연의 기본값은 0초이며 지연은 각 프레임마다 독립적으로 설정할 수 있습니다.
프레임 지연을 설정하는 방법은 프레임 아래의 시간을 클릭하고 팝업 목록에서 해당 시간을 선택하는 것입니다. 아래 왼쪽 그림과 같이 프레임 7을 0.5초로 설정합니다. 목록에서 "지연 없음"은 0초입니다. 설정하려는 시간이 없으면 "기타"를 선택하고 값을 직접 입력할 수 있습니다(초 단위). 여러 프레임을 선택한 후 균일하게 지연을 수정할 수도 있습니다. 여러 프레임을 선택하는 방법은 여러 레이어를 선택하는 것과 같습니다. 먼저 애니메이션 팔레트에서 프레임 1을 클릭하여 선택한 다음 Shift 키를 누른 채 프레임 6을 클릭합니다. .프레임 1~6을 선택하세요. 그런 다음 아래 오른쪽 그림과 같이 모든 프레임의 시간대를 0.1초로 설정합니다. 이는 보다 일반적으로 사용되는 지연 시간입니다.
애니메이션을 다시 재생하면 블록이 더 느리게 이동하고 이동이 끝날 때 더 오랜 시간 동안 유지되는 것을 볼 수 있습니다. 분명히 이는 설정된 지연 시간 때문입니다. 이 긴 지연은 실제로 중요한 역할을 하며, 이 기능은 실제 제작에서 특정 주제를 강조하는 데 사용될 수 있습니다. 또한 후속 튜토리얼에서 몇 가지 표현 기법을 소개하는 시간을 갖도록 하겠습니다.
지연 시간 외에도 애니메이션의 또 다른 기능은 재생 루프 수를 설정할 수 있다는 것입니다. 애니메이션 팔레트의 첫 번째 프레임 아래에는 루프 수인 "영원히"가 있습니다. 클릭한 후 "한 번" 또는 "영원히"를 선택하거나 주기 수를 직접 설정할 수 있습니다. 그런 다음 애니메이션을 다시 재생하여 루프 번호 설정의 효과를 확인하세요.
대부분의 경우 애니메이션은 지속적으로(즉, 영원히) 반복되지만, 주로 애니메이션을 사용하여 웹 구성 요소를 만들 때 한 번 또는 몇 번(2~3회) 반복되는 경우도 있습니다. 예를 들어, 열 이름이 처음부터 점차적으로 나타나도록 애니메이션을 적용하면 이름이 완전히 표시되면 고정되어야 하며 다시 사라졌다가 다시 페이드 인될 수 없습니다. 이때 '1회' 주기 설정을 사용해야 합니다.
〖CTRL+S〗[파일>저장]을 눌러 애니메이션 설정을 저장하며 파일형식은 psd입니다. 이 파일 형식은 Photoshop의 독점 파일이며 모든 관련 정보를 기록할 수 있습니다. 향후 수정을 용이하게 하려면 모든 사람이 이 형식으로 작업을 저장하는 것이 좋습니다. 웹페이지에서 사용할 수 있는 독립된 애니메이션 파일이 필요한 경우 [CTRL+ALT+SHIFT+S] [파일>웹 및 디바이스용으로 저장]을 이용하시면 아래 왼쪽과 같이 큰 창이 나타납니다. . 이 큰 창에는 다루어야 할 것이 많습니다. 하지만 이제는 빨간색 화살표 부분의 설정만 참고하시면 됩니다.
동시에 창 오른쪽 하단의 녹색 화살표 영역에 재생 버튼과 반복 옵션이 나타납니다. 여기에서 반복 횟수를 변경하면 소스 파일의 설정도 변경됩니다. 빨간색 화살표 영역 내에서 GIF를 선택하지 않으면 재생 버튼을 사용할 수 없습니다. GIF 형식만 애니메이션을 지원하기 때문입니다. JPG나 PNG 등 다른 형식으로 강제로 저장하면 생성된 이미지에는 첫 번째 프레임만 포함됩니다.
저장 과정에서 아래 오른쪽과 같은 경고 메시지가 나타날 수 있으니 무시하지 마시고 확인하시기 바랍니다. 다시 보이지 않게 할 수도 있습니다. 그러나 파일 이름을 정할 때 반각 영문이나 숫자를 사용하는 것에 주의해야 하며, 전각 문자나 한자를 사용하지 마십시오. 이는 다양한 언어의 브라우저와 더욱 광범위하게 호환되기 위한 것입니다.
이 장에서 모두가 숙지해야 할 것은 애니메이션의 두 가지 속성, 즉 프레임 지연 시간과 루프 수입니다. 또한 "프레임 복사 및 레이어 이동"과 같은 간단한 개체 변위 애니메이션을 만드는 방법을 마스터해야 합니다. 그리고 이 방법을 사용하여 두 개체를 동시에 변위하는 애니메이션을 만들 수 있습니다. 효과는 아래 사진과 비슷합니다.
다음 섹션에서는 두 번째 부분 인 첫 번째 프레임의 전파 특성을 소개합니다.