【Photoshop】バナー広告の作り方法を徹底解説forフォトショ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

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

フォトショでよく使う機能を網羅的に学べますので、フォトショ初心者の方にオススメの記事ですよ！
バナー制作を通してフォトショップの基本操作に慣れましょう！

この記事の目次

最低限Photoshopが必須

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

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

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

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,078円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

構成を考える

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

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

600px x 500pxの理由

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

背景写真の素材を探す

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

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

無料で使える写真素材

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

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

キャンバスを作成

STEP.1

新規ドキュメントの作成

Photoshopを立ち上げます。
未導入の方はフォトプラン公式サイト（月額は最安の1,078円）から入手しておきましょう。

左端に [ 新規作成 ] があるのでクリックします。
※ショートカットは [ Ctrl + N ] (Mac：Command + N) です。

STEP.2

新規ドキュメントの設定

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

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

STEP.3

プリセットの詳細

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

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

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

※アートボードにチェックを入れると1つのPSD内で複数のアートボードが作成できます。つまり複数サイズのバナーを1つのPSDで簡単に作成・編集できる、という事ですね。

詳しくはコチラの記事で解説しています。

FINISH

完成

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

おまけ

解像度のチェック

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

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

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

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

【Photoshop】よく使うファイル形式の種類と特徴を徹底解説【PSD,JPG,PNG等】

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

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

STEP.1

画像を配置する

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

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。　

画像の大きさを変えるには [ Ctrl + T ] (Mac：Command + T) を押して変形モードにし、好みの大きさに変形します。
※コチラで変形の挙動を変更する方法を記載してます。

STEP.2

必要なら画像を反転

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

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

※バウンディングボックスの変形で反転させると比率が狂いやすいので、あまりオススメできません。

STEP.3

色を補正する

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

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

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

FINISH

写真の補正完了

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

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

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

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

文字を入力する

STEP.1

文字を入力する

次は文字を入力します。

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

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

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

STEP.2

文字を変更する

お好みで文字を変更してみましょう。
サンプルの書体は「新ゴ」を使っています。

ちなみにモリサワのフォントはプロの現場では必須！
モリサワが無ければ「小塚ゴシック」や「游ゴシック」等を利用するのも良いでしょう。

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

STEP.3

サイズを変更する

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

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

文字ツールでサイズ変更したい文字をドラッグで選択し、文字パネルでサイズやフォントを変更します。

STEP.4

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

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

同じフォントでも太さや斜体など、複数の書体が収録されているものが存在します。

目立たせたい文字は太く、そうでない文字は細いフォントを選択し、さらに強弱を付けてみましょう。
AdobeFontsを活用し、素敵な書体を検索！

FINISH

一旦完成

最後に文字の色を変えてみましょう。
[ 文字パネル ] → [ カラー] で変更できます。

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

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

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

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

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

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

STEP.1

シェイプで背景を描く

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

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

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

STEP.2

色を変える

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

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

STEP.3

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

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

アンカーポイントを選択し、アンカーポイントを移動させると長方形の形を変えることができます。ドラッグ、またはキーボードの上下左右のカーソルキーで移動可能です。

FINISH

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

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

最後はズームツールで拡大し、下地のオブジェクトに隙間が無いか等をチェックします。

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

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

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

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

あしらいを作成する

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

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

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

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

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

【無料・商用可】Photoshopの高品質なカスタムシェイプ【2023年度版】

完成！

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

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

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

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

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

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

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

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

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

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

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

fantiaからダウンロードする

別のバナーを作ってみよう

更に別のバナーを作成し、Photoshopスキルを高めてみませんか？
フォトショ初心者の方にも分かりやすくバナー制作テクニックを解説いたします！

スマホゲームのイベントバナー

コチラの記事でスマホゲームで見かけるイベントバナーの作り方を解説しています。
自身で描いたイラストを活用し、ゲーム用のバナーをゼロから作ってみませんか？
ロゴデザインのテクニックも併せて学習できるコンテンツですよ。

サイズ違いのバナーを1つのPSDで作成

同じ要素でGDN（Google ディスプレイネットワーク）やYDA（ディスプレイ広告運用型）に向けた複数の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を学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

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

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

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

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

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

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

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

まとめ

以上、Photoshop（フォトショップ）を使ったバナー広告の作り方の手順についてでした。

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

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

ではまた！

【Photoshop】アートボードを使ったバナーを複数作る方法

【Illustrator】サイズ違いのバナー広告を効率的に作る方法を徹底解説【GDN・YDA完全対応】

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

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

Photoshopの操作方法

フォトショ基本操作