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

よくありますよね、WEB広告のバナー。
構成からデザイン制作まで一貫して作れるようになると職場で貴方の需要が高まる事間違いなしです。
フォトショ初心者、ノンデザイナーの方にも分かりやすく解説しておりますので是非マスターしてください!
この記事の目次
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
公式サイトからダウンロードしておきましょう!
なおPhotoshop(フォトショップ)の導入方法の詳細はコチラで解説しています。

汚い字で全然OK!
ざっくりで構わないのでデザイン制作前に構成ラフを手書きで作成しておくと効率的に進められます。
尚、今回作成するバナーのサイズは幅600px高さ500pxを想定しています。
GDN(Googleディスプレイネットワーク)の主な広告は300px x 250px
縦横比が同じで流用が簡単という理由から600px x 500pxでの制作を行います。


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

幅:600px
高さ:500px
解像度:72
カラーモード:RGBカラー
アートボード:チェックを外す
設定が完了したら [ 作成 ] をクリックします。


画面上部の [ イメージ ] → [ 画像解像度 ] からでも確認ができます。
よく使うのでショートカットがオススメ!

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


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


アクティブレイヤーのみ反転されます。
バウンディングボックスの変形で反転させると比率が狂うのでオススメできません。


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

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


全て同じサイズだと強弱が無い絵になりますので、情報の重要度によって文字サイズに強弱を付けます。
AIやPSDをはじめとした全Adobe製品のネイティブ形式の素材データが揃っています。
ダウンロードし、文字を編集するだけで高品質な作品が作成可能です。もちろん商用利用可能!

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

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

[ 長方形ツール(U) ] を選択し、ドラッグして文字の下に長方形を描きます。
※シェイプになっている事を確認してください。
画面左上のドロップダウンメニューからシェイプ、パス、ピクセルを選択できます。

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

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

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

レイヤーの順番、名前、必要ならグループ化をしたり、制作を進めながらレイヤー整理もしておきましょう。
未整理のまま制作を進めるとぐちゃぐちゃになり、制作の効率が悪くなってしまいます。
レイヤー操作について詳しくは下記で解説しておりますのでご覧ください。


あしらいはグループ化してまとめておくと便利です。
ぜひ併せてチェックして下さい!

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

名前を変更し、並び順を整理しておきましょう。
グループ化やレイヤーの色替えを使ったりして整理するのも良いでしょう。
レイヤー操作については下記で詳しく解説しておりますので是非ご覧ください。


fantiaでバナーのサンプルPSDを配布中です。
サンプルPSDを見ながら当サイトで作り方を確認しながら進める、自身で作ってからサンプルPSDを確認、素材として使用といった活用方法ができます。
よかったらご活用ください!
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

同じ要素でGDN(Google ディスプレイ ネットワーク)やYDN(Yahoo!ディスプレイアドネットワーク)に向けたWEB広告バナーを複数種類作成する際に、1つのPSDで作る方が効率的に作れます。
下記記事で具体的な作り方からスライスの設定、書き出し方法などを前編・後編に渡って徹底解説しております。
サンプルPSDも無料で配布しておりますので是非ご覧ください!
デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。
さらっと読むだけでもすごく勉強になるのでオススメですよ。
作業PCの隣に並べておくと迷ったときに便利です。
WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。
以上、バナー広告の作り方の手順についてでした。
キャンバスサイズの指定、画像の配置と補正、文字入力と文字編集、背景やあしらいの作成、バナー制作でよく使う機能を一通り盛り込んだ内容となっております。
これらの操作はフォトショップを始められたばかりの方にオススメの内容なので、新たにオリジナルバナーを作ってみるとよりフォトショの知識が深まる事間違いありません。
練習がてらに色々作ってみましょう!
ではまた!
オススメはコンプリートプラン
初めからコンプリートプランを選択する方が断然お得&便利ですよ。
学生・教職員なら

学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題!
Photoshop単品ならフォトプランが最安
Photoshopを使うならAdobe公式のフォトプランが一番お得です。
※アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。
制作を加速させる最強素材サイト
無料素材とは一味違うので手を加える手間が劇的に省けますよ。
ゼロから始めるPhotoshopのもくじです。


















