スライドショー風に動くGIFアニメをPhotoshopで作る(CC/CS6)

制作メモ

最近PhotoshopでGIFアニメや動画を作ることが多いので、今日は簡単な動くGIFアニメの作り方をご紹介したいと思います。

初めての方向けなので、3枚の画像をスライドショー風に切り替える、シンプルなGIF画像を作っていきます。

作り方

まず完成画像はこちら

フェードっぽくふんわりと画像を切り替えていきます。

①「タイムライン」パネルを開く

レイヤーごとに画像を配置して、シーン1〜3を作成。
そしてメニューの「ウィンドウ」を開いて、「タイムライン」にチェックをつけます。

すると画面下に「タイムライン」パネルが現れるので、「フレームアニメーション」を選択して「作成」ボタンを押しましょう。

②フレームアニメーションを作成

「フレームアニメーションを作成」を押したら、フレームが1つ生成されます。
次に「選択したフレームを複製」アイコンを押して、フレームを4つに増やしましょう。

フレームを4つに増やしたら、下記の手順を行います。
・フレーム1を選択し、シーン1レイヤーのみ表示
・フレーム2を選択し、シーン2レイヤーのみ表示
・フレーム3を選択し、シーン3レイヤーのみ表示
・フレーム4を選択し、シーン1レイヤーのみ表示

ここまでの作業が終わったら、フレーム下の「アニメーションを再生」アイコンを押して確認してみましょう。
3枚の画像が切り替わっていけばOKです。

③各フレームの表示時間を設定

次に、各フレームの秒数を設定します。

フレーム1の下に表示されている秒数をクリックし、「2秒」を選択します。

これで、フレーム1が2秒間表示されるようになりました。

同様に、フレーム2と3も2秒に設定します。
フレーム4は「ディレイなし」で0秒にしておきましょう。

④トゥイーン機能でフェードっぽく切り替える

各シーンが2秒ごとに切り替わるように設定しましたが、さらに切り替わり方を工夫してみましょう。
フェードイン・フェードアウトでシーンが切り替わるように作っていきます。

シーン2を選択した状態で、タイムラインパネル内の「アニメーションフレームをトゥイーン」アイコンをクリックします。

トゥイーンは「前のフレーム」を選択し、追加するフレームは「5」にします。

この設定で作成すると、フレーム1からフレーム2に少しずつ切り替わるように、不透明度が調整された新規のフレームが5枚自動作成されます。

新規に作成された5枚のフレームは、「0秒」で設定しておきましょう。

続けて、フレーム3とフレーム4にも、上記の手順を繰り返します。

これで書き出しの準備ができました。
書き出しの前に、再生ボタンを押して最終確認をしておきましょう。

ファイルの書き出し方法

作業が終わったら、メニューの「ファイル」を開いて、「書き出し」内の「Web用に保存」をクリックします。

あとは画質とファイルサイズを見ながら、ちょうど良い設定で書き出しましょう。

〈例〉
ファイル形式:「GIF」
カラー:「128」か「256」 ※べた塗りで数色のみのイラストなら、もっと少ない数字でOK
ディザ:「88%〜100%」 ※グラデーションが無ければ、もっと小さい数値でOK
透明部分:透明部分が無ければチェックを外す

これでGIFアニメは完成です。