アニメーションの作成は思ったほど複雑ではありません。特に、スペースが限られているWeb広告の制作には、このテクニックが役立ちます。このコラムでは、Photoshopを使って、テキスト付き画像も含め複数の画像を循環させるアニメーションGIFを作成し、Web上で自動再生されるスライドショーを作成する方法を学びます。
アニメーションをデザインする
Photoshop（CS6 ExtendedまたはCCのいずれかのバージョン）を起動し、「ファイル」＞「新規」を選択します。表示されるダイアログボックスで、アニメーションの幅と高さ（例えば300×250ピクセル）を入力します。解像度は72を入力し、「カラーモード」メニューでRGBを選択し、「カラープロファイル」メニューからsRGBを選択します。
sRGB はインターネットの標準カラー スペースであるため、このスペースでデザインすると、ファイルを保存したときに色の変化が回避されます。
次に、レイヤーを使ってコンテンツを作成します。ドキュメントに画像を追加するには、「ファイル」＞「埋め込みを配置」（以前のバージョンでは「ファイル」＞「配置」）を選択します。Photoshopでは、画像がサイズ変更ハンドルで囲まれます。Shiftキーを押しながらコーナーのハンドルをドラッグして画像のサイズを変更し、Returnキーを押します。各画像でこの手順を繰り返します。ブランディング用のレイヤー（例えばロゴ）と「CTA（行動喚起）」用のレイヤー（例えば「ここをクリックすると初回の広告が50%オフになります」など）を必ず含めてください。後者は視聴者に行動を促すだけでなく、広告の成功率を測るのに役立ちます。コンテンツが完成したら、最初のフレームに表示したいもの以外はすべて、レイヤーの表示アイコン（丸で囲んだ部分）をオフにします。
このレイヤーパネルには、すべてのアニメーションコンテンツが表示されます。ご覧のとおり、最初のフレームのレイヤーのみが表示されています。
ウィンドウ > タイムラインを選択します。表示されたパネルで、「ビデオタイムラインを作成」ボタンの右側にある下向きのアイコンをクリックし、「フレームアニメーションを作成」を選択します。表示される「フレームアニメーションを作成」ボタンをクリックすると、Photoshop はレイヤーパネルに現在表示されている内容を表すフレームを 1 つ作成します。各フレームは、画面に表示するコンテンツのプレースホルダーとして機能し、レイヤーの表示/非表示を切り替えることで、表示/非表示を制御できます。
タイムライン パネルを最初に開いたとき (上) と、「フレーム アニメーションを作成」ボタンをクリックした後の外観を以下に示します。
新しいフレームを追加するには、「選択したフレームを複製」ボタン（丸で囲んだ部分）をクリックします。フレームの内容はレイヤーの表示設定によって決まるため、新しいフレームは最初のフレームと同一になります。レイヤーパネルの表示設定アイコンを使用して、アニメーションの2番目のフレームのコンテンツを含むレイヤーのみを表示します。アニメーションが完成するまで、フレームの追加とレイヤーの表示設定の調整を続けます。ここでは、最後のコスチューム写真の後にCTAフレームが表示され、その後に背景のみを含む「空白」のフレームが表示されます。
複製ボタン（丸で囲んだ部分）をクリックした後、レイヤーの表示設定を使って、2つ目のフレームに表示したいコンテンツを表示します（上）。2つのテキストフレーム（最初と最後）の間に空白のフレームを追加することで、アニメーションの再生中にループしてもテキストが読みやすくなります（下）。
フレーム間にフェード効果を追加することもできます。これはトゥイーンと呼ばれます。これを行うには、次のフレーム（例えば「CTA（コールトゥアクション）」フレーム）にフェードインさせたいフレームをアクティブにし、「トゥイーン」ボタン（複製ボタンの左側にある、斜めに並んだ四角形のアイコン）をクリックします。表示されるダイアログボックスで、アクティブなフレームをトゥイーンするフレーム（ここでは「次のフレーム」を使用）を指定し、「追加するフレーム」フィールドにフェードインするフレーム数を入力します。「OK」をクリックすると、Photoshopが新しいフレーム（丸で囲んだ部分）を追加します。
追加するフレームが増えるほどファイル サイズが大きくなるため、注意してトゥイーンしてください。
再生をカスタマイズする
各フレームの下にあるフレーム遅延メニューを使って、表示時間を調整します。ブランディングやCTAフレームは、画面上で読み取れるくらいの長さ（例えば2秒）で表示し、トゥイーンフレームは0.5秒ほど速く表示します。次に、ループオプションメニュー（丸で囲んだ部分）をクリックして「3」を選択すると、アニメーションが3回繰り返されます。再生ボタン（丸で囲んだ部分）をクリックして、作成したアニメーションをプレビューします。
Shift キーまたは Command キーを押しながらクリックしてフレームをアクティブにし、そのうちの 1 つのフレームの継続時間を変更することで、各フレームの遅延を個別または一括で設定できます。
完了したら、タイムラインパネルのフライアウトメニュー（丸で囲んだ部分）から「アニメーションを最適化」を選択します。表示されるダイアログボックスで、両方のオプションをオンにしておきます。「バウンディングボックス」は各フレームをその内容に合わせてトリミングし、「冗長ピクセルの削除」は後続のフレームで変更されていないピクセルを透明にします。「ファイル」＞「名前を付けて保存」を選択し、「フォーマット」メニューから「Photoshop」を選択してレイヤーを保存し、後で編集できるようにします。
アニメーションを最適化すると、ファイル サイズが小さくなります。
ファイルをエクスポートする
Photoshop CS6 Extendedでは「ファイル」＞「Web用に保存」、CCでは「ファイル」＞「書き出し」＞「Web用に保存」を選択し、右上のフォーマットメニュー（丸で囲んだ部分）からGIFを選択します。アニメーションにグラデーション付きの写真が含まれている場合は、「ディザ」メニューを「拡散」に設定し、その右側にある「量」設定（丸で囲んだ部分）を調整してみてください。アニメーションにフルカラーの写真が含まれていない場合は、「カラー」フィールドの値を下げてファイルサイズを小さくしてみてください。保存前に、右下の「アニメーション」セクション（丸で囲んだ部分）でプレビューを確認してください。
強力な「Web 用に保存」ダイアログ ボックスをご覧ください。
作成されたGIFファイルは、どのウェブブラウザでも再生できます。ブラウザの「ファイル」＞「開く」コマンドを使用するか、GIFファイルをブラウザウィンドウにドラッグ＆ドロップしてください。また、QuickLookを使ってプレビューすることもできます。ファイル名をクリックしてキーボードのスペースバーを押すだけです。
