WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

動きのあるバナー

バナーのサイズを決める

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

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

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

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

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

gifアニメを使ったバナー

f:id:yachin29:20160905035438g:plain


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

f:id:yachin29:20160905032248j:plain

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


blogs.adobe.com


動画を使ったバナー

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

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

f:id:yachin29:20160901142444p:plain

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

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


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


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


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

f:id:yachin29:20160901142951p:plain


f:id:yachin29:20160905034903g:plain