이제 우리는 애니메이션을 만드는 많은 방법을 배웠지만 애니메이션의 최종 형태에 대해서는 아직 명확하지 않습니다. 애니메이션을 출력하는 방법은 무엇입니까? 어디에 사용되나요? 사용 중 주의할 점은 무엇인가요? 이번 강의에서는 이러한 문제에 대해 자세히 설명하겠습니다.
현재 Windows 시스템의 주요 애니메이션 이미지 형식은 웹 페이지에 직접 표시할 수도 있는 GIF입니다. 이는 현재 가장 널리 사용되는 애니메이션 이미지 형식입니다. 현재 인기 있는 휴대폰 MMS 메시지에 애니메이션을 포함하는 것도 GIF 형식에 속합니다. GIF 형식은 스틸과 애니메이션 표현을 모두 지원합니다. 스틸이든 애니메이션이든 특성은 동일합니다.
GIF 형식 애니메이션의 구현 원리는 여러 장의 정지 사진(프레임)을 결합하여 차례로 표시하는 것으로 이해하면 됩니다. 또한 이러한 그림(프레임) 사이에는 선택된 경로의 작업, 즉 더하기, 빼기 및 제거와 유사한 작동 관계가 있습니다. 이는 애니메이션의 바이트 수를 최적화하기 위한 것입니다.
특정 프레임이 추가되면 이전 프레임은 유지되고 이 프레임의 내용이 추가되어 새 그림이 형성됩니다. 예를 들어 아래 그림과 같이 일반적인 진행률 표시줄 애니메이션이 대표적인 예입니다. 진행률 표시줄이 3개의 프레임으로 구성되어 있다고 가정하면 이론적 프레임 형태로 볼 때 가장 짧은 프레임과 중간 정도의 프레임이 저장되는 것으로 보입니다. 이 3개 프레임에는 각각 가장 긴 진행률 표시줄의 이미지가 표시됩니다. 그러나 실제로 두 번째 프레임에는 첫 번째 프레임에 없는 픽셀만 포함되어 있으며 추가 방식으로 첫 번째 프레임에 작용하여 "1+2" 이미지를 형성합니다. 프레임 3에서도 마찬가지입니다. 이 최적화는 이미지 바이트 수를 효과적으로 줄입니다.
빼기 방법은 정반대입니다. 이는 이미지의 이전 프레임에서 특정 픽셀을 지웁니다. 이는 "역방향 진행률 표시줄"로 이해할 수 있습니다. 제거 방법은 이전 프레임을 완전히 지우는 것입니다. 이는 이전과 이후의 두 프레임 사이에 상관 관계가 없을 때 주로 사용됩니다. 예를 들어 모두 빨간색에서 모두 녹색으로 변경되는 경우, 서로 동일한 픽셀이 없는 경우입니다. 이전 및 다음 프레임에서는 제거 방법이 사용됩니다.
실제 제작 과정에서 Photoshop은 수동 개입 없이 이미지 상황에 따라 어떤 방법을 채택할지 자동으로 결정합니다. 이러한 계산 방법을 지식으로 이해하는 것으로 충분합니다. 애니메이션을 구상할 때 참고자료로도 활용하실 수 있습니다.
이제 색상 수에 대한 제한인 GIF 형식의 다음과 같은 중요한 기능에 대해 이야기하겠습니다. GIF는 최대 256가지 색상만 지원할 수 있습니다 . 즉, GIF 이미지는 최대 256가지 색상만 가질 수 있습니다. 이는 특히 정적 GIF에서 더욱 두드러집니다. 여러 색상의 그라데이션과 같이 색상이 풍부한 일부 이미지는 GIF에서 완벽하게 표현하기 어렵습니다. 아래 왼쪽 그림과 같이 사진의 일부(완전한 그림이 아닌 부분임을 주의하세요)는 디더링과 확산 디더링이 적용되지 않은 PNG24-bit, GIF256의 이미지입니다. 전체 사진은 아래 오른쪽과 같이 베니스에서 찍은 매장 쇼윈도 입니다.
PNG24비트가 색상이 가장 좋고 원본 이미지로 간주할 수 있음을 확실히 알 수 있습니다. GIF 형식은 색상 표현이 좋지 않습니다. 디더링을 사용하지 않으면 원본 이미지의 색상 전환과 함께 일부 영역에 색상 반점이 나타납니다. 확산 디더링을 하면 얼룩이 다소 밝아지지만 입자가 더 무거워지는 것은 디더링 자체의 원리 때문입니다. 디더링의 개념은 기본 튜토리얼에서 소개되었습니다.
256색은 전체 이미지를 나타냅니다. 원본 이미지 전체가 아래와 같은 크기라면 256색상과 원본 이미지의 차이는 그리 크지 않습니다. 색상을 256색으로 줄이면 Photoshop에서는 원본 이미지의 색상에 따라 색상을 배열하기 때문에 이 프로세스를 유사한 색상을 하나로 그룹화하는 것을 인덱싱이라고도 합니다.
원본 이미지의 색상에 여러 색상이 포함된 경우 256개 색상의 평균을 계산하면 단일 색상에 할당되는 수는 매우 작습니다. 반대로 원본 이미지의 색상이 기본적으로 같거나 비슷하다면 256색도 잘 표현할 수 있습니다. 이전 256 논이미테이션 컬러에서는 얼룩이 뚜렷하게 보였던 것이 지금은 얼룩이 덜 눈에 띄는 이유입니다. 전자의 원본 이미지에는 더 많은 색상이 포함되어 있으므로 파란색, 빨간색 등에 일부 색상이 할당되고 노란색 단계에는 더 적은 색상이 할당됩니다. 후자의 원본 이미지에는 기본적으로 노란색 위상만 있으므로 다른 색상에 색상을 할당할 필요가 없습니다.
아래 사진은 피아첸카에서 찍은 스트리트뷰 사진입니다. 아래 사각형은 색상표이며, 색상 블록은 사용된 256가지 색상을 나타냅니다. 원본 이미지의 색상 구성이 색상 지수에 미치는 영향은 색상표에서 쉽게 확인할 수 있습니다. 왼쪽 사진에는 색상이 더 많기 때문에 256개 색상 중 하늘에 할당된 파란색 위상의 수가 적고 이미지의 하늘에 뚜렷한 색상 반점이 있습니다. 오른쪽 사진은 기본적으로 하늘 부분만 포함되어 있기 때문에 256색의 대부분이 파란색 위상에 할당되어 이미지의 하늘이 더 잘 표현됩니다.
[파일>웹 및 장치용으로 저장] [CTRL+SHIFT+ALT+S]를 누르면 설정 저장 상자가 나타납니다. 이는 특히 앞으로 배우게 될 웹 디자인 확장 튜토리얼에서 가장 일반적으로 사용되는 출력 기능입니다.
설정 인터페이스에 들어간 후 "최적화" 탭에서 확인해야 하는 것은 출력 후의 실제 효과, 즉 브라우저 또는 이미지 보기 소프트웨어의 효과입니다. "원본" 탭은 Photoshop의 효과이므로 참조 표준으로 사용할 수 없습니다.
녹색 화살표는 해당 설정 영역으로, 이미지 형식을 GIF로 설정하고 색상 수를 256으로 설정하고 디더링 옵션을 끕니다. 해당 설정은 위 그림의 왼쪽 효과에 해당합니다.
파란색 화살표의 바이트 수 표시에 주의하세요. 이는 이 숫자를 가능한 한 작게 만들어야 할 때마다 매우 중요한 표시입니다. 그렇지 않으면 이미지나 애니메이션을 효과적으로 사용할 수 없습니다.
바이트 수를 더 작게 만들려면 색상 수를 줄여야 하며 이에 따라 색상표의 색상 블록 수가 줄어듭니다. 하지만 색상이 너무 적으면 이미지 품질에 큰 영향을 미치고 쉽게 색 반점이 생길 수 있다는 점은 분명합니다. 디더링을 켜면 색상 반점이 줄어들 수 있지만 바이트 수도 늘어납니다. 바이트 수와 품질 사이의 시소와 같습니다. 둘 다 가질 수는 없습니다. 인터넷을 통해 전송될 이미지의 경우 대부분의 방문자는 웹 페이지가 표시될 때까지 몇 분 동안 기다릴 수 없기 때문에 바이트 수가 더 중요한 경우가 많습니다. 웹 페이지에는 이미지 외에도 바이트를 점유해야 하는 다른 코드도 있으므로 바이트 수를 최소화하는 것이 기본 원칙입니다. 물론 이 원칙은 이미지 품질과 상충됩니다. 이를 위해서는 구상과 제작 과정에서 이 둘의 균형을 맞출 수 있는 충분한 기술이 필요합니다. 이러한 기술에는 다음이 포함됩니다.
1. 애니메이션에 너무 풍부한 색상을 사용하지 마세요. 그 이유는 이미 언급한 바 있습니다. 색상이 많을수록 인덱싱 후 이미지 품질이 저하되고 보기 흉한 색상 반점이 형성됩니다. 이 경우에는 단일 색상을 사용하는 것이 좋습니다. 비록 화려하지는 않더라도 최소한 얼룩 등의 결점이 나타나는 것을 방지할 수 있습니다.
2. 풍부한 색상이 필요한 경우 풍부한 색상 부분의 픽셀이 애니메이션에서 고정된 상태로 유지되어야 합니다. GIF 애니메이션의 이전 프레임과 다음 프레임 사이에는 작동 관계가 있기 때문에 정지 상태의 부분은 후속 프레임에서 사용될 수 있으며 이미지의 이 부분을 후속 프레임에 저장할 필요가 없습니다. 이렇게 하면 전체 애니메이션의 풍부한 색상을 유지하면서 바이트 수를 효과적으로 줄일 수 있습니다. 반대로, 더 풍부한 픽셀도 이동하는 경우 더 풍부한 픽셀을 후속 프레임에 저장해야 하므로 애니메이션의 전체 바이트 수가 크게 늘어납니다.
아래 두 애니메이션을 비교하면 첫 번째 애니메이션은 공의 외부 광선, 투영 및 기타 부분을 변경하지 않고 하이라이트 부분만 변경합니다. 두 번째는 공의 전반적인 움직임입니다. 동일한 프레임 속도, 동일한 기간, 256 및 디더링 없음을 전제로 전자의 바이트 수는 9.29K이고 후자의 바이트 수는 57.1K입니다. 그 차이는 무려 6배나 된다. 그러면 네트워크에서 전송되는 데 걸리는 시간이 6배 달라집니다.
애니메이션을 구상할 때는 그 목적을 미리 고려해야 합니다. 웹 페이지에서 사용할 경우에는 웹 페이지에서의 중요성도 언급해야 합니다. 그다지 중요하지 않고 장식적인 경우에는 최소화하도록 노력해야 합니다. 바이트 수를 최대한 많이 지정합니다. 이는 보관 중 색상 수를 줄이고 좋은 생산 계획을 세우는 두 가지 측면에서 달성할 수 있습니다. 다채롭거나 역동적이어야 하는 중요한 지침이 포함된 애니메이션을 접한다면 애니메이션의 크기를 최대한 줄여야 합니다. 작은 크기 이미지의 총 픽셀 수도 작기 때문에 256색을 사용한 인덱싱은 그렇게 빡빡해 보이지 않습니다. 당신은 자신의 실험을 통해 이것을 배울 수 있습니다.
GIF의 또 다른 중요한 특징은 배경 투명도를 지원하여 웹 페이지의 배경과 잘 어울린다는 것입니다. 배경 레이어를 꺼서 배경이 투명한 GIF를 출력할 수도 있습니다. 그러나 GIF의 배경 투명도는 완전히 투명하거나 완전히 불투명하고 그 사이에는 반투명이 아닌 두 가지 상태만 있을 수 있습니다. 따라서 이미지의 경계가 수평, 수직, 45도 대각선이 아닌 이상 투명도 때문에 뚜렷한 에일리어싱이 발생하게 됩니다. 아래 그림과 같이 서로 다른 경계를 가진 그래픽 세트가 서로 다른 배경색 아래에 나타납니다. 둘 사이의 차이점을 확인하는 것은 어렵지 않습니다.
가장자리 들쭉날쭉의 형성 원리는 단순한 이미지 문제가 아니라 디스플레이의 물리적 한계와 관련된 요소이기도 하다는 점에 유의해야 합니다. 관련 지식은 기본 튜토리얼에서 언급됩니다.
반투명 픽셀(예: 그림자 스타일)이 있는 이미지의 경우 투명한 배경으로 저장하려면 투명도 디더링 프로젝트를 켜야 밀도가 다른 작은 흩어진 점을 사용하여 반투명도를 시뮬레이션할 수 있습니다. . 아래 그림과 같습니다. "투명도 디더링 없음" 아래의 GIF에도 투명한 배경이 있지만 원래 반투명 부분은 여전히 흰색을 유지하므로 흰색 배경에만 적용할 수 있음을 알 수 있습니다. 후자는 어떤 배경에도 적용될 수 있습니다. 아래 오른쪽 그림과 같습니다.
투명도 디더링은 완벽한 솔루션이 아니며 매우 열악한 솔루션이라고 할 수도 있습니다. 하지만 GIF 자체의 투명성 한계로 인해 해결책이기도 합니다. 실제 제작 시 GIF 형식을 사용하기로 결정한 경우 이미지 경계에 반투명 픽셀이 생성되지 않도록 해야 합니다. 즉, 투명도 디더링을 사용하지 마십시오.
또 한 가지 주의할 점은 출력되는 애니메이션의 배경이 투명한 경우, 불투명한 상태에서 각 프레임의 계산 관계가 바뀔 수 있고, 애니메이션의 바이트 수가 늘어나는 원인이 될 수도 있다는 점입니다.
이제 휴대폰에서 MMS 메시지로 애니메이션을 사용하는 방법에 대해 간략하게 설명하겠습니다.
China Mobile은 현재 최대 100K MMS 메시지를 허용하며 95K 미만의 애니메이션을 제어하고 텍스트 및 SMS 자체 코드를 위한 공간을 남겨두는 것이 가장 좋습니다. 주목해야 할 또 다른 사항은 애니메이션의 크기입니다. 휴대폰 모델마다 화면 해상도가 다르기 때문에 완벽하게 표시할 수 있는 애니메이션 크기가 다릅니다. 소위 완벽한 디스플레이는 휴대폰 화면 해상도가 애니메이션 크기와 같거나 크다는 것을 의미합니다. 애니메이션의 크기가 휴대폰 화면의 해상도를 초과하는 경우 휴대폰에서는 애니메이션 크기를 줄여 표시합니다. 하지만 축소된 애니메이션의 품질은 매우 저하됩니다. 일반적인 화면 크기는 다음과 같습니다.
128×128: 초기 및 현재 저가형 휴대폰에 일반적입니다. MMS 애니메이션의 기본 크기입니다. 인터넷에서 다운로드한 대부분의 MMS 애니메이션은 MMS를 지원하는 거의 모든 휴대폰에서 실행될 수 있기 때문에 이 크기입니다.
128×160: 이전보다 픽셀이 몇 개 더 많아졌지만 주로 일부 정보를 표시하는 데 사용되므로 실행할 수 있는 애니메이션 크기는 대부분 여전히 128×128입니다.
176×208, 240×320: Symbian 및 Windows Mobile과 같은 개방형 운영 체제를 갖춘 휴대폰에서 일반적으로 사용되며 전체 화면 애니메이션을 재생할 수 있습니다. 이 해상도를 사용하는 일반 휴대폰도 있지만 전체화면 재생이 가능한지는 확실하지 않습니다.
480×640: 고급 휴대폰 모델에 공통적으로 적용됩니다. 이론적으로는 동일한 크기의 애니메이션을 전체 화면으로 재생할 수 있지만 GIF 자체의 한계로 인해 재생의 부드러움은 보장되지 않습니다.
MMS 애니메이션을 제작할 때 가장 먼저 고려해야 할 크기는 128×128입니다. 호환성이 가장 좋고, 크기가 작기 때문에 동일한 콘텐츠에 대한 애니메이션 바이트 수가 큰 크기보다 적습니다. 물론, 수신기의 화면 해상도가 결정되면 그에 상응하는 크기로 제작하는 것도 가능합니다. 애니메이션의 배경은 경계가 뚜렷하지 않도록 흰색이 가장 좋습니다. 웹 페이지의 배경과 마찬가지로 휴대폰에서 MMS 메시지를 표시할 때 흰색도 배경색이기 때문입니다. 물론 때로는 인감의 윤곽선 등 의도적으로 경계감을 만들어 내야 하는 경우도 있으며, 구체적인 상황에 따라 스스로 판단할 수도 있습니다. 또한 대부분의 휴대폰은 MMS 메시지를 표시할 때 배경을 변경할 수 없기 때문에 MMS 메시지 애니메이션에 투명한 배경을 사용하는 것은 의미가 없습니다.
"웹 및 장치용으로 저장" 오른쪽 하단에 "Device Central..." 버튼이 있습니다. 버튼을 누르면 선택한 휴대폰 장치에서 애니메이션 효과를 미리 볼 수 있습니다. 아래 그림과 같습니다. 왼쪽의 기기 목록에서 선택하시면 됩니다. 사진에서 선택한 기기는 Nokia 3110 입니다. Adobe Device Central은 실제로 모바일 장치용으로 제작하는 사람들에게 중앙 집중식 환경을 제공하는 모바일 장치 데이터베이스입니다. 일반 디스플레이 외에도 휴대폰 화면의 백라이트가 꺼지고 실외 화면이 백라이트일 때의 디스플레이 상황을 시뮬레이션할 수도 있습니다. 그러나 이러한 기능은 현재로서는 우리에게 거의 중요하지 않습니다.
주목해야 할 또 다른 문제는 애니메이션의 프레임 속도입니다. 컴퓨터에서는 30fps의 애니메이션을 기본적으로 원활하게 재생할 수 있지만 휴대폰의 프로세서는 데스크톱 컴퓨터보다 나을 것이 없고 리소스도 제한되어 있습니다. 애니메이션의 프레임 속도는 2~5fps로 설정해야 합니다. 개방형 운영체제를 사용하는 휴대폰의 경우 프로세서 성능이 일반 휴대폰보다 우수하므로 10fps 이상으로 설정할 수 있습니다. 동시에 크기, 총 지속 시간, 바이트 수 등과 같은 요소도 휴대폰의 재생 효과에 영향을 미칩니다. 얼마나 부드러운지 확인하려면 휴대폰에서 애니메이션을 시험해 보는 것이 가장 좋습니다.
여러 가지 크기의 애니메이션을 출력하려면 벡터 형식을 사용하여 제작하는 것이 가장 좋으며, 원본 이미지를 저장하는 데에도 벡터 형식이 가장 좋은 형식입니다. 이는 당사가 항상 지켜온 "편집 가능성을 최대한 유지"한다는 원칙에 부합합니다. 옹호했다.