初心者のための動画作成講座|仕事で使える映像制作 初心者のための動画作成講座

ホーム動画の作成 > (8)動画っぽいバナーの作り方

動画っぽいバナーの作り方

メルマガ vol.8 動画っぽいバナーの作り方

※メルマガから一部抜粋して掲載しています。

動画っぽいWEBバナーの作り方

WEBサイトの中にあるバナー広告を作りたいと考えたときに、 普通に静止画でいく方法もありますが、 これを動画っぽく作る方法をご紹介します。

この手の動くバナーはGIFアニメというやつか、 FLASHで作る場合が多いのですが、 今回はGIFアニメで作る方法を説明してみます。

GIFアニメというのは、いわゆるパラパラマンガみたいなもので、 静止画が一定の時間でパラパラ切り替わるように作ります。 パラパラのタイミングを調整することで、 動画っぽい作りに見せる事ができるわけです。

サンプルとして、 バナーを作ってみましたので、こちらをご覧ください。

今回はフォトショップエレメンツ7を使う方法で 説明したいと思います。

1)新規ファイルを作ります

   まず、新規作成してバナーのサイズのファイルを作ります。
   WEB用なので、解像度は72ppiで十分です。
   画角は320×180にしました。
   小さいですが、ハイビジョンテレビの画角比率(16:9)と同じです。

2)それぞれのカットの画を作ります
   次に1枚目の画像から作って行きます。
   僕は4枚作りました。
   ちなみに、シルエット素材は
   エムエムジークリエイティブネットさんから頂きました。
   ありがとうございます。

3)GIFアニメ化する
   最後にファイル→WEB用に保存を選びます。
   この時に、保存形式をGIFにして、アニメーションにチェックを入れます。
   すると右下の秒数を変えられるようになるので、1秒を選択します。

   これでほぼ完成です。
   画面右下の地球っぽいマークをクリックして動作を確認してください。
   満足が行くデキに仕上がっていれば書き出して出来上がりです。

4)タイミングを調整する
   ちなみに僕は4つ目のレイヤーをコピーして2枚に増やしています。
   こうする事で、1秒、1秒、1秒、2秒の間隔を作っているわけです。

GIFアニメは画像ファイルとして扱えるので処理が楽な上、 ファイルサイズも小さめで、WEBの担当者にも喜ばれるので、 古典的な手ですが今だに重宝している方法です。




 

メルマガへの登録は以下のフォームをご利用下さい。

メルマガ購読・解除
仕事で使える映像制作
読者購読規約
>> バックナンバーpowered by まぐまぐ!
 

 

カスタム検索

ニュース

お問合せ

copyright 仕事で使える映像制作 Since 2010