BLOG

長く広いGIFアニメの世界 〜GIFアニメを作ってみよう〜

2016.06.20  Wrote by Misaki Nakazawa

 

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

 

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

 

 

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

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

step1.デザインを決める

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

 

 

step2.素材を用意

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

 

 

 

 

 

step3.素材を重ねる

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

 

 

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

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

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

 

step5.フレームを作成

1コマ=1フレームを作成していきます。

フレームアニメーションを作成を選択すると現在表示されているレイヤーがフレームとして表示されます。

そして、2コマ目を作成することは、「選択したフレームを複製」をクリックすると複製されます。

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

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

 

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

 

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

 

 

step5.GIFアニメを保存

全て出来上がったら、最後に『GIF』に書き出します。

『ファイル』 >『書き出し』 > 『Web用』に保存を選択します。

この時、保存形式はGIFにしましょう。(そうしないとアニメーションになりませんので・・・。)

 

 

 

完成です!

 

 

このように手順を覚えてしまえば、簡単にGIFアニメを作ることができます。

Webサイトの一番に目につくトップの画像や、Webサイトのバナーに使用すると、より目を引くものになりそうですよね。

少しのアイデアで、古い技法の『GIFアニメーション』もオシャレな素敵なものにすることができます。

 

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

 

 

 

最後に・・・

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

その他の記事を見る