Photoshopを使って、下図のようなバナー広告を作成する方法を解説します。
写真の切り抜きや文字入れ、装飾を組み合わせれば、シンプルな素材からバナーを作れます。
Photoshopの画面を見ながら、サイズ設定から画像の書き出しまで進めていきましょう。
バナーを作る前に決めること
バナー制作は、目的やレイアウトを決めてから画像と文字を配置し、細部を整えて書き出す流れです。
伝えたい内容と掲載サイズを決める
Photoshopで作り始める前に、誰に何を伝えるバナーなのかを決めておきましょう。
- 誰に見てほしいか
- 最も伝えたい商品・サービスや特典は何か
- クリックした後に何をしてほしいか
- 掲載先で指定されている画像サイズ・形式・容量は何か
たとえば無料体験への申込みが目的なら、「何を体験できるか」と「無料であること」を目立たせます。情報を詰め込む前に、主役を決めるのがポイントです。
伝える内容の絞り方や写真・文字の見せ方は、バナーデザインのコツで詳しく解説しています。
大雑把なレイアウトイメージを決める
手書きのノートでもお絵かきソフトでもよいので、文字と写真を置く位置をざっくり描いておきます。
今回は、下図のようなシンプルなイメージから作成していきます。
この段階では、細かなフォントや装飾まで決めなくて大丈夫です。配置に迷ったら、レイアウトの基本とコツも参考にしてみてください。
Photoshopでバナーを作る手順
ここからは、Photoshopのツールの使い方を含めて具体的に解説します。
サイズとカラーモードを設定する
Photoshopを起動し、「新規作成」を選択します。
新規ドキュメント画面で、幅・高さの単位を「ピクセル」にしてサイズを入力します。
この作例は1200×1000pxで作成し、最後に300×250pxへ縮小して書き出します。
今回の設定は以下のとおりです。Web用のバナーなので、カラーモードはRGBを選びます。
| 設定項目 | この作例の設定 |
|---|---|
| 作業用サイズ | 1200×1000px |
| 書き出すサイズ | 300×250px |
| カラーモード | RGBカラー／8bit |
| カラープロファイル | sRGB IEC61966-2.1 |
| 解像度 | 72ppi |
Web用の画像では、ppiよりも幅・高さのピクセル数が重要です。ピクセル数を変えずにppiだけを上げても、画像が高画質になるわけではありません。
サイズや解像度を変更する操作は、Photoshopの解像度設定で詳しく説明しています。
「作成」を選択すると、白いキャンバスが表示されます。この中に写真や文字を配置していきます。
複数サイズを一つのファイルで作る場合は、新規作成時に「アートボード」にチェックを入れます。使い方は後半のアートボードの説明で解説します。
背景色を設定する
背景に色を付ける場合は、「べた塗り」の塗りつぶしレイヤーを使います。あとから色を変えられるので、配色を試すときにも便利です。
- 「レイヤー」→「新規塗りつぶしレイヤー」→「べた塗り」を選択
- レイヤー名を付けて「OK」を選択
- 背景に使う色を選んで「OK」を選択
- 写真や文字より下に、作成した塗りつぶしレイヤーを配置
背景色を変更するときは、レイヤーパネルの色のサムネールをダブルクリックします。アートボードを使っている場合は、そのアートボード内の下側に配置してください。
白背景のまま作る場合は、この操作は不要です。
写真を配置して大きさを調整する
画像の追加は、フォルダ内の画像ファイルをキャンバスへドラッグ＆ドロップするだけです。
読み込まれた画像の位置と大きさを調整し、Enterキーで配置を確定します。
メニューから操作する場合は、「ファイル」→「埋め込みを配置」を選びます。
配置する画像ファイルを選択し、キャンバス上で位置と大きさを調整してください。
「埋め込みを配置」で追加した画像は、元の画像データを保持するスマートオブジェクトになります。
小さくした画像を再び大きくするときも、元の画像を基準に調整できます。画像を直接削除・加工せずに編集を進められるのがメリットです。
バナー制作では、スマートオブジェクトのまま作業を進めましょう。
配置後に大きさを変えるときは、画像レイヤーを選択してCtrl＋Tを押します。MacはCommand＋Tです。
縦横比を保ったまま四隅のハンドルを動かし、Enterで確定します。位置は移動ツール（V）で調整できます。
必要に応じて写真を切り抜く
「人物や商品は使いたいけど、背景は要らない」というときは、背景を非表示にするレイヤーマスクを使います。
人物を切り抜く基本手順は以下のとおりです。
- レイヤーパネルで写真のレイヤーを選択
- 「選択範囲」→「被写体を選択」で人物を選ぶ
- 必要なら「選択とマスク」で髪の毛や輪郭を調整し、選択範囲として出力
- レイヤーパネル下部の「レイヤーマスクを追加」をクリック
レイヤーマスクなら、背景を消しゴムで削除せずに隠せます。切り抜きすぎた部分も、マスクを修正して戻せます。
「背景を削除」を使う方法や、素材に合わせた切り抜き方は、以下の記事で詳しく解説しています。
文字を入力する
文字は、ツールバーの横書き文字ツール（T）で追加します。
- 横書き文字ツールを選択
- キャンバス上の文字を置きたい位置をクリック
- 文字を入力
- 画面上部のチェックマークで入力を確定
見出し・説明文・ボタンの文字は、別々のテキストレイヤーに分けると配置を調整しやすくなります。
入力を確定してから別の位置をクリックし、次の文字を追加しましょう。
文字の色・サイズ・フォントを変更する
テキストレイヤーを選択し、プロパティパネルの「文字」からフォントやサイズ、色を変更します。
同じ書式に揃える場合は、複数のテキストレイヤーを選択してまとめて変更できます。
複数選択はCtrlを押しながらレイヤーをクリックします。MacはCommandです。
一部の文字だけ色やサイズを変える場合は、文字ツールで対象の文字を範囲選択してから変更します。
今回の例では、「無料」の部分だけを選択して色を変えています。
すべての文字を同じ大きさにせず、主役の言葉を大きく、補足の言葉を小さくすると伝えたい内容が目に入りやすくなります。
フォントは文字の読みやすさ・見つけやすさに加え、書体による印象の違いも意識して選びましょう。
文字に縁取り・グラデーションなどの装飾を加える
文字の装飾は、加工したい内容によって使う機能が異なります。よく使う方法は次のとおりです。
| 文字の加工 | 使う機能 |
|---|---|
| 縁取り（袋文字） | レイヤースタイルの「境界線」 |
| グラデーション | レイヤースタイルの「グラデーションオーバーレイ」 |
| 影を付ける | レイヤースタイルの「ドロップシャドウ」 |
| アーチ状にする | ワープテキスト／パスに沿った文字入力 |
| 文字の内側に写真を表示する | クリッピングマスク |
縁取りや影は、レイヤースタイルで設定します。
レイヤーパネルで、テキストレイヤーの名前やサムネール以外の空いている部分をダブルクリックすると設定画面が開きます。
使いたい効果を選択し、色・太さ・不透明度などを調整して「OK」を選択します。
グラデーション文字は、「グラデーションオーバーレイ」で色や角度を指定します。まずは近い色を2色使うと、全体の配色に合わせやすくなります。
アーチ状の文字は、文字ツールのオプションバーからワープテキストを開いて作成します。「円弧」や「アーチ」を選び、カーブの強さを調整しましょう。
グラデーションやアーチの詳しい手順は、下記の文字装飾の記事で解説しています。文字自体を変形させず円に沿わせる方法や、写真を文字の形で切り抜く方法も紹介しています。
シェイプツールでボタンやあしらいを作る
文字の背景に帯やボタンを置く場合は、シェイプツール（U）を使います。
長方形ツールなどを選び、画面上部の描画モードを「シェイプ」にしてドラッグします。塗りの色や線は、オプションバーで変更できます。
作成したシェイプレイヤーは、文字のレイヤーより下に配置してください。上に置くと文字が隠れてしまいます。
レイヤーの重なり順や移動方法は、レイヤーの基本を解説した記事で説明しています。
シェイプにもレイヤースタイルを適用できます。影や縁取りを使って、ボタンを背景から目立たせることもできます。
文字と画像の配置を整える
素材を置き終わったら、装飾を増やす前に文字の強弱・位置・余白を整えましょう。
| 整える箇所 | この作例で行う調整 |
|---|---|
| 情報の強弱 | 「無料」など主役の言葉を目立たせ、補足との差を付ける |
| 配置 | 文字や図形の端・中心を揃える |
| 余白 | 文字を外周に寄せすぎず、写真との間にも余白を残す |
| 文字間隔 | 見出しの不自然な隙間を調整する |
位置を揃えるときは、対象のレイヤーを複数選択して移動ツールに切り替えます。画面上部の整列ボタンで、左端や中心などを揃えられます。
大きな見出しは、文字と文字の隙間が目立つことがあります。カーニングで文字間隔を整えると、文字のまとまりを作れます。
PSDを保存し、画像を書き出す
完成したら、編集用のPSDと掲載用の画像を分けて保存します。
まず「ファイル」→「別名で保存」で、レイヤーを保持したPSDデータを保存しておきましょう。文字や写真を後から差し替えるときに使えます。
掲載用の画像は、「Web用に保存（従来）」から書き出します。
- 「ファイル」→「書き出し」→「Web用に保存（従来）」を選択
- ファイル形式をJPEGまたはPNGに設定
- 「sRGBに変換」にチェックを入れる
- 画像サイズを300×250pxに変更
- プレビューとファイル容量を見ながら画質を調整
- 「保存」を選び、画像のみを書き出す
形式の指定がない場合は、画像の内容に合わせて選びます。納品する場合は、依頼された形式を優先してください。
| 形式 | 向いている用途 |
|---|---|
| JPEG | 写真が多いバナー。画質を調整して容量を抑えたいとき |
| PNG | 文字や図形の輪郭を保ちたいとき。背景を透過したいとき |
書き出した画像は、以下を確認して完成です。
- 幅・高さが指定されたピクセル数になっている
- 指定のファイル形式・容量上限を満たしている
- 実際に掲載する大きさで文字が読める
- 文字の欠けや写真の切れ、意図しない余白がない
サイズ違い・内容違いのバナーを効率よく作る
バナーは、一つのデザインから横長・縦長など複数のサイズへ展開することがあります。
サイズ違いはアートボード、共通素材の変更はスマートオブジェクト、文字や写真の大量差し替えは変数機能を使うと作業を進めやすくなります。
アートボードを使ってサイズ違いを作る
アートボードを使うと、一つのファイル内に複数の制作領域を作れます。新規作成画面で「アートボード」にチェックを入れましょう。
通常のドキュメントから作る場合は、移動ツールを長押ししてアートボードツールを選び、制作領域を描く方法もあります。
アートボードツールで既存のアートボードを選択すると、周囲に「＋」マークが表示されます。
「＋」をクリックすると、隣に新しいアートボードを追加できます。
追加したアートボードを選択し、プロパティパネルで幅・高さを指定します。
レイヤーパネルのアートボード名をダブルクリックすると名前を変更できます。サイズが分かる名前にしておくと管理しやすくなります。
縦横比が変わる場合は、全体を引き伸ばさずに写真と文字を配置し直します。
- 横長では、文字と写真を左右に分ける
- 縦長では、文字と写真を上下に配置する
- 小さいサイズでは、主役の言葉を残して補足文を短くする
どのサイズでも、最も伝えたい情報の優先順位は揃えておきましょう。
スマートオブジェクトで共通素材を差し替える
ロゴや商品写真などを複数のバナーで使うときは、同じスマートオブジェクトを複製して配置します。
- 共通で使う画像をスマートオブジェクトとして配置
- レイヤーを複製して、各アートボードへ移動
- 修正時はスマートオブジェクトのサムネールをダブルクリック
- 開いた内容を編集・保存して、複製先へ反映
同じ内容を共有する複製なら、一か所の編集を複数のバナーへ反映できます。無関係なスマートオブジェクトまで変更されるわけではありません。
それぞれのバナーに合わせた位置や大きさの調整は、配置先で行えます。仕組みや詳しい操作は以下の記事をご覧ください。
複数のアートボードをまとめて書き出す
複数のバナーは、「アートボードからファイル」でまとめて書き出せます。
- 「ファイル」→「書き出し」→「アートボードからファイル」を選択
- 保存先フォルダを指定
- 書き出すアートボードとファイル形式を指定
- 背景を含めるかなど、必要なオプションを設定
- 「実行」を選択
アートボードごとに別の画像ファイルが作成されます。書き出し後は、サイズと表示内容を確認してください。
アートボードの管理や書き出しの詳しい使い方は、以下の記事で解説しています。
変数機能で文字や写真をまとめて差し替える
商品名・価格・写真だけが異なるバナーを大量に作るなら、Photoshopの変数機能が便利です。
テンプレートに差し替え箇所を設定し、商品名や画像ファイルの情報を用意すると、同じレイアウトで内容違いのデータを作れます。
設定手順は、変数機能で文字と画像を一括変更する方法で詳しく解説しています。
コメント