アニメーションの作り方はたくさんわかってきましたが、最終的なアニメーションの形についてはまだよくわかっていません。アニメーションを出力するにはどうすればよいですか？どこで使われていますか?使用時に注意すべきことは何ですか?このレッスンでは、これらの問題について詳しく説明します。
現在、Windows システムの主なアニメーション画像形式は GIF であり、Web ページに直接表示することもできます。現在、最も広く使用されているアニメーション画像形式です。現在普及している携帯電話の MMS メッセージにアニメーションを含めるのも GIF 形式に属します。 GIF 形式は、静止画表現とアニメーション表現の両方をサポートしています。静止画でもアニメーションでも、その特徴は同じです。
GIF形式のアニメーションの実装原理は複雑ではなく、複数の静止画(フレーム)を組み合わせて順番に表示するものと理解していただければと思います。これらのピクチャ (フレーム) の間には、選択したパスの演算、つまり加算、減算、消去と同様の演算関係もあります。これはアニメーションのバイト数を最適化するためです。
特定のフレームが追加されると、前のフレームは保持され、このフレームの内容が追加されて新しい画像が形成されます。たとえば、一般的なプログレス バー アニメーションは、次の図に示すように、理論的なフレーム形状からすると、最も短いフレームと中間のフレームが格納されているとします。これら 3 つのフレームのそれぞれと、最も長いプログレス バーの画像。しかし実際には、2 番目のフレームには最初のフレームにないピクセルのみが含まれており、最初のフレームに加算的に作用して、「1+2」画像を形成します。フレーム3も同様です。この最適化により、画像のバイト数が効果的に削減されます。
減算法はその逆で、画像の前のフレームの特定のピクセルを消去します。これは「逆プログレス バー」でわかります。消去方法は、主に前後の 2 つのフレームに相関がない場合、たとえば、赤一色から緑一色に変化する場合に使用されます。前後のフレームでは消去法が使用されます。
実際の制作では、手動で介入することなく、Photoshop が画像の状況に基づいてどの方法を採用するかを自動的に決定します。これらの計算方法を知識として理解しておけば十分です。アニメーションを考える際の参考にもなります。
次に、GIF 形式の次の重要な機能について説明します。これは、 GIF がサポートできる色数の制限です。これは、GIF 画像が最大 256 色しかサポートできないことを意味します。これは静的 GIF で特に顕著で、複数の色のグラデーションなど、色の豊かな一部の画像は GIF で完全に表現することが困難です。下の左の図に示すように、写真の一部 (全体ではなく一部であることに注意してください) は、ディザリングと拡散ディザリングを使用していない PNG24 ビットおよび GIF256 の画像です。全体の写真は、下の右に示すように、ヴェネツィアで撮影されたショーウィンドウです。
PNG24 ビットが最も色が良く、元の画像とみなすことができることがはっきりとわかります。 GIF形式は色表現が苦手です。ディザリングを使用しないと、元の画像の色の遷移のある一部の領域にカラー スポットが表示されます。拡散ディザリングではスポットは若干明るくなりますが、粒状感は重くなります。これはディザリング自体の原理によるものです。ディザリングの概念は、基本チュートリアルで紹介されています。
256 色は画像全体を指すことに注意してください。元の画像全体が以下のようなサイズであれば、256 色と元の画像の差はそれほど大きくありません。これは、色を 256 色に減色するときに、Photoshop が元の画像の色に従って色を配置するためです。このプロセスはインデックス作成とも呼ばれ、類似した色を 1 つにグループ化します。
元の画像の色に複数の色相が含まれている場合、256 色を平均すると、1 つの色相に割り当てられる数は非常に小さくなります。逆に、元の画像の色合いが基本的に同じか近い場合は、256色もうまく表現できます。以前の256非イミテーションカラーではシミが目立つように見えましたが、今ではシミが目立ちにくくなっているのはこのためです。前者の元の画像にはより多くの色相が含まれているため、一部の色が青、赤などに割り当てられ、より少ない色が黄色相に割り当てられます。後者の元の画像には基本的に黄色相しかないため、他の色相に色を割り当てる必要はありません。
下の写真はピアチェンカで撮影したストリートビューの写真です。さまざまな部分を比較しています。下の四角はカラーテーブルで、カラーブロックは使用されている 256 色を表しています。元の画像の色構成がカラー インデックスに与える影響は、カラー テーブルで簡単に確認できます。左側の写真の方が色相が多いため、256 色のうち空に割り当てられている青相の数が少なく、画像の空には明らかな色の斑点があります。右側の画像には基本的に空の部分のみが含まれているため、256 色のほとんどが青相に割り当てられ、画像内の空のパフォーマンスが向上します。
[ファイル > Web およびデバイス用に保存] [CTRL+SHIFT+ALT+S] を使用すると、保存設定ボックスが表示されます。これは、特に今後学習する Web デザイン拡張機能のチュートリアルで最もよく使用される出力関数です。
設定画面に入ったら、「最適化」タブで見るべきは、出力後の実際の効果、つまりブラウザや画像閲覧ソフトでの効果です。 「オリジナル」タブはPhotoshopのエフェクトであり、基準としては使えないので注意してください。
緑色の矢印は対応する設定領域で、ここから画像形式を GIF に設定し、色数を 256 に設定し、ディザ オプションをオフにします。その設定は、上の図の左側の効果に対応します。
青い矢印のバイト数表示に注意してください。これは非常に重要な指標です。この数をできるだけ小さくする必要があります。そうしないと、画像やアニメーションを効果的に使用できなくなります。
バイト数を小さくするには色の数を減らす必要があり、それに応じてカラーテーブル内のカラーブロックの数も減ります。ただし、色が少なすぎると画質に大きな影響があり、カラースポットが発生しやすくなるのは明らかです。ディザリングをオンにするとカラー スポットを減らすことができますが、バイト数も増加します。バイト数と品質の間のシーソーのようなものです。両方を兼ね備えることはできません。インターネット経由で送信することを目的とした画像の場合、ほとんどの訪問者は Web ページが表示されるまで数分間待つ忍耐力がないため、バイト数がより重要になることがよくあります。 Web ページには画像以外にもバイトを占有する必要がある他のコードもあるため、バイト数を最小限に抑えることが基本原則です。もちろん、この原則は画質とは矛盾するため、構想と制作の過程でこの 2 つのバランスをとる十分なスキルが必要になります。これらのテクニックには次のようなものがあります。
1. アニメーションではあまり豊かな色を使用しないでください。理由はすでに述べました。色が増えると、インデックス作成後の画質が低下し、見苦しい色の斑点が形成されます。この場合は単色にしたほうが華やかではないかもしれませんが、少なくとも汚れなどの傷は避けられます。
2. 豊かな色が必要な場合は、アニメーション内で豊かな色の部分のピクセルを静止させておく必要があります。 GIFアニメーションの前後のフレームには動作関係があるため、静止状態の部分は後続のフレームで使用でき、この部分の画像を後続のフレームに格納する必要はありません。これにより、アニメーション全体の豊かな色を維持しながら、バイト数を効果的に削減できます。逆に、リッチ ピクセルも移動している場合は、リッチ ピクセルを後続のフレームに格納する必要があり、アニメーション全体のバイト数が大幅に増加します。
以下の 2 つのアニメーションの比較。最初のアニメーションでは、ボールの外側の輝き、投影などの部分は変更されず、ハイライト部分のみが変更されます。 2つ目はボールの全体的な動きです。同じフレームレート、同じ継続時間、256 とディザリングなしの両方を前提とすると、前者のバイト数は 9.29K、後者のバイト数は 57.1K になります。その差は6倍にもなります。その場合、ネットワーク上で送信されるまでにかかる時間は 6 倍異なります。
アニメーションを考えるときは、その目的を事前に考慮する必要があります。Web ページで使用する場合は、Web ページ内での重要性についても考慮する必要があります。あまり重要ではない場合は、アニメーションを減らすように努めます。できるだけ多くのバイト数を指定します。これは、保管中の色数の削減と適切な生産計画という 2 つの側面から達成できます。カラフルまたはダイナミックにする必要がある重要な命令を含むアニメーションに遭遇した場合は、アニメーションのサイズをできるだけ小さくする必要があります。小さいサイズの画像では総ピクセル数も少ないため、256 色のインデックスを作成してもそれほど窮屈には見えません。これは、自分自身の実験を通じて学ぶことができます。
GIF のもう 1 つの重要な機能は、背景の透明性をサポートしていることです。これにより、GIF が Web ページの背景とよく調和します。背景レイヤーをオフにすると、背景が透明なGIFを出力することもできます。ただし、GIF の背景の透明度は、完全に透明か完全に不透明の 2 つの状態のみですが、その間の半透明はありません。したがって、画像の境界が水平線、垂直線、または 45 度の対角線でない場合、透明度による明らかなエイリアシングが形成されます。次の図に示すように、異なる境界を持つグラフィックのセットが異なる背景色で表示されます。両者の違いを理解するのは難しくありません。
エッジのギザギザの形成原理は単なる画像の問題ではなく、ディスプレイの物理的制限に関連する要因も含まれることに注意してください。関連する知識は基本チュートリアルで説明されています。
半透明のピクセルを含む画像 (ドロップ シャドウ スタイルなど) の場合、透明な背景として保存する場合は、透明度ディザリング プロジェクトをオンにする必要があります。これにより、異なる密度の小さな散在点を使用して半透明度をシミュレートできるようになります。 。以下の図に示すように。 「透明度ディザリングなし」の GIF も背景が透明ですが、元の半透明部分は白のままであるため、白い背景にしか適用できないことがわかります。後者はあらゆる背景に適用できます。右下の図のように。
透明度ディザリングは完璧な解決策ではなく、非常に貧弱な解決策であるとさえ言えることに注意してください。ただし、GIF 自体の透明度には制限があるため、これは解決策でもあります。実際の制作では、GIF 形式を使用する場合は、画像の境界に半透明のピクセルが生成されるのを避ける必要があります。言い換えれば、透明ディザリングの使用を避けるようにしてください。
もう1つの注意点は、出力アニメーションの背景が透明な場合、非透明状態での各フレームの計算関係が変化し、アニメーションのバイト数が増加する可能性があることです。
次に、携帯電話での MMS メッセージとしてのアニメーションの使用について簡単に説明しましょう。
China Mobile では現在、最大 100K の MMS メッセージを許可しています。アニメーションを 95K 未満に制御し、テキストと SMS 自体のコード用のスペースを残すことが最善です。もう 1 つ注意すべき点は、携帯電話のモデルが異なると、画面解像度が異なるため、完全に表示できるアニメーションのサイズが異なります。いわゆる完璧な表示とは、携帯電話の画面解像度がアニメーション サイズと同じかそれ以上であることを意味します。アニメーションのサイズが携帯電話の画面の解像度を超える場合、携帯電話は縮小して表示します。ただし、縮小アニメーションの品質は非常に低くなります。一般的な画面サイズは次のとおりです。
128×128: 初期および現在のローエンド携帯電話で一般的です。これは、MMS アニメーションをサポートするほぼすべての携帯電話で実行できるため、インターネットからダウンロードされるほとんどの MMS アニメーションの基本サイズです。
128×160: 以前のものよりピクセルが少し増えていますが、主に何らかの情報を表示するために使用されるため、実行できるアニメーション サイズのほとんどは 128×128 のままです。
176×208、240×320: Symbian や Windows Mobile などのオープン オペレーティング システムを搭載した携帯電話で一般的に使用され、全画面アニメーションを再生できます。この解像度を使用する一般的な携帯電話もありますが、全画面再生に対応できるかどうかは不明です。
480×640：携帯電話の上位機種に共通。理論上は同サイズのアニメーションの全画面再生に対応しますが、GIF自体の制限により滑らかな再生は保証されません。
MMS アニメーションを作成する場合は、128×128 を主に考慮する必要があります。これは、互換性が最も高く、サイズが小さいため、同じコンテンツのアニメーションのバイト数が大きいサイズの場合よりも少なくなるからです。もちろん、受信機の画面解像度が決まっていれば、それに匹敵するサイズで作ることも可能です。アニメーションの背景は、境界線が目立たないように白が最適です。 Web ページの背景と同じように、携帯電話で MMS メッセージを表示するときの背景色も白であるためです。もちろん、場合によっては意図的に境界感を作成する必要があります (印鑑の輪郭など)。特定の状況に基づいて独自の決定を行うことができます。さらに、ほとんどの携帯電話では MMS メッセージを表示するときに背景を変更できないため、MMS メッセージのアニメーションで透明な背景を使用することはほとんど意味がありません。
「Web とデバイス用に保存」の右下に「Device Central...」ボタンがあり、これを押すと、選択した携帯電話デバイスでのアニメーションの効果をプレビューできます。以下に示すように。左側のデバイスリストから選択できます。写真で選択されているのは Nokia 3110 です。 Adobe Device Central は、実際には、モバイルデバイス向けに制作する人に集中環境を提供するモバイルデバイスデータベースです。通常の表示に加え、携帯電話画面のバックライトを消灯した場合や、屋外の画面をバックライトで照らした場合の表示状況もシミュレートできます。ただし、これらの機能は現時点では私たちにとってほとんど重要ではありません。
もう 1 つの注意すべき点は、アニメーションのフレーム レートです。コンピュータでは基本的に 30fps のアニメーションをスムーズに再生できますが、携帯電話のプロセッサはデスクトップ コンピュータと同等であり、そのリソースは限られています。アニメーションのフレームレートは 2 ～ 5fps に設定する必要があります。オープン OS を搭載した携帯電話の場合は、プロセッサの性能が通常の携帯電話より優れているため、10fps 以上に設定できます。同時に、サイズ、合計時間、バイト数などの要因も携帯電話での再生効果に影響します。携帯電話でアニメーションを試して、どれくらいスムーズかを確認するのが最善です。
複数の異なるサイズのアニメーションを出力したい場合は、制作にはベクター形式を使用するのが最善であり、当社が常に「編集可能性を最大限に維持する」という原則に沿って、オリジナルの画像を保存するのにもベクター形式が最適です。と提唱した。