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

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

Photoshop（フォトショップ）を使ってバナー広告を作る方法を初心者の方にも分かりやすく解説します。
サンプルを例に、画像補正や文字入力、デザイン・レイアウトを順に解説します。

フォトショでよく使う機能を網羅的に学べますので、フォトショ初心者の方にオススメの記事です！

では早速始めていきましょう！

左図のようなバナーを作る方法です。
よくありますよね、WEB広告のバナー。

構成からデザイン制作まで一貫して作れるようになると職場で貴方の需要が高まる事間違いなしです。

フォトショ初心者、ノンデザイナーの方にも分かりやすく解説しておりますので是非マスターしてください！

この記事の目次

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
公式サイトからダウンロードしておきましょう！

なおPhotoshop（フォトショップ）の導入方法の詳細はコチラで解説しています。

構成を考える

A4の紙やチラシの裏等にバナー広告のラフを描きます。WEBデザイナー養成講座のバナーをイメージして作成しました。

汚い字で全然OK！
ざっくりで構わないのでデザイン制作前に構成ラフを手書きで作成しておくと効率的に進められます。

尚、今回作成するバナーのサイズは幅600px高さ500pxを想定しています。

600px x 500pxの理由

YDN（ヤフーディスプレイアドネットワーク）の主な広告は600px x 500px
GDN（Googleディスプレイネットワーク）の主な広告は300px x 250px
縦横比が同じで流用が簡単という理由から600px x 500pxでの制作を行います。

背景写真の素材を探す

背景用の画像を探します。
今回は左図のノートパソコンを触っている女性の写真素材を使いたいと思います。

ちなみに今回使用した画像はコチラです。
無料のSmallサイズで問題ありません。

MEMO

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

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

キャンバスを作成

STEP.1

新規ドキュメントの作成

Photoshopを立ち上げると上記のような画面が表示されます。

左端に [ 新規作成 ] のボタンがあるのでクリックします。
ちなみにショートカットは [ Ctrl + N ] です。

STEP.2

新規ドキュメントの設定

新規ドキュメントの作成画面が表示されます。

[ Web ] → [ Web一般 ] → [ 作成 ] で新規ドキュメントを作成してみます。

STEP.3

プリセットの詳細

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

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

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

FINISH

完成

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

おまけ

解像度のチェック

念のため [ Ctrl + Alt + I ] で解像度をチェックしておきましょう。

画面上部の [ イメージ ] → [ 画像解像度 ] からでも確認ができます。

よく使うのでショートカットがオススメ！

MATCHBOX

ポートフォリオ制作&転職を最速で実現

MATCHBOX はマイナビクリエイターが提供している高品質なポートフォリオを無料で作成できるサービスです。

作品とテキストを準備するだけで簡単にポートフォリオが作成できます。PDFに出力できるので紙媒体とWeb媒体の両方を超簡単に作成可能！

無料で使えるMATCHBOX を活用し最短でポートフォリオ制作とクリエイティブ業界への転職を実現しましょう。

MEMO

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

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

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

STEP.1

画像を配置する

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

下記で変形の挙動を変更する方法を記載してます。

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

STEP.2

必要なら画像を反転

画像を反転さたい場合は画面上部の [ 編集 ] → [ 変形(A) ] → [ 水平方向に反転(H) ] を適用します。

アクティブレイヤーのみ反転されます。

バウンディングボックスの変形で反転させると比率が狂うのでオススメできません。

STEP.3

色を補正する

少し写真の色が悪いので補正を入れます。
調整レイヤーを追加して補正しましょう。

調整レイヤーの詳しい使い方は下記で確認できます。

【Photoshop】フォトショの調整レイヤーの使い方と写真補正の方法

FINISH

写真の補正完了

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

テックキャンプデザイナー転職

最速でデザインについて学習&転職

本気で未経験からプロのデザイナーに転職を考えられている方はテックキャンプデザイナー転職がおすすめです。

独学は時間がかかる割に非効率的な学習になりがちです。現役デザイナーのプロによる授業、転職を見据えた実践的なカリキュラム、手厚い転職サポートで短時間で転職を成功させましょう。
万が一転職が成功しなかった場合は受講料が全額返金されるので安心ですよ。

文字を入力する

STEP.1

文字を入力する

次は文字を入力します。

[ T ] を押して [ 文字ツール ] を選択します。
画面をクリックし、文字を入力します。

入力が完了したら画面上部の [ 〇 ] を押して入力を確定させます。

STEP.2

文字を変更する

お好みで文字を変更してみましょう。

サンプルは「新ゴ」を使っています。
モリサワのフォントはプロの現場では必須です。

モリサワが無ければ「小塚ゴシック」や「游ゴシック」等を利用するのも良いでしょう。

STEP.3

サイズを変更する

文字サイズを変更してみましょう。

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

AdobeStock

高クオリティ素材サイトのAdobeStockで制作を加速させよう

無料の素材サイトとは比較にならないクオリティのAdobeStockは導入されているでしょうか？

AIやPSDをはじめとした全Adobe製品のネイティブ形式の素材データが揃っています。
ダウンロードし、文字を編集するだけで高品質な作品が作成可能です。もちろん商用利用可能！

STEP.4

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

せっかくなのでフォントファミリーも変更してみましょう。

同じフォントでも太さのちがうものや斜体など、複数収録されているものがあります。

目立たせたい文字は太く、そうでない文字は細いフォントを選択してさらに強弱を付けてみましょう。

FINISH

一旦完成

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

文字を入力すると「調整するクセ」を付けておいた方が良いです。
入力した「まま」の文字だとイマイチです。

MEMO

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

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

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

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

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

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

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

STEP.1

シェイプで背景を描く

文字の背景を作成します。

[ 長方形ツール(U) ] を選択し、ドラッグして文字の下に長方形を描きます。

※シェイプになっている事を確認してください。
画面左上のドロップダウンメニューからシェイプ、パス、ピクセルを選択できます。

STEP.2

色を変える

画面上部の [ 塗り ] をクリックし、虹色の箱アイコンをクリックし、カラーピッカーから色を選択します。

線の設定は [ 無し ] にしておきましょう。
赤の斜線アイコンで [ 無し ] にできます。

STEP.3

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

作成したシェイプのレイヤーをアクティブにしたまま、[ A ] を押して [ パスの選択ツール(A) ] に変更します。

アンカーポイントを選択し、アンカーポイントを移動させると長方形の形を変えることができます。

FINISH

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

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

CodeCamp（コードキャンプ）

デザインをオンラインで効率的に学習

本気で未経験からプロのデザイナーに転職を考えられている方は CodeCamp（コードキャンプ）がおすすめです。

独学は時間がかかる割に非効率的な学習になりがちです。現役デザイナーのプロによる授業、転職を見据えた実践的なカリキュラム、手厚い転職サポートで短時間で転職を成功させましょう。

無料体験レッスンについて詳しく見る

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

ある程度の要素が増えてきましたが、レイヤーは整理されているでしょうか？

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

レイヤー操作について詳しくは下記で解説しておりますのでご覧ください。

【Photoshop】レイヤーの使い方と機能を全て解説

あしらいを作成する

他の色味やちょっとしたあしらいが欲しいのでシェイプで作成します。

あしらいはグループ化してまとめておくと便利です。

MEMO

シェイプの基本的な使い方や無料＆商用利用可能なカスタムシェイプの紹介をしております。
ぜひ併せてチェックして下さい！

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

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

完成！

最後に全体の微調整を入れてバナー広告の完成です！おつかれさまでした！

WEB担当者やデザイナーでなくても、バナー広告を作れるくらいのフォトショ知識を持っていると重宝されますよ！

左図はサンプルのレイヤー構成です。

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

レイヤー操作については下記で詳しく解説しておりますので是非ご覧ください。

【Photoshop】レイヤーの使い方と機能を全て解説

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

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

fantiaでバナーのサンプルPSDを配布中です。

fantiaからダウンロードする

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

Photoshopが必須

PSDを編集するにはAdobe Photoshop（アドビフォトショップ）が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

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

同じ要素でGDN（Google ディスプレイネットワーク）やYDN（Yahoo!ディスプレイアドネットワーク）に向けたWEB広告バナーを複数種類作成する際に、1つのPSDで作る方が効率的に作れます。

下記記事で具体的な作り方からスライスの設定、書き出し方法などを前編・後編に渡って徹底解説しております。
サンプルPSDも無料で配布しておりますので是非ご覧ください！

【Photoshop】アートボードを使ったバナー制作サイズ違いを簡単に作成！

【Photoshop】アートボードを使ったバナー制作スライスツールで簡単書き出し

オススメのデザイン書

デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。

さらっと読むだけでもすごく勉強になるのでオススメですよ。
作業PCの隣に並べておくと迷ったときに便利です。

WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。

なるほどデザイン　目で見て楽しむデザインの本。/筒井美希

posted with カエレバ

bookfan PayPayモール店

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

けっきょく、よはく。　余白を活かしたデザインレイアウトの本/ingectar‐e

posted with カエレバ

bookfan PayPayモール店

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

ノンデザイナーズ・デザインブック [第4版]

posted with カエレバ

Heiman

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

配色アイデア手帖　めくって見つける新しいデザインの本　完全保存版/桜井輝子

posted with カエレバ

bookfan PayPayモール店

Yahooショッピングでチェック

Amazonでチェック

楽天市場でチェック

まとめ

以上、バナー広告の作り方の手順についてでした。

キャンバスサイズの指定、画像の配置と補正、文字入力と文字編集、背景やあしらいの作成、バナー制作でよく使う機能を一通り盛り込んだ内容となっております。

これらの操作はフォトショップを始められたばかりの方にオススメの内容なので、新たにオリジナルバナーを作ってみるとよりフォトショの知識が深まる事間違いありません。
練習がてらに色々作ってみましょう！

ではまた！