30分で出来る!プロっぽいバナーの作り方

かっこいいバナーの作り方

こんにちは~!本日は素人っぽくならないバナーの作り方にチャンレンジしたいと思います。

まずは素材(写真とテキスト)を用意

テキストの確認

今回、いただいたテキストが・・・

  • 子どもと行く!
  • GWお出かけスポット

写真はコチラが探したり、有料な場合は購入相談

バナーで使う写真はサイトのクオリティを左右する大きな要素です。
メインのとなる画像の人と、背景のボケ具合はかなり重要です。文字を入れる際に楽チンです。

オススメ写真素材

購入素材の場合

下記のPIXTAオススメ素材は、2015年 年間クリエイターランキングTOP100で堂々の1位。Ushicoさんの作品です。
どのシチューエーションもレベル高くて圧巻です。

PIXTA オススメカメラマン Ushicoさん

予算がないときはコチラ

Photo AC
今回はPhoto ACで用意した写真を使ってみます。
7dd57bd1160aaac513596699878df453_m

1.サイズの確認。広告などでよくある、350×250を作ろう

350×250にサイズを合わせます

バナーの作り方1

2.メイン人物を綺麗にします

対象人物の顔に影があるので、なるべくなくします。

バナーの作り方2

3.人物と文字をざっくり配置します

この時黄金比のバランスを考えて、1:1.618を考えると綺麗に見えます。また、【子どもと行く!GWお出かけスポット】のうち、どこが一番注目してほしいの文字なのか考えます。
今回は【GW】としてみました。クライアントさんに事前に聞いて置くとその後の修正が楽になります。
バナーの作り方3

4.テキストの接続詞は小さくします

テキストの接続詞は小さくし全体的にバランスを整えます。一番目立たせたい文字は、フォントをわざと太くします。ここまで、テクスチャを一切使わず配置のみです。これでもかなり整ってきました。

バナーの作り方4

5.文字に背景をいれたりバランスを整えます

場所のアイコン(icooon-monoより)をいれたり、色をつけて全体を整えます。
背景より少し濃い光彩を入れると安っぽくならないです。

バナーの作り方5

6.画像に奥行きをつけます

背景が同一色だと、画像の奥行きがなくのっぺりとした印象になります。そこで背景に雲などを入れることでまとまりが付きます。

06banner

7.背景がある場合は、ぼかす

背景がある場合は、ぼかすとそれらしくなりますよ~。文字の背景は、写真の背景に対して暗かったので彩度をあげています。

07banner

30分でバナーを作るときのポイント

  • テキストでどこを一番強調したいか事前に聞く
  • 写真は超大事
  • 全体のバランスに黄金比を使う
  • テクスチャはオマケ