はじめに
私は今まで、アニメーションGIFはFireworksで作成していました。
しかし、先日MacのOSをMojaveにしたところ、Fireworksが起動できなくなってしまいました。
何度起動しても「予期しない理由で終了しました」の表示。なんということでしょう。
2013年にAbobeからFireworksの開発終了が発表されていますから、遅かれ早かれ「脱Fireworks」は避けられない道。
そこで、PhotoshopでアニメーションGIFを作ってみると、あらびっくり！
簡単に作ることができましたので、ご紹介します。
フォトショップを使ったアニメーションGIFの作り方
【STEP1】連続画像を用意する
まずは、アニメーションで使用する連続画像を用意します。
連写で撮影した写真や、作成した画像など、なんでも構いませんが、全ての画像サイズは統一してください。
私は、illustratorで画像を作成しました。
バナーでよくある、「ココをクリック！」用のアニメーションをつくろうと思います。
この連続画像を、任意のフォルダに入れておきます。これで準備完了です。
【STEP2】Photoshopに連続画像を読み込む
ここからは、Photoshopをつかった作業になります。
Photoshopを起動し[メニューバー]にある[ファイル] ＞ [スクリプト] ＞[ファイルをレイヤーとして読み込み]を選択。
すると、[レイヤーを埋め込む]ポップアップが表示されます。
ポップアップ内の[使用]で[フォルダー]を選択。「参照」をクリックし、【STEP1】で作成した画像のフォルダを選択し、[OK]をクリックします。
【STEP3】タイムラインパネルを開く
[メニューバー]にある[ウィンドウ] ＞ [タイムライン] をクリックして、タイムラインパネルを開きます。
タイムラインパネル中央にある矢印ボタンをクリックして、[フレームアニメーションを作成]を選択。
次に[フレームアニメーションを作成]の文字部分をクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます。
アニメーションGIF作成のときに私が参考にしたサイトでは、
「矢印ボタンをクリックして[フレームアニメーションを作成]を選択します。ボタンをクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます」とだけ書いてありました。そのため私は、
「矢印で選択」
↓
「タイムラインパネル内に読み込んだ画像が表示される」
と思っていたのですが、本当は、
「矢印で選択」
↓
「［フレームアニメーションを作成］の文字部分（正確には、［フレームアニメーションを作成ボタン］）をクリック」←コレ！
↓
「タイムラインパネル内に読み込んだ画像が表示される」
の工程が必要。「ボタン」が意味するものを理解するのに、30分ほどかかってしまいました。
画像ソフトを使い慣れた方はすぐわかるのかな？？
こういうトラップにひっかかってしまうのは、初心者あるあるですね。
【STEP4】レイヤーをフレームアニメーションに変換する
タイムラインパネルの右上にあるメニューアイコンをクリックし、[レイヤーからフレームを作成]をクリックする。
すると、レイヤーパネル内のすべてのレイヤーが、タイムラインパネル上に表示されます。
左の画像から順番にアニメーションが再生されます。
もし順番が逆になっているときは、先ほどのタイムラインパネルのメニューアイコンをクリックして[フレームを入れ替え]を選択します。
【STEP5】アニメーションの表示秒数やループを設定する
タイムラインパネルに表示された画像の下にある[0秒]をクリックし、その画像を表示させる時間を変更（今回は、[1秒]に設定）。
また、パネル下部に表示された[無限]をクリックし、繰り返す回数を変更。
今回は[無限]に設定したため、これでアニメーションがループしてくれます。
タイムラインパネル下部にある再生ボタンをクリックして（あるいは、キーボードのスペースバーを押して）、アニメーションをプレビューします。
【STEP6】アニメーションGIFを書き出す
メニューバー[ファイル]＞[書き出し]＞[Web用に保存（従来）]をクリック。
プリセットメニューから[GIF 128ディザ]を選択。
カラーメニューから[256]を選択。
ループオプションメニューから[無限]を選択します。
そのほか、必要であれば、画像サイズの幅と高さを変更します。
最後に[保存]をクリックして、アニメーションGIFの保存先を指定します。
これで、作業は完了です！お疲れさまでした！
まとめ
PhotoshopでアニメーションGIFをつくるときは、準備した画像をレイヤーに読み込み、タイムラインパネルでアニメーションGIFに変換させる。
Fireworksにでの作成に比べて、直感的に作業できるのが印象的でした。
ぜひ、ご活用ください。
【STEP1】で、画像を1つのフォルダに入れたのは、ここでの作業をラクにするためです。
もしフォルダにいれていなかったら、[使用]で[ファイル]を選択→[参照]からShiftキーを押しながらすべてのファイルをクリックしなければなりません。
地味ですが手間がかかりますし、選択漏れをしてしまう可能性もあります。少しでもラクしましょう！