こんにちはayumiです。
最近、初めてgifアニメーションを作成する機会があったのでご紹介いたします。gifアニメーションといえばさまざまな場面で活用されていますが、今回はバナーで使用しています！
そもそもgifって何？
「gif」は画像ファイルのひとつで、「Graphics Interchange Format」の略称です。
こんな風に動画のように動いている画像を目にしたことがあるのではないでしょうか？gifは画像を連続表示させることで、パラパラ漫画のようにまるで動いているかのように表現することができます。
バナーやWebサイトなどもう少し目立たせたい・派手にしたい、なんて時に使用すれば一気に華やかになります。
Photoshopでの作成方法
gifアニメーションは、Webブラウザ上で無料で作成できるサイトやツールもありますが、今回はPhotoshopで制作してみました。制作にあたり、Adobe公式YouTubeの動画を参考にしました。1分で解説されているのでサクッと学べます◎
今回は背景色と“NEW”オブジェクトの色を変化させていきたいと思います。背景が赤・青・緑の3パターンを用意しました。パラパラ漫画の要領で、変化させたいパーツ分の要素の用意が必要です。各素材は別々のレイヤーに配置しておきましょう。
ウィンドウ＞タイムラインでパネルを表示させます。
①「フレームアニメーションを作成」をクリック→②のメニューバーをクリックし「レイヤーからフレームを作成」をクリックすると、各レイヤーに配置した素材がセットされます。
ディレイ（遅れて表示する）の秒数を0.1秒、1秒など指定します。
再生ボタンをクリックするとアニメーションのプレビューが確認できます。秒数の調整等を行います。
完成したらファイル＞書き出し＞Web用に保存（従来）からファイルを書き出します。
gifを使ったバナーの参考になるサイト
gifを使用したバナーを集めた参考になるサイトもあります。どんな動きを取り入れれば目立たせたいポイントをアピールできるのか、勉強になります！
うまく取り入れていきたいgifアニメーション
今回紹介したgifアニメーションは配色が変化するだけのものでしたが、イラストを動かしたり文字の装飾に変化を付けたりといったものを制作することが可能です。他にもgifが作れるツールを活用し、gifアニメーションの無限の可能性に挑戦してみたいと思います◎
