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

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

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

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

この記事の目次

構成を考える

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

背景写真の素材を探す

背景用の画像を探します。今回は左図のノートパソコンを触っている女性の写真素材を使いたいと思います。
ちなみに今回使用した画像はコチラです。無料のSmallサイズで問題ありません。

MEMO

【無料・商用利用可】写真＆画像をフリーで使える素材サイト16選+α 2020年版

無料フォトストックサイトを紹介しておりますので、お好きな画像を探して作ってみても良いと思います。

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

STEP.1

新規ドキュメントの作成

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

STEP.2

新規ドキュメントの設定

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

STEP.3

プリセットの詳細

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

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

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

FINISH

完成

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

おまけ

解像度のチェック

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

MEMO

【Photoshop】フォトショの操作画面、新規作成と保存、各種ファイル形式について詳しく解説

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

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

STEP.1

画像を配置する

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

PhotoshopCC2019における「変形」の挙動を2018以前に戻す方法

STEP.2

必要なら画像を反転

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

STEP.3

色を補正する

少し写真の色が悪いので補正を入れます。調整レイヤーを追加して補正しましょう。
調整レイヤーの詳しい使い方は下記で確認できます。

【Photoshop】フォトショの調整レイヤーを徹底解説

FINISH

写真の補正完了

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

文字を入力する

STEP.1

文字を入力する

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

STEP.2

文字を変更する

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

STEP.3

サイズを変更する

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

STEP.4

フォントファミリーを変更する

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

FINISH

一旦完成

最後に文字の色を変えてみましょう。

MEMO

文字についてより詳しく学びたい方は下記で詳しく解説しておりますのでご覧ください。

【Photoshop】フォトショの文字ツールの使い方を徹底解説

【Photoshop】フォトショの文字パネルの機能と使い方を徹底解説

【Photoshop】フォトショの段落パネルの機能と使い方を徹底解説

【Photoshop】縦書き（縦組み）の欧文を回転させる方法

【Photoshop】文字ツールの「Lorem ipsum」を消す方法

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

STEP.1

シェイプで背景を描く

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

STEP.2

色を変える

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

STEP.3

アンカーポイントを編集して変形する

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

FINISH

他の文字の背景も作って完成

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

レイヤー整理はされてますか？

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

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

あしらいを作成する

他の色味やちょっとしたあしらいが欲しいのでシェイプで作成します。あしらいはグループ化してまとめておくと便利です。

MEMO

シェイプの基本的な使い方や無料＆商用利用可能なカスタムシェイプの紹介をしておりますのでご覧ください。

【Photoshop】フォトショのシェイプツールの使い方・編集方法を徹底解説

【無料・商用可】Photoshopのカスタムシェイプ46選【2020年度版】

完成！

最後に全体の微調整を入れてバナー広告の完成です！おつかれさまでした！
WEB担当者やデザイナーでなくても、バナー広告を作れるくらいのフォトショ知識を持っていると重宝されますよ！

左図はサンプルのレイヤー構成です。
名前を変更し、並び順を整理しておきましょう。グループ化やレイヤーの色替えを使ったりして整理するのも良いでしょう。

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

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

まとめ

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

ではまた！

ゼロから始めるPhotoshop目次