この記事を読むのに必要な時間は約 25 分です。
Photoshop（フォトショップ）を使ってバナー広告を作る方法を初心者の方にも分かりやすく解説します。サンプルを例に、画像補正や文字入力、デザイン・レイアウトを順に解説します。
フォトショでよく使う機能を網羅的に学べますので、フォトショ初心者の方にオススメの記事です！
フォトショ初心者、ノンデザイナーの方にも分かりやすく解説しておりますので是非マスターしてください！
この記事の目次
尚、今回作成するバナーのサイズは幅600px高さ500pxを想定しています。
ちなみに今回使用した画像はコチラです。無料のSmallサイズで問題ありません。
左端に[ 新規作成 ]のボタンがあるのでクリックします。
[ Web ] → [ Web一般 ] → [ 作成 ]で新規ドキュメントを作成してみます。
幅：600px
高さ：500px
解像度：72
カラーモード：RGBカラー
アートボード：チェックを外す
設定が完了したら[ 作成 ]をクリックします。
画面上部の[ イメージ ] → [ 画像解像度 ]からでも確認ができます。よく使うのでショートカットがオススメ！
下記で変形の挙動を変更する方法を記載しております。
PhotoshopCC2019,CC2020における「変形」の挙動を2018以前に戻す方法
バウンディングボックスの変形で反転させると比率が狂うのでオススメできません。
調整レイヤーの詳しい使い方は下記で確認できます。
【Photoshop】フォトショの調整レイヤーを徹底解説
画面をクリックし、文字を入力します。入力が完了したら画面上部の[ 〇 ]を押して入力を確定させます。
※シェイプになっている事を確認してください。画面左上でシェイプ、パス、ピクセルから選択できます。
線の設定は[ 無し ]にしておきましょう。赤の斜線アイコンで[ 無し ]にできます。
レイヤー操作について詳しくは下記で解説しておりますのでご覧ください。
【Photoshop】フォトショのレイヤーを徹底解説
WEB担当者やデザイナーでなくても、バナー広告を作れるくらいのフォトショ知識を持っていると重宝されますよ！
名前を変更し、並び順を整理しておきましょう。グループ化やレイヤーの色替えを使ったりして整理するのも良いでしょう。
レイヤー操作については下記で詳しく解説しておりますので是非ご覧ください。【Photoshop】フォトショのレイヤーを徹底解説
サンプルのPSDをダウンロード
fantiaでバナーのサンプルPSDを配布中です。
サンプルPSDを見ながら当サイトで作り方を確認しながら進める、自身で作ってからサンプルPSDを確認、素材として使用といった活用方法ができます。よかったらご活用ください！
同じ要素でGDN（Google ディスプレイ ネットワーク）やYDN（Yahoo!ディスプレイアドネットワーク）に向けたWEB広告バナーを複数種類作成する際に、1つのPSDで作る方が効率的に作れます。下記記事で具体的な作り方からスライスの設定、書き出し方法などを前編・後編に渡って徹底解説しております。サンプルPSDも無料で配布しておりますので是非ご覧ください！
デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。さらっと読むだけでもすごく勉強になるのでオススメですよ。作業PCの隣に並べておくと迷ったときに便利です。WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。
以上、バナー広告の作り方の手順についてでした。
キャンバスサイズの指定、画像の配置と補正、文字入力と文字編集、背景やあしらいの作成、バナー制作でよく使う機能を一通り盛り込んだ内容となっております。これらの操作はフォトショップを始められたばかりの方にオススメの内容なので、新たにオリジナルバナーを作ってみるとよりフォトショの知識が深まる事間違いありません。練習がてらに色々作ってみましょう！
ではまた！
本業が教えるイラレとフォトショ講座の目次は下記から。
