内容(What's Covered) 

この文書では、Adobe Photoshop でフレームを利用してアニメーション GIF を作成する方法について説明します。

アニメーション GIF は、Web ブラウザで表示できる動画の一つです。アニメーション GIF では、複数の静止画をアニメーションのコマ (フレーム) のように順番に表示することで、画像が動いているように見せています。

A. フレームの作成

アニメーション用のフレームを作成する方法は、以下の 3 通りがあります。

A-1. レイヤーを組み合わせてフレームを作成する

アニメーションの 1 コマを一つずつレイヤーで調整し、コマ撮りするようにフレームとして追加していきます。

  1. Photoshop を起動し、新規ドキュメントを作成します。
  2. 背景レイヤーに、背景を描画します。

    ※ 背景レイヤーはアニメーション化できません。背景もアニメーション化したい場合は、レイヤーを追加します。



  3.  新規レイヤーを追加し、アニメーションするオブジェクトを描画します。



  4. ウィンドウ/アニメーション を選択し、アニメーション(フレーム) パネルを表示します。



  5.  「選択したフレームを複製」ボタンをクリックして新規フレームを作成します。



  6. レイヤーパネルでオブジェクトが描かれたレイヤーを操作し、アニメーションしたい方向へ移動させます。(2 フレーム目の編集)



  7. 「選択したフレームを複製」ボタンをクリックして新規フレームを作成します。(3 フレーム目の作成)



  8. 手順6. および手順 7. を繰り返し、フレームを追加してアニメーションを作成していきます。

A-2. レイヤーからフレームを自動作成

1 つのレイヤーを 1 つのフレームとして変換してフレームを作成します。

  1. Photoshop を起動し、新規ドキュメントを作成します。
  2. 必要なフレーム数の数だけレイヤーを作成し、オブジェクトを描画します。



  3. ウィンドウ/アニメーション を選択し、アニメーション(フレーム) パネルを表示します。
  4. アニメーション(フレーム) パネルメニューから、「レイヤーからフレームを作成」を選択します。

  5. レイヤーに対応するフレームが自動的に作成されます。



     

A-3. トゥイーンによるフレームの生成

トゥイーンコマンドを使用すると、 2 つのフレームを補間するフレームが自動的に生成されます。 

  1. Photoshop を起動し、新規ドキュメントを作成します。
  2. 手順 A-1. または手順 A-2. の方法で、異なる様相を持ったフレームを 2 つ作成します。
  3. アニメーション(フレーム) パネルで、トゥイーン ボタンをクリックします。



  4. トゥイーンダイアログボックスで設定を行い、「OK」をクリックします。

    トゥイーン : トゥーインの範囲を設定します。

    追加するフレーム : トゥイーンで追加されるフレーム数を指定します。

    レイヤー : 追加されるフレームで変化させるレイヤーを指定します。

    パラメータ : レイヤー内で変化させるプロパティを指定します。



  5.  2 フレーム間を補完するフレームが自動的に作成されます。



B. フレームの編集

フレーム作成が完了したら、各フレームの設定および編集を行います。

  1. 必要に応じて、アニメーション(フレーム) パネルでフレームを選択し、レイヤーパネルで各フレームのオブジェクトを再調整します。
  2. アニメーション(フレーム) パネルで、ディレイ(1 つのフレームが表示される時間)を指定します。



  3. アニメーション(フレーム) パネルの左下にあるループオプションで、アニメーションの再生を何回繰り返すかを指定します。



C. アニメーションのプレビュー

アニメーション(フレーム) パネルの 再生 ボタンをクリックして、アニメーションをプレビューすることができます。

D. アニメーションの最適化

Web ブラウザーに効率的にダウンロードできるよう、アニメーションを最適化します。

  1. アニメーション(フレーム) パネルメニューから「アニメーションを最適化」を選択します。



  2.  アニメーションを最適化 ダイアログボックスでオプションを指定して、「OK」をクリックします。

    バウンディングボックス : 選択すると、各フレームで直前のフレームから変更された部分だけが切り抜かれます。

    重複ピクセルの削除 : 直前のフレームから変更のないピクセル部分がフレーム内で透明になります。※ アニメーション GIF 保存時に「透明部分」オプションを選択する必要があります。



E. アニメーション GIF として保存

  1. ファイル/Web およびデバイス用に保存 を選択します。
  2. Web およびデバイス用に保存 ダイアログボックスで GIF 形式を選択します。

  3. その他の設定を行い、「保存」ボタンをクリックして保存先を選択します。

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー