Photoshop CS3 で平面アニメーションを作成する一連のチュートリアル (1): 概要。
アニメーション形成の原理は、人間の目には視覚の持続性という特性があるということです。いわゆる視覚の持続性とは、物体を見た後、たとえその物体がすぐに消えたとしても、継続的なイメージを目に残し続けることを意味します。これは、オブジェクトが比較的明るい場合に特に顕著です。最も一般的なのは、夜間に写真を撮るときにフラッシュを使用することです。フラッシュが消えてから時間が経っても、ハローは被写体の目に残り、一定期間持続します。
この機能を最初に応用したのは、おそらく私たちが小学生の頃でした。それは、教科書のフッターにたくさんの文字の動きを描き、それを素早くめくって目に連続的なイメージを表示することでした。アニメーションです。ここでのアニメーションは漫画アニメーションを指すものではないことに注意してください。漫画アニメーションの制作原理は同じですが、ここでのアニメーションは一般に連続した画像すべてを指します。
要約すると、いわゆるアニメーションとは、複数の静止画を連続的に再生し、視覚の持続性を利用して連続画像を形成するものです。たとえば、従来の映画では、長い一連のフィルムを使用して 1 つのフレームを連続的に記録し、一定の速度で順番にライトでスクリーンに投影します。ここには速度要件があります。教科書をゆっくりとめくると、連続画像ではなく複数の静止画像しか表示されないことを想像してください。ムービーの再生速度が遅すぎると、視聴者が見るのは回転するスライドショーと同じになります。連続した映像を体感できるように、動画は 24 フレーム/秒の速度で再生されます。つまり、1 秒間に 24 枚の静止画が連続してスクリーンに投影されます。アニメーションの再生速度の単位はfpsで、fは英単語のFrame（絵、フレーム）、pはPer（あたり）、sはSecond（秒）です。中国語では、1秒あたり何フレーム、または1秒あたり何フレームを意味します。映画は 24fps であり、24 フレームとも呼ばれます。
テレビ信号など、実際に画像を生成できる他のデバイスにもフレーム レートの概念があります。中国とヨーロッパで使用される PAL 形式は 25 フレームで、日本と南北アメリカで使用される NTSC 形式は 29.97 フレームです。アニメーションをコンピュータのモニタで再生する場合、15 フレームで連続画像の効果を得ることができます。このように、今後ビデオを作成する場合は、どのデバイスで公開するかを考えて、さまざまなフレーム レートを設定する必要があります。
人間の目と脳から構成される視覚システムは非常に発達しているため、実際には人間の目の認識精度は上記のフレームレートよりもはるかに高くなります。環境に応じて感度レベルが異なるだけです。たとえば、暗い環境では、明るい光源の視覚持続時間が長くなるため、映画には 24 フレームしか必要ありません。ちなみに余談ですが、ある面では人間を超える目を持っている動物はごく一部ですが、他の面ではどれも重大な欠陥を抱えています。たとえば、「細部の王様」であるワシは色盲ですが、「暗視の王様」であるフクロウは目が固定されており、周囲を観察するには頭を回転させなければなりません。
Tianji Design Online で見た Photoshop のデザインチュートリアルでは、Photoshop は主にポスターや印刷原稿などの静止画像を作成するために使用され、アニメーションを作成する機能があると述べました。次に、Photoshop で複数のフレームで構成されるアニメーションを作成します。単一の画面を複数の画面に拡張します。そして、これらの複数のシーンの間にある種のイメージの連続性を作成して、アニメーションを形にします。
現在、Flash を使用して制作された多くのアニメーションには吹き替えやインタラクティブ機能が付いており、アニメーション全体がより鮮明になっています。 Photoshop で制作されたアニメーションは、主に絵だけで音声が追加できないため、単純なアニメーションとしか言えず、視聴者は固定された方法でしか見ることができません。ただし、単純であるということは粗雑さを意味するわけではありません。前者にはより多くの制作方法と表現方法が用意されていますが、たとえば、レイヤー スタイル アニメーションには、他のソフトウェアでは実現するのが難しい美しいものを簡単に作成できるという独自の利点があります。さらに、紙に絵を描くという単純な行為と同じように、描き方も人によって異なります。したがって、優れたアニメーションには必ずしも複雑な技術が必要ではなく、重要なのは優れた創造性です。
どのソフトウェアであっても、その制作原理は同じであり、私たちが一生懸命研究したRGBカラーモードと同じように、どこにでも適用できます。そこで、これまで学んだPhotoshopの基礎知識をアニメーション制作に応用し、アニメーション制作の一般的なスキルや手法を習得することが現在の課題です。この知識は、後で他の側面にも適用できます。また、Photoshopアニメーションを動画に変換し、音声を追加する方法も紹介します。
製造上の違いに加えて、使用方法にも違いがあります。アニメーションは、広告アニメーションなど、特定のコンテンツを強調するために Web ページの特定の領域に配置されることがよくあります。この種のアニメーションには通常、468x60、140x60、90x180 など、さまざまな配置場所に応じて対応する固定サイズがあります。アニメーションは、携帯電話の MMS (写真、音声、ビデオを送信できるマルチメディア テキスト メッセージ サービス) にも適用できます。これらの用途にはそれぞれ独自の特徴があり、サイズ以外にも考慮すべき要素があります。バイト数の制限、フレームの滞留時間など。チュートリアルで段階的に説明します。
注: この一連のチュートリアルを開始する前に、読者は Photoshop の基本を学習し、調整レイヤーやレイヤー スタイルなどの概念と操作 (「曲線調整レイヤーの作成方法」など) を理解し、習得している必要があります。動作については簡単に説明するだけであり、原理については詳しくは説明しません。したがって、初めて読む人は、まず基本を学ぶことをお勧めします。
また、Photoshop CS3 Extended（拡張）版のみ、通常版には無いアニメーション制作機能が搭載されています。 CS2版にはアクション作成機能が搭載されており、操作性はCS3 Extendedと同様です。 CS 以前のバージョンでは、アニメーション制作用にバンドルされている ImageReady ソフトウェアが必要です。チュートリアルと同じ CS3 Extended バージョンを使用することをお勧めします。
アニメーションというのは画面内の画像を動かすという意味なので、実際に「単純かつ大雑把」なアニメーションを描いてみましょう。
150×150の空の画像を新規作成し、新規レイヤーを作成して下図左のように長方形を描き、レイヤーパレットを右のように描きます。このことから、これは通常の格子レイヤーであることがわかります。実際の操作では、これについても注意して説明します。
下の左図に示すように、[Window_Animation] からアニメーション パレットを開きます。現時点では、下の右図の赤い矢印で示されているように、レイヤー パレットにはさらにいくつかのオプションもあります。アニメーションパレットを閉じると元の状態に戻ります。今のところは心配しないでください。さらに、アニメーション パレットは多くの場合、測定記録パレットと組み合わされます。後者は現在のコンテンツとは無関係なので、オフにすることができます。
アニメーションパレットを開いたら、アニメーションパレットの赤い矢印にある「選択したフレームをコピー」ボタンをクリックしてアニメーションの作成を開始できます。 
, 新しいフレームが追加されたことがわかります。以下に示すように。これまでの習慣によれば、このアイコンは新しいレイヤーなどの新しいアイコンを表す必要があります。ここでの文字通りの説明はコピーですが、実際には新しいものですが、新しく追加されたフレームは実際には前のフレームと同じです。 . 同じ内容です。同様に、誰もが想像できるはずです
ボタンの機能はフレームを削除することです。
コピーした 2 番目のフレームが現在アニメーション パレットで選択されていることを確認し、移動ツールを使用してレイヤー内の四角形を一定の距離だけ移動します (下図左の図のようになります)。このときのアニメーションパレットは下中図のようになります。フレーム 2 ではブロックの位置が変化していますが、フレーム 1 ではブロックの位置は変化していないことがわかります。これは非常に重要な機能です。
最初にフレームをコピーし、次にブロックを移動するこの操作を数回繰り返すと、最終的には下の右の図のようなものが得られます (これに似ています)。現在 7 つのフレームがあり、ブロックは各フレームで異なる位置にあります。 「各フレームの四角形の位置が違う」という文に注目して、レイヤーパレットを見ると、レイヤーが1つしか存在していないことがわかります（背景レイヤーはとりあえずカウントされていません）。機能: 1 つのレイヤーについて、その位置 (または座標) を異なるフレームで個別に指定できます。この機能により、1 つのレイヤーだけでオブジェクトの動きをアニメーション化できます。
アニメーションパレットの再生ボタンを押すことができるようになりました
画像ウィンドウ内でボックスが移動する効果が確認できますが、その移動速度は非常に速いです。これはフレーム遅延時間が設定されていないためです。アニメーション パレットの各フレームの下に「0 秒」が表示されていることに注意してください。これはフレームの遅延時間 (または滞留時間) です。フレーム遅延時間は、アニメーション中にフレームが表示される時間を示します。たとえば、特定のフレームの遅延が 2 秒に設定されている場合、このフレームが再生されると、次のフレームの再生を続ける前に 2 秒間留まります。遅延のデフォルトは 0 秒で、遅延はフレームごとに個別に設定できます。
フレーム遅延を設定する方法は、フレームの下の時間をクリックし、ポップアップ リストで対応する時間を選択することです。下の左図に示すように、フレーム 7 を 0.5 秒に設定します。リストの「遅延なし」は 0 秒です。設定したい時間がない場合は、「その他」を選択して値 (秒単位) を入力できます。複数のフレームを選択した後、遅延を均一に変更することもできます。複数のフレームを選択する方法は、まずアニメーション パレットのフレーム 1 をクリックして選択し、次に Shift キーを押しながらフレーム 6 をクリックします。フレーム 1 ～ 6 を選択するだけです。次に、下の右の図に示すように、任意のフレームのタイムゾーンを 0.1 秒に設定します。これは、より一般的に使用される遅延時間です。
アニメーションをもう一度再生すると、ブロックの動きが遅くなり、動きの終わりに長時間留まっていることがわかります。明らかに、これは設定された遅延が長いことが原因です。この長い遅延は実際に重要な役割を果たしており、実際の制作ではこの機能を使用して特定のテーマを強調することができます。また、時間を見つけて、後続のチュートリアルでいくつかの表現テクニックを紹介します。
アニメーションのもう一つの特徴は、遅延時間のほかに、再生ループ数を設定できることです。アニメーション パレットの最初のフレームの下に「永遠」という文字があることに注意してください。これはループの数を表します。クリック後、「1 回」または「永久」を選択するか、サイクル数を自分で設定できます。次に、アニメーションを再度再生して、ループ番号設定の効果を確認します。
ほとんどの場合、アニメーションは継続的に (つまり、永久に) ループしますが、主にアニメーションを使用して Web コンポーネントを作成する場合には、1 回または数回 (2 ～ 3 回) のループも使用されます。たとえば、列の名前を最初からアニメーション化して徐々に表示し、名前が完全に表示されたときに修正する必要があり、再び消えてフェードインすることはできません。このとき、「1回」の周期設定を使用する必要があります。
〖CTRL+S〗[ファイル>保存]を押してアニメーション設定を保存します。ファイル形式は psd です。このファイル形式は Photoshop 独自のものであり、すべての関連情報を記録できます。将来の修正を容易にするために、全員がこの形式で作品を保存することをお勧めします。 Web ページで使用できる独立したアニメーション ファイルが必要な場合は、[CTRL+ALT+SHIFT+S] [ファイル > Web とデバイス用に保存] を使用する必要があります。次の左側に示すような大きなウィンドウが表示されます。 。この大きな窓にはカバーするものがたくさんあります。ただし、現在は赤い矢印の領域の設定を参照するだけで済みます。
同時に、ウィンドウの右下の緑色の矢印領域に再生ボタンとループ オプションが表示されます。ここでループ数を変更すると、ソース ファイルの設定も変更されます。赤い矢印の領域内で GIF が選択されていない場合、再生ボタンは使用できないことに注意してください。これは、GIF 形式のみがアニメーションをサポートしているためです。これを JPG や PNG などの他の形式で強制的に保存すると、生成される画像は最初のフレームのみになるためです。
保存処理中に、次のような警告メッセージが表示される場合がありますが、無視せずに確認してください。再び非表示にすることもできます。ただし、ファイル名を付けるときは、全角文字や漢字を使用せず、半角の英語または数字を使用することに注意してください。これは、さまざまな言語のブラウザとの互換性をさらに高めるためです。
この章では、誰もがマスターする必要があるアニメーションの 2 つの属性、つまりフレーム遅延時間とループ数について説明します。また、「フレームをコピーしてレイヤーを移動する」など、簡単なオブジェクト移動アニメーションの作成方法もマスターする必要があります。このメソッドを使用して、2 つのオブジェクトを同時に移動させるアニメーションを作成します。効果は下の図と似ています。
次のセクションでは、2 番目の部分、つまり最初のフレームの伝播特性を紹介します。