バナーづくりで役立ちそう!PhotoshopCCでGIFアニメーションを作る方法。

バナーづくりで役立ちそう!PhotoshopCCでGIFアニメーションを作る方法。
バナーづくりで役立ちそう!PhotoshopCCでGIFアニメーションを作る方法。

みなさんはGIFアニメを作ったことありますか?バナーでは今でも良く見かけるので、作ったことがある人も多いかと思いますが、機会がない人にはさっぱりなGIFアニメーション。PhotoshopでもGIFアニメーションを作れるようなので、防備録として記事にしてみました。以下の内容はPhotoshop CCでの作業なので、最近Creative CloudでPhotoshopを使い始めた、という人にも練習としてもおすすめです。

1.ひとまずPhotoshopを起動して、新規ドキュメントを作成します

Photoshop CCでは「タイムラインパネル」を使用してアニメーションを作ることができます。CS6も同じくタイムラインパネルを使うので、同じ作業だと思います。ひとまずPhotoshopを起動して新規ドキュメントを開きます。サイズなどは各自好きなサイズで構いません。

ひとまずPhotoshopを起動して、新規ドキュメントを作成します

2.タイムラインパネルを開きます

次にタイムラインパネルを開いておきます。上部メニューのウィンドウ>タイムラインをクリックすると、画面下にタイムラインパネルが開きます。このパネルの中に、アニメでいうコマを作っていって、アニメーションを作るという流れですね。ではでは実際に作っていきましょう。

タイムラインパネルを開きます

3.フレームを作成して、内容を作ります

タイムラインパネルの中に表示されているプルダウンメニューから「フレームアニメーションを作成」をクリックすると、1つ目のフレームが表示されるので、画像や文字などオブジェクとを配置して実際にグラフィックを作成します。今回は広告バナーで見るようなサンプルを作ってみました。

作成時に大事なことですが、後のフレームで使用する別のオブジェクトも先に作成しておき、ひとまず非表示にしておきます。

フレームを作成して、内容を作ります サンプルバナーの切り替え

4.切り替える画像を作ります

1つ目のフレームが完成したら、パネルの下にある紙のマークをクリックするとフレームが複製されます。2つ目のフレームが作成されたら、そこに切り替える内容を作っていきます。手順3を説明したとおり、1つ目のフレームで事前に表示させたいオブジェクトをすべて作成しておき、表示/非表示を切り替えて表示させるものを切り替えてください。

ここで注意したいのは、特定のオブジェクトの色を変える場合は「レイヤースタイル」で色を変更します。位置を変えたい場合は、オブジェクトをレイヤー上でそのまま移動させれば良いです。描画モードに関しても、使用して大丈夫です。

3つ目、4つ目とフレームを増やしたい場合は、同じくフレームを複製して作っていきます。

切り替える画像を作ります

5.ディレイ時間とループオプションを設定する

フレームの作成が終わったら、各フレームのディレイ時間を設定します。何秒後に切り替わるか、という設定ですね。「その他」を選べば好きな秒数を設定することができます。次にパネル下にある、通常時は「一番下」と表示されているプルダウンメニューから、ループオプションの設定をします。アニメーションを繰り返すか、繰り返さないかの設定ですね。「その他」を選べば、ディレイ時間と同じく回数を直接設定することができます。

ディレイ時間とループオプションを設定する

6.GIFでアニメーションを保存する

すべての設定が終わったら、ファイル>Web用に保存するを選んで、GIFアニメーションとして保存します。ファイル形式がGIF形式になっているのを確認して、保存しましょう。

GIFでアニメーションを保存する

7.GIFアニメの完成!

実際に保存したGIFアニメーションを開いて、動作を確認すれば完了です。

GIFアニメの完成!

まとめ

アニメのコマを作るような感じでできるので、慣れればさほど難しくないと思います。実際にやってみると、操作も大して難しくなかったのでPhotoshopの扱いにちょっと慣れた人だとすぐに出来ると思います。バナー作りでまだまだ役立ちそうな機能なので、覚えておけば役立ちそうですね。まだ使ったことがない人はぜひ試してみてください:)それではー!

関連記事を読む

バナーづくりで役立ちそう!PhotoshopCCでGIFアニメーションを作る方法。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]