クリックしてもらえるバナーの作り方実践編4

このエントリーをはてなブックマークに追加

フォトショップでバナーをつくっていきます。 バナー作成講座 作り方は人それそれだと思いますが、私の場合、頭の中でだいたいのレイアウトを考えてから、フォトショップで写真と文字を適当に入れ、バランスを見ながら色をつけたりレイアウトを変えたり装飾をいれたりします。 これがフォトショップに写真とテキストを入れた最初の状態です↓ バナー作成レイアウト前 このようなバナーのデザインは慣れが大きいと思います。 最初は、大手企業のホームページのバナーやヤフーの広告にのっているバナーなどを参考にすると良いでしょう。 ここでは、バナーを作る時に気をつけることや、フォトショップの機能で知っておくと便利なものを紹介します。  

色を使いすぎない。

色は1~2色におさえましょう。 サンプルバナーの場合は、赤1色のみを使っています。 たくさん色を使うと写真を殺してしまいますし、統一感もなくなります。 カラフルなバナーは、ある程度バナー作りに慣れてからにしましょう。

目的や商品に合った色を使う

一般的に赤は購買意欲や食欲をかきたてる色だといわれています。 このように、バナーの目的にあった色を選びましょう。 色と同様、テキストのフォントも目的にあった雰囲気のものを選んでください。 サンプルバナーの場合、「ドーン」と伝えたかったのでゴシック体の太いものを選んでいます。

写真をテキストや装飾で殺さない

写真の大事な部分にテキストや装飾をかけて台無しにしないようにしましょう。 サンプルバナーで言うと、肉の中央部分のあたりの美味しそうな箇所です。 テキストは、フォトショップの文字の「サイズ」「行間」「文字と文字の間」を調整するといいでしょう。 フォトショップでは下図の部分で調整できます。(画像クリックで大きな画像が表示されます。) フォトショップ文字の設定  テキストを選択した状態で①の部分でサイズや色やフォントを選ぶことができます。 さらに、②を押すと③が表示されますので、ここで行間や文字の間を調整してください。 写真にテキストが重なって読みにくくなった場合は、テキストにフチをつけるとはっきりします。 これは、フォトショップの「レイヤー効果」を使うと簡単です。 まず、レイヤーの中から、効果をかけるレイヤーを選んでダブルクリックします。 レイヤー効果1 すると、下のように表示されますので、「光彩(外側)」を選んで、青色で囲った部分を調整し、最後に「OK」ボタンを押すと、サンプルバナーのような白フチができます。 レイヤー効果2 レイヤー効果は、光彩(外側)以外のものも使えるので、フォトショップで色々試してください。 バナーの雰囲気に合わせて、光彩の色を変えたり、ぼんやりとしたフチにしたりするのもいいでしょう。  ちょっと長くなってしまったので、矢印を作る時に便利な機能と最後の仕上げについてはまた次回に!
このエントリーをはてなブックマークに追加

コメント

コメントはまだありません。

コメントの投稿

トラックバック: http://miraiyanet.com/day/blog/2011/03/06/bn-4/trackback/

ホームページ制作&運用講座

ページトップへ