Photoshopでバナーを作りたいと思ったとき、「具体的な作り方がわからない」「効率的な作り方が知りたい」と悩む方も多いでしょう。Photoshopは使える機能が多いため、作り方を知っておかないとなにから始めたらよいかわからなくなってしまいます。
本記事では、Photoshopを使ったバナーの作り方について解説しています。初心者でも実践しやすい基本の作り方から、作業を進めやすくするコツや便利機能まで紹介しているので、Photoshopでのバナーの作り方を知りたい方は、ぜひ参考にしてください。
Photoshopがバナー作りに向いている理由
Photoshopは、写真加工に強いことから、バナー制作に適したソフトです。明るさ・色味の調整や不要物の除去など、細かなレタッチを自由に行えます。
さらに、複数画像を組み合わせて合成できるのもメリットです。また、Photoshopはラスター形式のソフトであるため、編集画面で見えているデザインがそのまま完成データに反映される点も使いやすさの理由です。
Illustratorとどっちが使いやすい？
バナー作成に使われるツールとして、Photoshopと同じAdobe製品であるIllustratorもあります。両者の使い分け方は、以下の表のとおりです。
| ツール | 特徴 |
| Photoshop | 画像加工や合成を多く行うバナーに最適。 |
| Illustrator | イラストや図形を多く使うバナーに最適。 |
両ツールにはそれぞれ強みがあるため、場合によっては両方を使うのもおすすめです。例えば、Illustratorで作った文字デザインやロゴをPhotoshopに読み込んで配置するといった使い方です。
用途によってどちらのツールも使い分けられるようにしておくとよいでしょう。
Photoshopでのバナーの作り方
Photoshopで実際にバナー作成をしながら、作り方について見ていきましょう。簡単な作り方を理解しておくことで、オリジナリティのあるバナーも作れるようになります。
①ファイルを新規作成する
まず、バナー制作を始めるためのキャンバスを作成します。Photoshopのホーム画面右上にある「新規ファイル」をクリックし、次の設定を入力します。
- 高さ：580ピクセル
- 幅：400ピクセル
- 解像度：72ピクセル/インチ
- カラーモード：RGB
バナーはWebで使用されるため、解像度は72ppi、カラーモードはRGBが基本です。設定が完了したら「作成」をクリックしましょう。
②背景を追加する
バナーの背景はデザインの印象を大きく左右します。今回はグラデーションの背景にしたいので、レイヤーパネル下部にある調整レイヤーから「グラデーション」を追加しましょう。
プリセット内のピンク系グラデーションを選ぶと、女性らしい雰囲気のバナーに仕上がります。
また、Photoshopでグラデーションをかける方法については、以下の記事で詳しく解説しています。グラデーションを使いこなせるようになりたい方は、ぜひ参考にしてみてください。
③文字を配置する
続いて、バナーに入れるキャッチコピーや誘導の文章を配置します。ツールバーのテキストツールを選び、キャンバス上をクリックして文字を入力しましょう。
文字のフォントや大きさはひとまず仮で設定し、全体のレイアウトが整ってから微調整するとスムーズです。
④シェイプを追加する
文字の背景となるシェイプを追加し、視認性を高めます。まず長方形ツールで文字の背面に配置する帯を作成します。
作成したシェイプはAltキーでコピーして、必要な行数分複製してください。
次に、多角形ツールを「未経験でも案件獲得！」の文字の下に配置します。キャンバスをクリックすると角の数を変更できるので「5」にしましょう。
図形を配置できたら、右クリックから「垂直方向に反転」をクリックして、図形を反転させます。
さらに、バナー下部にも長方形の領域を追加しておきます。
⑤画像を挿入する
バナーの右側に配置する画像のために、まず楕円形ツールでクリッピングマスク用のシェイプを作成します。Ctrlキーを押しながらドラッグすると、少しいびつな形に変形でき、デザイン性が高まります。
続いて、楕円形のレイヤーをダブルクリックして表示されるレイヤースタイルから「ドロップシャドウ」を適用しましょう。以下の画像のように設定すると、楕円の周りに装飾がつきます。
次に画像をドラッグ＆ドロップでPhotoshopに読み込み、楕円形のレイヤーの上に配置してください。レイヤー同士の間をAltキーを押しながらクリックして「クリッピングマスク」をかけると、画像が楕円形の範囲で切り抜かれます。
また、Photoshopのクリッピングマスクについては、以下の記事で詳しく解説しています。クリッピングマスクの使い方やどのようなケースで使うのかを知りたい方は、ぜひこちらも参考にしてみてください。
⑥最終調整をする
ここまでで大まかな構成が整ったら、デザインを仕上げていきます。文字の色・フォント・サイズを調整し、読みやすさとデザイン性のバランスを整えましょう。
立体感を持たせたい場合は、文字レイヤーをダブルクリックして「ドロップシャドウ」を追加します。影の距離や濃さを適度に調整すると、文字が背景になじみながらも強調され、バナーとして目を引く仕上がりになります。
最後はお好みで装飾をつけて完成です。
また、Photoshopを使ったバナーの作り方を学びたいなら、Photoshop基礎セミナー講習がおすすめです。Photoshop基礎セミナー講習では、合成写真や文字デザインなど、バナー作りに欠かせない編集作業の方法を学べます。高品質なバナーを作れるPhotoshopのスキルがほしい人は、ぜひ詳細をチェックしてみてください。
⑦画像を書き出す
完成したバナーを画像として書き出します。ファイルメニューの「書き出し」から「Web用に保存」を選択します。
JPGもしくはPNG形式に設定し、「保存」をクリックすれば完了です。
Photoshopでバナーを作る際のコツ
Photoshopでバナーを作る際は、以下のコツを意識しましょう。
- ターゲットやイメージを明確にする
- レイアウトを事前に決めておく
これらのコツについて見ていきます。
①ターゲットやイメージを明確にする
バナー制作の最初のステップは「誰に向けたバナーなのか」「どのような印象を与えたいのか」などを明確にすることです。ターゲットがあいまいだと、使用する画像の雰囲気やキャッチコピーの方向性が定まらず、まとまりのないデザインになってしまいます。
制作前に簡単なメモでもよいので、目的・対象者・デザインイメージを書き出しておくと制作が進めやすくなるでしょう。
②レイアウトを事前に決めておく
バナー全体のレイアウトを事前に考えておくことも大切です。いきなりPhotoshopで作業を始めるより、紙やメモ帳に簡単なワイヤーフレームを描いておくと、作業中に迷いが生じにくくなります。
レイアウトを考える際は、視線の流れや文字量、画像とのバランスなどを意識することが大切です。細かいディテールは作業しながら調整していけばよいため、まずは大枠だけ決めると効率よく作業が進みます。
Photoshopでバナーを作る際の便利機能
Photoshopでバナーを作る際は、以下のような機能が便利です。
- アートボード
- スマートオブジェクト
- アートボードからファイル
これらのPhotoshopでバナーを作る際の便利機能について見ていきましょう。
①アートボード
アートボードは、複数サイズのデザインを1つのPSDファイル内で管理できる機能です。新規ファイル作成時に「アートボード」にチェックを入れると使用でき、サイズ違いのデザインを並べて制作できます。
アートボードのサイズは後から自由に変更できるため、同じデザインを多様な媒体向けに展開したい場合に最適です。また、アートボード間でレイヤーをドラッグしてコピーできるため、デザインの転用や統一したレイアウト作成も簡単に行えます。
②スマートオブジェクト
スマートオブジェクトは、元データを保持したまま編集できる非破壊編集機能です。画像の劣化を防ぎながら拡大・縮小できるほか、複数のアートボードで同じ要素を使う場合にも効果的です。
スマートオブジェクトを複製してほかのアートボードに配置すると、ひとつの元データを編集するだけで複製したすべてのオブジェクトに変更が反映されます。ボタンやロゴ、テキストなど、共通化したいパーツをスマートオブジェクト化しておくと作業時間を大幅に短縮できます。
③アートボードからファイル
完成したバナーを一括で書き出したい場合は、「アートボードからファイル」が便利です。ファイルメニューの「書き出し」から「アートボードからファイル」を選択すると、複数のアートボードをまとめて書き出せます。
これにより、一つずつ保存する手間が省けます。
Photoshopを使ったバナーの作り方を学ぶなら
Photoshopを使ったバナーの作り方を学ぶなら、以下の方法がおすすめです。
- 本で学ぶ
- 講座で学ぶ
これらのPhotoshopを使ったバナーの作り方を学べる方法について見ていきましょう。
①本で学ぶ
Photoshopを使ったバナーの作り方を解説した本は多数出版されています。そのため、基本的には本を活用して学習するのが一般的です。
本なら、バナーの作り方に特化したものや、Photoshopの基礎を重点的に学べるもの、デザインの基礎を学べるものなど、さまざまなアプローチの本があります。自分に合った本を選ぶことで、バナー作成のスキルを向上させられるでしょう。
②講座で学ぶ
講座なら、プロからPhotoshopを使ったバナーの作り方について学べます。特に、Photoshop基礎セミナー講習では、人物の修正やモックアップの作成などを学べるため、ハンズオン形式でバナー作成に必要なスキルを身につけられます。
ほかにも、合成写真やタイポグラフィックの作成方法も学べるので、講座の受講を終えるころには、オリジナルのバナー作成にもチャレンジできるでしょう。
バナー作成に必要なPhotoshopスキルを身につけたい方は、ぜひPhotoshop基礎セミナー講習をチェックしてみてください。
セミナー名 Photoshop基礎セミナー講習 運営元 GETT Proskill（ゲット プロスキル） 価格(税込) 27,500円〜 開催期間 2日間 受講形式 対面（東京・名古屋・大阪）・ライブウェビナー・eラーニング
Photoshopでのバナーの作り方のまとめ
今回は、Photoshopを使ったバナーの作り方について紹介しました。バナーは基本の作り方を押さえておくことで、初心者でも作成可能です。
また、Photoshopにはさまざまな便利機能があるので、よりスキルアップするには、何度もバナー作品を作って経験を積むことが大切です。ぜひ今回紹介した作り方を参考に、Photoshopを使ったバナー作成にチャレンジしてみてください。
