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

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

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

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

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

この記事の目次

最低限Photoshopが必須

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

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

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

Photoshopを導入しましょう

当記事の内容を実践するには最低限Photoshop（フォトショップ）が必須です。
Adobe公式サイトから導入しておきましょう。
Photoshop単体は公式サイトのフォトプランが最もお得です。
ただしIllustratorもあるとバナー制作がさらに捗るのでコンプリートプランが断然オススメです。

構成を考える

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

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

600px x 500pxの理由

YDN（ヤフーディスプレイアドネットワーク）の主な広告は600px x 500px
GDN（Googleディスプレイネットワーク）の主な広告は300px x 250px
縦横比が同じで流用が簡単という理由から600px x 500pxでの制作を行います。
なお、Web広告のバナーサイズはコチラの記事で徹底解説しています。

背景写真の素材を探す

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

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

無料で使える写真素材

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

無料フォトストックサイトを紹介しておりますので、お好きな画像を探して作ってみましょう。
素材の品質と量ならAdobeStockが最強です。
AdobeStockはコチラで詳しく解説しています。

キャンバスを作成

STEP.1

新規ドキュメントの作成

Photoshopを立ち上げます。
未導入の方はAdobe公式サイトから入手しておきましょう。

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

STEP.2

新規ドキュメントの設定

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

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

STEP.3

プリセットの詳細

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

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

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

FINISH

完成

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

おまけ

解像度のチェック

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

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

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

新規キャンバス、ファイル形式の基本

【Photoshop】ファイル形式の種類と特徴について徹底解説【PSD,JPG,PNG等の違いと活用例】

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

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

STEP.1

画像を配置する

ドラッグ&ドロップで画像をキャンバスに配置します。

画像の大きさを変えるには [ Ctrl + T ] を押して変形モードにし、好みの大きさに変形します。

※コチラで変形の挙動を変更する方法を記載してます。

STEP.2

必要なら画像を反転

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

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

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

STEP.3

色を補正する

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

サンプルはレイヤーパネル下部からレベル補正と色相・彩度を追加しました。

調整レイヤーの詳しい使い方はコチラの記事で詳しく解説しています。

FINISH

写真の補正完了

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

Photoshopで写真をキレイに補正する方法は様々。
調整レイヤーを使った方法以外にCameraRawフィルターを使った方法もオススメです。

デザインについて本気で学ぶには？

未経験からデザインについて学ぶ方法は大きく分けて独学とスクールの二つに大別できます。
本気でプロを目指されている、短期間で劇的に成長したい方はスクールの活用をオススメします。
正直未経験での独学はオススメできません。基礎はプロからマンツーマンで教わる事が大切です。
コチラの記事で働きながら、オンライン、登校など、未経験からプロへの転職を前提としたハイレベルな内容が学べるデザインスクールについて徹底解説しておりますのでご覧ください。

文字を入力する

STEP.1

文字を入力する

次は文字を入力します。

Photoshopは入れられていますか？
まだの方はAdobe公式サイトから入手できます。

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

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

STEP.2

文字を変更する

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

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

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

コチラで無料で使えるフリーフォントを紹介しております。

STEP.3

サイズを変更する

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

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

STEP.4

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

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

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

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

FINISH

一旦完成

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

文字を入力すると「調整するクセ」を付けておきましょう。
入力した「まま」の文字だとイマイチですよ。

文字ツールの色々な使い方

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

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

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

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

STEP.1

シェイプで背景を描く

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

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

シェイプの基本的な使い方はコチラで紹介しています。

STEP.2

色を変える

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

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

STEP.3

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

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

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

FINISH

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

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

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

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

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

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

あしらいを作成する

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

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

シェイプツールを使いこなそう

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

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

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

完成！

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

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

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

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

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

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

・長方形のシェイプを作成し、線の設定のみ追加
・レイヤー効果の境界線で追加

どの方法でも構いません。

AdobeStockは高品質なバナーテンプレートが大量！

AdobeStockはバナーはもちろん、フライヤーやポストカード等、様々なデザインテンプレートの品揃えが最強です。

文字を変えるだけでオリジナル作品として商用利用可、制作時間数分でプロと同じ仕上りの作品が作れるデザインのチートサービスです。

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

fantiaでバナーのサンプルPSDを配布中です。
PSDを編集するにはPhotoshopが必須なので未導入の方はAdobe公式サイトから入手しておきましょう。

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

fantiaからダウンロードする

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

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

ワンランク上のバナー素材

AdobeStockには2億5000万点以上もの高品質素材が配布されています。
全て商用利用可能！
下記で高品質なPSD形式のテンプレートを厳選して紹介しております。

厳選バナーテンプレート50選を全て見たい方はコチラからどうぞ！

#01 Web Banner Layout Set 4

様々なサイズのウェブバナー広告のテンプレートです。
汎用的なレイアウトなので様々な分野の広告にピッタリ！

ダウンロード

#02 6 Social Media Banner Layouts with Blue and Yellow Accents

ブルーとイエローの配色がキレイなソーシャルバナー用テンプレートです。

ダウンロード

#03 Social Media Sale Banners Layout Set

印象的な色遣いが特徴的なソーシャルメディアバナーです。
セール系の内容ですが、文字替えするだけで全く違った方面のバナーにできます。

ダウンロード

#04 Set of 15 Minimalist Social Media Post Layouts

ミニマルデザインで構成されたソーシャルバナーです。
シンプルだからこそ画像や文字サイズ、レイアウトを整えないとダサくなりますからね。シンプルデザインの参考にオススメ！

ダウンロード

#05 6 Social Media Post Layouts with Gold Accents

ゴールド系の色味で構成されたテキストがアクセントになっているソーシャルバナー用テンプレートです。
訪れた場所の写真を下地に、手前の文字を少し変えるだけでインスタ映えする作品の出来上がりです。

ダウンロード

高品質なテンプレートが大量にあるAdobeStock

最強素材サイトのAdobeStockは1カ月無料体験が可能です。
一度使えばクリエイティブの常識が覆るほどの便利さを誇るAdobeStockの詳細を下記で徹底解説！

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

ワンランク上のテンプレート素材

Photoshopの学習をする上で、プロが作成した生データを研究する事は重要です。
普段からデザイン業務をされている方にとって自分以外のプロのクリエイターが作成したデータを見る事は日常茶飯事ですが、そうでない方は見る機会がありません。

AdobeStockのテンプレート素材はプロによる高品質な作品ばかり！
全て商用利用可能なので、テキストを変えるだけでそのまま使えます。

制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート34選

デザイン制作の勉強としての導入にオススメの名刺デザイン。
想像だけで作るとイマイチな仕上がりになりがちですが、良質なサンプルを参考に作ると吸収できる情報の質が段違いです。
相手に舐められない名刺テンプレート50選

バナーもフォトショップの練習をする上で良質な教材です。
想像だけ・中途半端な素材を参考にするのは有効な学習方法とは言えませんよ。
ハイクオリティなバナーテンプレート50選

ゲームUIの制作は素材制作にはツールの深い知識が必要です。
テンプレートはまさに制作ノウハウの宝庫！
どれも最高の素材ばかりです。
ゲームUIに使えるテンプレート48選

単なる白黒の文字オブジェクトを一瞬で全く別モノへ大変身させるエフェクト52選です。
文字に高品質なエフェクトを追加するモックアップ

写真をはじめとした素材を「あっという間」に全く違うグラフィックへ大変身させるエフェクトです。
時短と品質の向上をされたい方に超オススメ！
写真を全く違うグラフィックに変える事が出来る高品質なエフェクト50選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

クリエイティブ業務で使える優良素材まとめ

まとめ

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

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

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

ではまた！

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

【Illustrator】サイズ違いのバナー広告を効率的に作る方法をイラレ初心者向けに徹底解説【GDN・YDN完全対応】

InDesignは活用されていますか？

Photoshopだけでなく、InDesign（インデザイン）も活用されていますか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
InDesign用の商用利用可能なポートフォリオテンプレート77選はコチラ！

ゼロから始めるPhotoshop目次

フォトショ基本操作