【WEBバナー】これで作れる!?広告業界人のためのWEBバナー作成講座~Photoshop編~


top

はじめに

こんにちは、WEBバナー作成界の社会人むーよしです!

今回は「手早く、それなりのクオリティで形にする」をテーマに、
Photoshopを使ったバナー作成方法について書いていきます!

cap00
Photoshop CS6を使用しています。

Photoshopを使う利点としては、ネット上にチュートリアル(作り方)が豊富という事と、テキスト変更や画像切り抜きが容易でスピーディーに作業が出来る点です。

Photoshopの詳細についてはこちらをご覧ください→購入ガイド

WEBバナー画像を作ろう!

WEBバナーとは他のWEBページを紹介するための画像の事です。
基本的には宣伝や広告のために利用されます。

WEB広告の仕事をされている方は誘導率とかデザインとかにこだわるのではないでしょうか。

cap23

一体何のバナーを作ればいいのか、どこの会社が出している商品なのか、
そもそもそれ商材なのか何なのか!!本当にそれクリックされるの!?なんなの!?

というわけで、そんな疑問だらけの世の中には負けずに、
今回はサノウラボブログのバナーを作っていきましょう。
用意するものは以下となります。

①枠線
②背景
③キャッチコピー
④商品画像
⑤企業ロゴ
⑥クリック誘導ボタン

これらが揃っていれば、バナーとしての機能を果たせるでしょう。
ただし、バナーによっては不要なものが出てくるのでいらない時は削りましょう。

①まずは、何も考えずに要素を配置

とりあえず、揃っている素材をPhotoShopにぶち込んでいくと効率的です。
また、むーよしが厳選したショートカットキーもご紹介いたしますので、
非常にスムーズに作業ができること間違いナシです!

バナーサイズはスタンダードな300×250ピクセルで制作します。

1.バナーサイズを設定しよう

PhotoShopを起動し、Ctrl + Nキーで新規作成。縦:300px、横250pxを設定します。
cap01

2.要素を並べてみよう

とにかく要素を並べましょう。いらないものは後で削除すれば大丈夫です。
ここではまだデザインの領域には踏み込みません。ただの作業です!

①枠線を作る

枠線の作り方はいくつかありますが、今回はバナーサイズ全体を塗り潰してから真ん中だけくり抜くという原始的な手法で作成してみましょう。

まず(半角の状態で)Gキーを押して、バケツツールを選択します。色は一旦黒にしておきます。
cap03

続いてMキーを押して、選択範囲ツールで1pxの枠を残すようにごっそり削除しましょう。
cap04

これで枠線が完成しました。このレイヤーを常に一番上にしておきましょう。

②キャッチコピーを作る

キャッチコピーはテキストツールで文字を打ち込むだけ!

フォントはPhotoshopをインストールすると勝手にインストールされる
「小塚ゴシック」を選びましょう。幅広く使えて、太さも選べて非常に便利なフォントです。

Tキーを押して、テキストツールを呼びだします。テキストを入れたい部分をクリックします。
cap05

あとはテキストを入力するだけです。簡単!

③ボタンを作る

「続きはWEBで!」や「詳細はコチラ!」などのクリックを誘導するボタンがあれば、
バナーをみた人に「あっ、これはクリック出来るんだな」という事を伝える事ができます。

ここではざっくりと、角丸の四角の上にテキストを配置していきます。

長方形ツールの上で左クリックを長押しすると、
角丸長方形ツールが選べるのでそれを選びます。
cap06

Photoshop上部にある入力欄で角丸の丸みを設定しましょう。ここでは10pxにします。
cap07

テキストツールで「ブログを読む」を入力します。色は白にします。
cap08

ここで、レイヤーを1つにまとめる事ができるグループ機能を使いましょう。
角丸とテキストを覆うようにマウスをドラッグして、二つのレイヤーを選択します。
この時、自動選択のチェックはオンにしておきましょう。

cap09

ctrl+Gを押してグループ化完了です。
cap10

これを行うと、ボタンというグループ(角丸とテキスト)の移動が可能になって、大変便利です。
名前の変更も行っておくと後ほど混乱せずにすみます。

また、グループ内の角丸とテキストは個別に動かす事が出来ます。

④画像を配置しよう

今回の商品はサノウラボブログです。

ブログのキャプチャ画像を使いましょう。
プリントスクリーンキーでデスクトップ全体をキャプチャします。

Photoshopに移って、ctrl+Vでペーストします。
cap12

Mキーで必要なところだけを選択し、Altを押しながらI→Pと押して切り取ります。
この時点でキャプチャした画像レイヤーの上で右クリックしてスマートオブジェクトにしましょう。

スマートオブジェクトにした時の大きさまでなら縮小・拡大をしても画像が劣化しません。

非常に使用頻度が高いので、覚えておきたいですね!

⑤背景画像を作ろう

背景はデザインに大きく影響がでてくるため、現段階では背景は設定しません。
先にレイアウトを組みましょう。

②レイアウトを整えよう

さて、画像を並べたらレイアウトを決めましょう。
レイアウトとは、綺麗に読みやすく見せるための作業の事です。
これが完了した後で色付け、微調整をしてバナーの完成となります。

1.文脈を意識してみよう

文章を組み立てる時、「誰が、いつ、どこで、何を、なぜ、どのように」とすると、
伝えやすい文章になると言われています。

このバナーでは、
「サノウラボがサノウラボブログという『サービス開発者へお役立ち情報をお届けするブログ』をやっています。」という事を伝えて、「ブログを読む」ボタンへと誘導していきます。

2.レイアウトしてみよう

まずは商品タイトル。「サノウラボブログ」ですね!
名前を覚えてもらうため、ロゴは大きめに設定してみましょうか。

「バウンディングボックス」を表示にチェックを入れます。
これは拡大・縮小をするための機能です。
画像では外れていますが、自動選択にもチェックを入れておきましょう。
cap14

予めスマートオブジェクトにしておいたロゴをクリック。
Shiftキーを押しながら拡大してみましょう。Shiftキーを押すと、均等に拡大することができます。
cap15

続いてキャッチコピー。これは読ませるくらいのレベルで良いでしょう。
テキストの場合はフォントで大きさを管理しましょう。
cap16

続いてボタンですが、文脈の締めという事もあるので右下に配置しましょう。
cap17

最後に商品画像やロゴをレイアウトが崩れないように配置しましょう。
cap18

③バナーをデザインしよう!

さて、長々と書いて参りましたがようやくバナーをデザインする工程にきました。

1.バナーの色を決めよう

本当は何色かを決める場合には、ちゃんと明確なイメージを組み立てる必要がありますが、
今回はサノウラボブログという決まったテーマがあるので、
ブログで使用されている赤、クリーム色、黒を上手く使っていこうと思います。

テーマは知的で何かを作っている感じ…を目指したいと思います。

2.背景を作ろう

背景はブログそのままのクリーム色にします。
今回は紙の画像を敷いて、色をクリーム色っぽく変えていこうと思います。

まず、紙のテクスチャ画像を置きます。
そして紙レイヤーを右クリックして、レイヤー効果を選びます。
cap19

レイヤー効果はそのレイヤーに影や枠線をつけたりできる超便利機能です。
今回は「カラーオーバーレイ」という選んだ色で塗り潰す機能を使ってみます。

元々の紙の色が茶色っぽいので少し薄めの肌色を混ぜましょう。
cap25

紙の色をクリーム色にしたいので、薄い肌色を選びます。
cap20

カラーオーバーレイ上で、描画モードを「カラー比較(明)」にします。
cap21

この描画モードは色の計算方法を変えて、色を合成する機能です。
色々いじってみて自分の好みのモードを選べばいいと思います。

パッと見では違いが良く分からないですねー。

これで背景は完成です。

3.色を設定していきます。

ここにきて、キャッチコピーやボタンの色付け・効果付けを行います。
実はもうレイアウトも済んでいるので色や効果を変えるだけでバナーが完成します。

商品画像であるブログのキャプチャが目立たないからちょっと大きく…。

cap22

全て「レイヤー効果」を用いて、境界線やグラデーション、光彩を使用して色を付け加えました。
もうそれっぽくなってきましたが、もう少し…何かが足りない…?

実はバナーデザインで大事なのは、隙間を作らないことです。
明らかに左上がスカスカなので、何か適当な画像を埋め込んで誤魔化していきます。

一流のデザイナーだったら、全てに理由をつけて説明ができる…!
しかし、デザイナーも人間。アイデアが思い浮かばなかったら勘に頼るしか。
サノウラボ、ブログ、知的、開発者…。とりあえず、鉛筆とか置いてみるか…?

cap23

それっぽくなりましたね!Photoshopのフィルタ機能を使用して…

cap24

こうやって遊んでも良いかもしれません。
ですが、ちょっとボカシすぎて分からないのでやめておきましょう。

神は細部に宿るようです。

バナー制作のまとめ

読み返してみたらかなりボリュームのある記事になってしまいました!
きっとここまで読んでくれた方はなんとなくバナー制作のコツが掴めたのではないでしょうか。

バナー制作は作る前と、レイアウト・デザインの工程が非常に重要になってきます。

何かを宣伝したい!と思っている人に制作側がどうゆう事するのかを説明する際に、
是非この記事を紹介して頂ければと思います。

 

ライター:むーよし
2010年から趣味で映像(主にミュージックビデオ)制作をはじめて、現在ではプロも愛用しているAdobe社のAfterEffects等のソフトウェアを用いて動画を作成し、動画投稿サイトに投稿したりして遊んでいます。音楽とアニメとゲームが好きなので、たぶんオタクです。

グラフハックアワード

Related Posts Plugin for WordPress, Blogger...