前回、GIFアニメーションについてご紹介いたしました。

今回は実際にGIFアニメを作っていきます！
GIFアニメ作成するには、簡単に作成できるサイトやアプリもありますが、今回はPhotohopを使って作成していきます。
難しそう？？と思いがちですが、実はPhotoshopの機能で簡単にできるんです。

PhotoshopでGIFアニメを作ってみよう

今回は、こちらのsaleバナーを作っていきます。

step1.デザインを決める

どんなものを作るか考えましょう。
ここが決まっていないと、スタートできません！
今回は、簡単に『背景色が変わるsaleバナー』をイメージして作ってみましょう。

step2.素材を用意

パラパラ漫画のように一コマ一コマを用意していきます。
今回は背景色2色を切り替えていくので、
２コマデザインを用意しました。

step3.素材を重ねる

素材を順番に、レイヤーに重ねていきます。
今回の場合はどちらの素材が先になっても問題ないのですが、レイヤーの順番の下が始まり、上が終わりとなるように重ねていきましょう。

step4.タイムラインからフレームアニメーションを作成

用意した素材をGIFアニメーションにしていきます。
一コマ目となるレイヤーを表示し、ウインドウ＞タイムラインを選択します

タイムラインという作業環境が表示され、タイムラインの中央に『ビデオタイムラインを作成』と『フレームアニメーションを作成』というドロップボタンから『フレームアニメーションを作成』を選択クリックします。

step5.フレームを作成

1コマ＝１フレームを作成していきます。
フレームアニメーションを作成を選択すると現在表示されているレイヤーがフレームとして表示されます。
そして、2コマ目を作成することは、「選択したフレームを複製」をクリックすると複製されます。

複製したフレームを選択した状態で、次に表示させたいレイヤーを表示させます。

2コマ分のフレームができました。

ここから、各フレームの表示時間を設定したり（今回は0.5)

フレームアニメーションの再生回数を設定してゆきます。(今回は無限)

step5.GIFアニメを保存

全て出来上がったら、最後に『GIF』に書き出します。
『ファイル』 ＞『書き出し』 ＞ 『Web用』に保存を選択します。
この時、保存形式はGIFにしましょう。（そうしないとアニメーションになりませんので・・・。）

完成です！

このように手順を覚えてしまえば、簡単にGIFアニメを作ることができます。
Webサイトの一番に目につくトップの画像や、Webサイトのバナーに使用すると、より目を引くものになりそうですよね。
少しのアイデアで、古い技法の『GIFアニメーション』もオシャレな素敵なものにすることができます。

是非、今だからこそ活用してみてはいかがでしょうか？

最後に・・・

国宝松本城をGIFアニメにしてみたのでご覧ください。