Photoshop（フォトショップ）を駆使してGIFアニメを作る方法とは？

2016年7月23日

最近は、アニメーションGIFという、写真やイラストを使って静止画の素材をアニメーションのように動かす画像形式が再び注目を集めています。いわゆるガラケーでは、動きのある絵文字などでよく使われていましたが、最近はアーティスティックなアニメーションGIFが、Webページに有効活用されているのです。
本日は、いつも使っているPhotoshopでアニメーションGIFを作成する方法をご紹介します。

GIFアニメを作る手順

ここから使用するPhotoshopのバージョンは「Photoshop CC」として、解説していきます。

（1）画像を用意する

GIFアニメに使用する画像を準備します。注意点としては、画像を同じサイズに統一しておきましょう。

（2）Photoshopを起動し、各レイヤーに画像を貼り付ける

Photoshopを立ち上げ、使用するすべての画像ファイルを開きます。この画像ファイルを一つのファイルにコピー＆ペーストしていきます。コピー＆ペーストすると画像がそれぞれのレイヤーに貼り付けられます。

（3）表示する順番の変更

表示する順番を変更する場合は、レイヤーウインドウに表示されているレイヤーをドラッグ＆ドロップすることで、順序を入れ替えることができます。一番下が最初に表示される映像となり、上に行くほど後の映像となります。印象的な構成となるよう、納得のいくまで配置を工夫してみましょう。

（3）タイムラインの操作

メニューバーから「ウインドウ」をクリックし、「タイムライン」を選択します。画面下にタイムラインのウインドウが表示されますので、画像の「▼」をクリックして、「フレームアニメーションを作成」を選択します。続いて「フレームアニメーションを作成」をクリックします。

（4）レイアーからフレームを作成する

タイムラインの設定ボタンをクリックし、メニューから「レイヤーからフレームを作成」を選択します。すると、ページ左下の「タイムライン」の表示に、レイヤーの各画像が横一列に並びます。

（5）各画像の表示時間を変更する

タイムラインの各画像の下には、表示される秒数が示してあります。この秒数を変更することで、アニメーションで表示される時間を変更することができます。秒数はリストから選ぶこともできますが、「その他」選択して数値を指定することも可能です。

（6）アニメーションを再生してみる

秒数の指定が終わったら、タイムラインの秒数のさらに下にある「再生」ボタンをクリックし、実際にアニメーションを動かしてみて、動作を確認しましょう。

（7）保存する

無事にアニメーションが動くことが確認できたら、この画像をアニメーションGIFとして保存しましょう。
「Web用に保存」を選択し、保存形式は「GIF」を選択します。また、画面右下の「アニメーション」の部分にて「ループオプション」を設定することができます。アニメを一度だけ流して、最後の映像で停止させたい場合は「一度」、最後まで再生したら、また最初から戻って繰り返しアニメを再生させたい場合は、「無限」を選択しましょう。
最後に画面右下の「保存」をクリックすれば、GIFアニメーションの完成です。