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

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

前回、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アニメにしてみたのでご覧ください。

Feature

Latest

Category

Archives

Please feel free to contact us