動きのあるバナー




バナーのサイズを決める

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ(ビットマップ形式の場合2倍で作成) ※推奨

320×100(Yahoo!/Googleスマホ(ビットマップ形式の場合2倍で作成) ※推奨


制作見本

f:id:CHOCOtan:20220403182244g:plain

Photoshopのアニメーション機能を使う事で、比較的簡単に動きのあるバナーが作れてしまいます。
複数のフレームを順番に表示することで、画像が動いているように見せています。
必要なフレームをレイヤー別に作り、レイヤーの表示/非表示を切り替えて表示させるものを替えていきます。

f:id:CHOCOtan:20220403182322j:plain

テキストレイヤーは全フレームで表示させておきたいので、常に表示の状態にしておきましょう。

www.nike.com

 

 

動画を使ったバナー

動画ファイルを読み込んで、GIFアニメバナーをつくります。

1、Photoshopで動画を読み込む。
[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。
こうする事で動画をレイヤーに読み込ませる事が出来、写真を補正するようにトーンカーブや色補正、変形処理などをかけることができます。

 

f:id:CHOCOtan:20220403182436p:plain

ただ、photoshopのバージョン(CS5)によっては32bit版でないと出来ないので注意が必要です。

32bitと64bitの切り替え方 for Win - Photoshopの情報集

 

32bitと64bitの切り替え方 for Mac - Photoshopの情報集

 

2、[ビデオをレイヤーに読み込み]をクリックするとダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。[頻度制限]を調整することで、GIFアニメバナーの容量を軽量化することができます。動画の長さは長くても10~15秒程度にし、[頻度制限]は5~10フレームおきに設定しないと、ものすごい数のレイヤーが出来てしまうので、注意が必要。だいたい30~50レイヤーくらいに抑えると良いと思います。

f:id:CHOCOtan:20220403182513p:plain

3、タイムラインにフレームを置く
あとはgifアニメと同じ要領でフレームを置いていき、必要なテキストレイヤーを作り、gif形式で保存します。

f:id:CHOCOtan:20220403182551p:plain

f:id:CHOCOtan:20220403182617g:plain

 

 

便利な素材

ferret-plus.com

ferret-plus.com