【初心者向け】フォトショップでアニメーションGIFをつくる

アニメーションGIF作成_17

はじめに

私は今まで、アニメーションGIFはFireworksで作成していました。
しかし、先日MacのOSをMojaveにしたところ、Fireworksが起動できなくなってしまいました。
何度起動しても「予期しない理由で終了しました」の表示。なんということでしょう。

2013年にAbobeからFireworksの開発終了が発表されていますから、遅かれ早かれ「脱Fireworks」は避けられない道。
そこで、PhotoshopでアニメーションGIFを作ってみると、あらびっくり!
簡単に作ることができましたので、ご紹介します。

フォトショップを使ったアニメーションGIFの作り方

【STEP1】連続画像を用意する

まずは、アニメーションで使用する連続画像を用意します。
連写で撮影した写真や、作成した画像など、なんでも構いませんが、全ての画像サイズは統一してください
私は、illustratorで画像を作成しました。
バナーでよくある、「ココをクリック!」用のアニメーションをつくろうと思います。

アニメーションGIF作成_02

この連続画像を、任意のフォルダに入れておきます。これで準備完了です。

【STEP2】Photoshopに連続画像を読み込む

ここからは、Photoshopをつかった作業になります。
Photoshopを起動し[メニューバー]にある[ファイル] > [スクリプト] >[ファイルをレイヤーとして読み込み]を選択。

アニメーションGIF作成_03

すると、[レイヤーを埋め込む]ポップアップが表示されます。
ポップアップ内の[使用]で[フォルダー]を選択。「参照」をクリックし、【STEP1】で作成した画像のフォルダを選択し、[OK]をクリックします。

アニメーションGIF作成_04
末富 知穂

【STEP1】で、画像を1つのフォルダに入れたのは、ここでの作業をラクにするためです。
もしフォルダにいれていなかったら、[使用]で[ファイル]を選択→[参照]からShiftキーを押しながらすべてのファイルをクリックしなければなりません。
地味ですが手間がかかりますし、選択漏れをしてしまう可能性もあります。少しでもラクしましょう!

[OK]をクリックすると、右側の[レイヤーパネル]に、選択した画像がすべて表示されます。この一連のレイヤーが、アニメーションGIFフレームになります。

アニメーションGIF作成_05

【STEP3】タイムラインパネルを開く

[メニューバー]にある[ウィンドウ] > [タイムライン] をクリックして、タイムラインパネルを開きます。

アニメーションGIF作成_06

タイムラインパネル中央にある矢印ボタンをクリックして、[フレームアニメーションを作成]を選択

アニメーションGIF作成_07

次に[フレームアニメーションを作成]の文字部分をクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます。

アニメーションGIF作成_08
末富 知穂

アニメーションGIF作成のときに私が参考にしたサイトでは、
「矢印ボタンをクリックして[フレームアニメーションを作成]を選択します。ボタンをクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます」とだけ書いてありました。そのため私は、

「矢印で選択」

「タイムラインパネル内に読み込んだ画像が表示される」

と思っていたのですが、本当は、

「矢印で選択」

「[フレームアニメーションを作成]の文字部分(正確には、[フレームアニメーションを作成ボタン])をクリック」←コレ!

「タイムラインパネル内に読み込んだ画像が表示される」

の工程が必要。「ボタン」が意味するものを理解するのに、30分ほどかかってしまいました。
画像ソフトを使い慣れた方はすぐわかるのかな??
こういうトラップにひっかかってしまうのは、初心者あるあるですね。

【STEP4】レイヤーをフレームアニメーションに変換する

タイムラインパネルの右上にあるメニューアイコンをクリックし、[レイヤーからフレームを作成]をクリックする。

アニメーションGIF作成_09

すると、レイヤーパネル内のすべてのレイヤーが、タイムラインパネル上に表示されます。

アニメーションGIF作成_10

左の画像から順番にアニメーションが再生されます。
もし順番が逆になっているときは、先ほどのタイムラインパネルのメニューアイコンをクリックして[フレームを入れ替え]を選択します。

アニメーションGIF作成_11

【STEP5】アニメーションの表示秒数やループを設定する

タイムラインパネルに表示された画像の下にある[0秒]をクリックし、その画像を表示させる時間を変更(今回は、[1秒]に設定)。
また、パネル下部に表示された[無限]をクリックし、繰り返す回数を変更
今回は[無限]に設定したため、これでアニメーションがループしてくれます。

アニメーションGIF作成_12

タイムラインパネル下部にある再生ボタンをクリックして(あるいは、キーボードのスペースバーを押して)、アニメーションをプレビューします。

アニメーションGIF作成_13

【STEP6】アニメーションGIFを書き出す

メニューバー[ファイル]>[書き出し]>[Web用に保存(従来)]をクリック

アニメーションGIF作成_14

プリセットメニューから[GIF 128ディザ]を選択。
カラーメニューから[256]を選択。
ループオプションメニューから[無限]を選択
します。
そのほか、必要であれば、画像サイズの幅と高さを変更します。

最後に[保存]をクリックして、アニメーションGIFの保存先を指定します。

アニメーションGIF作成_15

これで、作業は完了です!お疲れさまでした!

アニメーションGIF作成_16

まとめ

PhotoshopでアニメーションGIFをつくるときは、準備した画像をレイヤーに読み込み、タイムラインパネルでアニメーションGIFに変換させる。
Fireworksにでの作成に比べて、直感的に作業できるのが印象的でした。

ぜひ、ご活用ください。

アニメーションGIF作成_17

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA