デザイナ向け就活用ポートフォリオ用のイラレテンプレートを無料で配布中です!

【Photoshop】フォトショでバナー広告を作る方法を詳しく解説

この記事を読むのに必要な時間は約 25 分です。

Photoshop(フォトショップ)を使ってバナー広告を作る方法を初心者の方にも分かりやすく解説します。サンプルを例に、画像補正や文字入力、デザイン・レイアウトを順に解説します。
フォトショでよく使う機能を網羅的に学べますので、フォトショ初心者の方にオススメの記事です!

左図のようなバナーを作る方法です。よくありますよね、WEB広告のバナー。構成からデザイン制作まで一貫して作れるようになると職場で貴方の需要が高まる事間違いなしです。
フォトショ初心者、ノンデザイナーの方にも分かりやすく解説しておりますので是非マスターしてください!

構成を考える

A4の紙やチラシの裏等にバナー広告のラフを描きます。WEBデザイナー養成講座のバナーをイメージして作成しました。汚い字で全然OK!ざっくりで構わないのでデザイン制作前に構成ラフを手書きで作成しておくと効率的に進められます。
尚、今回作成するバナーのサイズは幅600px高さ500pxを想定しています。

背景写真の素材を探す

背景用の画像を探します。今回は左図のノートパソコンを触っている女性の写真素材を使いたいと思います。
ちなみに今回使用した画像はコチラです。無料のSmallサイズで問題ありません。
MEMO
無料フォトストックサイトを紹介しておりますので、お好きな画像を探して作ってみても良いと思います。

フォトショで仕上がりサイズのキャンバスを作成


STEP.1
新規ドキュメントの作成
Photoshopを立ち上げると上記のような画面が表示されます。
左端に[ 新規作成 ]のボタンがあるのでクリックします。

STEP.2
新規ドキュメントの設定
新規ドキュメントの作成画面が表示されます。
[ Web ] → [ Web一般 ] → [ 作成 ]で新規ドキュメントを作成してみます。

STEP.3
プリセットの詳細
プリセットの詳細を設定します。

幅:600px
高さ:500px
解像度:72
カラーモード:RGBカラー
アートボード:チェックを外す

設定が完了したら[ 作成 ]をクリックします。


FINISH
完成
幅600px、高さ500px、解像度72の新規ドキュメントが完成しました。

おまけ
解像度のチェック
念のため[ Ctrl + Alt + I ]で解像度をチェックしておきましょう。
画面上部の[ イメージ ] → [ 画像解像度 ]からでも確認ができます。よく使うのでショートカットがオススメ!

MEMO
新規キャンバスの設定について詳しく解説しておりますので是非ご覧ください。

画像を配置、反転、色の補正をする


STEP.1
画像を配置する
ドラッグ&ドロップで画像をキャンバスに配置します。画像の大きさを変えるには[ Ctrl + T ]を押して変形モードにし、好みの大きさに変形します。
下記で変形の挙動を変更する方法を記載しております。
PhotoshopCC2019,CC2020における「変形」の挙動を2018以前に戻す方法

STEP.2
必要なら画像を反転
画像を反転さたい場合は画面上部の[ 編集 ] → [ 変形(A) ] → [ 水平方向に反転(H) ]を適用します。アクティブレイヤーのみ反転されます。
バウンディングボックスの変形で反転させると比率が狂うのでオススメできません。

STEP.3
色を補正する
少し写真の色が悪いので補正を入れます。調整レイヤーを追加して補正しましょう。
調整レイヤーの詳しい使い方は下記で確認できます。【Photoshop】フォトショの調整レイヤーを徹底解説

FINISH
写真の補正完了
写真の補正ができました。

文字を入力する


STEP.1
文字を入力する
次は文字を入力します。[ T ]を押して[ 文字ツール ]を選択します。
画面をクリックし、文字を入力します。入力が完了したら画面上部の[ ]を押して入力を確定させます。

STEP.2
文字を変更する
お好みで文字を変更してみましょう。サンプルは「新ゴ」を使っています。「小塚ゴシック」や「游ゴシック」等を利用するのも良いでしょう。

STEP.3
サイズを変更する
文字サイズを変更してみましょう。全て同じサイズだと強弱が無い絵になりますので、情報の重要度によって文字サイズに強弱を付けます。

STEP.4
フォントファミリーを変更する
せっかくなのでフォントファミリーも変更してみましょう。同じフォントでも太さのちがうものや斜体など、複数収録されているものがあります。目立たせたい文字は太く、そうでない文字は細いフォントを選択してさらに強弱を付けてみましょう。

FINISH
一旦完成
最後に文字の色を変えてみましょう。

文字の背景と文字の色を変更する


STEP.1
シェイプで背景を描く
文字の背景を作成します。[ 長方形ツール(U) ]を選択し、ドラッグして文字の下に長方形を描きます。
シェイプになっている事を確認してください。画面左上でシェイプ、パス、ピクセルから選択できます。

STEP.2
色を変える
画面上部の[ 塗り ]をクリックし、虹色の箱アイコンをクリックし、カラーピッカーから色を選択します。
線の設定は[ 無し ]にしておきましょう。赤の斜線アイコンで[ 無し ]にできます。

STEP.3
アンカーポイントを編集して変形する
作成したシェイプのレイヤーをアクティブにしたまま、[ A ]を押して[ パスの選択ツール(A) ]に変更します。アンカーポイントを選択し、アンカーポイントを移動させると長方形の形を変えることができます。

FINISH
他の文字の背景も作って完成
同様の手順で他の文字の背景も作成しましょう。

レイヤー整理はされてますか?
ある程度の要素が増えてきましたが、レイヤーは整理されているでしょうか?レイヤーの順番、名前、必要ならグループ化をしたり、制作を進めながらレイヤー整理もしておきましょう。未整理のまま制作を進めるとぐちゃぐちゃになって制作の効率が悪くなってしまいます。

レイヤー操作について詳しくは下記で解説しておりますのでご覧ください。【Photoshop】フォトショのレイヤーを徹底解説

あしらいを作成する

他の色味やちょっとしたあしらいが欲しいのでシェイプで作成します。あしらいはグループ化してまとめておくと便利です。
MEMO
シェイプの基本的な使い方や無料&商用利用可能なカスタムシェイプの紹介をしておりますのでご覧ください。

完成!

最後に全体の微調整を入れてバナー広告の完成です!おつかれさまでした!
WEB担当者やデザイナーでなくても、バナー広告を作れるくらいのフォトショ知識を持っていると重宝されますよ!
左図はサンプルのレイヤー構成です。
名前を変更し、並び順を整理しておきましょう。グループ化やレイヤーの色替えを使ったりして整理するのも良いでしょう。

レイヤー操作については下記で詳しく解説しておりますので是非ご覧ください。【Photoshop】フォトショのレイヤーを徹底解説

バナー背景が白く同化している個所が気になる場合は、お好みでバナーの周囲に薄く罫線を入れてみるのも良いと思います。

サンプルのPSDをダウンロード

fantiaでバナーのサンプルPSDを配布中です。
サンプルPSDを見ながら当サイトで作り方を確認しながら進める、自身で作ってからサンプルPSDを確認、素材として使用といった活用方法ができます。よかったらご活用ください!

サイズ違いのバナーを1つのPSDで作成するには?

同じ要素でGDN(Google ディスプレイ ネットワーク)やYDN(Yahoo!ディスプレイアドネットワーク)に向けたWEB広告バナーを複数種類作成する際に、1つのPSDで作る方が効率的に作れます。下記記事で具体的な作り方からスライスの設定、書き出し方法などを前編・後編に渡って徹底解説しております。サンプルPSDも無料で配布しておりますので是非ご覧ください!

オススメのデザイン書

デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。さらっと読むだけでもすごく勉強になるのでオススメですよ。作業PCの隣に並べておくと迷ったときに便利です。WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。

まとめ

以上、バナー広告の作り方の手順についてでした。
キャンバスサイズの指定、画像の配置と補正、文字入力と文字編集、背景やあしらいの作成、バナー制作でよく使う機能を一通り盛り込んだ内容となっております。これらの操作はフォトショップを始められたばかりの方にオススメの内容なので、新たにオリジナルバナーを作ってみるとよりフォトショの知識が深まる事間違いありません。練習がてらに色々作ってみましょう!

ではまた!

目次一覧
ゼロから始めるシリーズ目次
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記から。