デザイン会社が発信!バナー制作情報メディア

Photoshopでバナーを作る方法|手順・レイヤーの分け方・書き出しのコツ

公開日 更新日
Photoshopでバナーを作る方法|手順・レイヤーの分け方・書き出しのコツ
Photoshopで広告バナーを作るときは、最初のドキュメントの作り方とレイヤーの分け方で、あとの修正やサイズ展開の手間が大きく変わります。この記事では、Photoshopでバナーを作る手順、直しやすいレイヤーの分け方、書き出しの形式と容量を、バナー制作会社の目線でまとめました。

目次

Photoshopでバナーを作る手順

Photoshopでは、次の流れでバナーを作ります。
  1. 「新規ドキュメント」で、幅と高さをピクセルで入力する(例:1080×1080)。カラーモードはRGBにする
  2. 背景、写真、文字、ボタンをそれぞれ別のレイヤーに分けて置く
  3. 写真は「スマートオブジェクト」に変換してから拡大・縮小する
  4. 文字はテキストレイヤーのまま残し、画像にしない(あとで直せるように)
  5. 完成したら、JPGかPNGで書き出し、容量を確かめる
サイズは媒体ごとに決まっています。主な媒体のサイズはバナーサイズ一覧でまとめています。

あとで直しやすいレイヤーの分け方

広告バナーは、出したあとに文言や価格を変えたり、別のサイズを作ったりすることがよくあります。最初からレイヤーを整理しておくと、修正やサイズ展開が早くなります。
やること理由
レイヤーに名前を付ける「価格」「ボタン」など、どれが何か分かるようにする。ほかの人が開いても迷わない
役割ごとにグループにする背景・写真・文字・ボタンに分けると、まとめて動かせる
写真はスマートオブジェクトにする縮小してから拡大しても画質が落ちにくい
文字は画像にしない誤字や価格の変更に、すぐ対応できる
使わないレイヤーは消すファイルが重くならず、書き出しのミスも防げる

同じデザインで別のサイズを作るとき

正方形のバナーを縦長や横長に作り変えるときは、拡大・縮小するだけでは文字が小さくなったり、写真が切れたりします。Photoshopでは、アートボードを並べて1つのファイルに複数のサイズを入れておくと、色や文字をそろえたまま作業できます。

組み直し方のコツはバナーのリサイズ(サイズ変更)のやり方でくわしく説明しています。

書き出しの形式と容量

Photoshopには、作ったバナーをすぐに画像として書き出す機能(クイック書き出し・書き出し形式)があります。形式は次のように選びます。
形式向いているバナー
JPG写真が中心のバナー。画質を下げると容量を小さくできる
PNG文字や図形が中心のバナー。文字の輪郭がきれいに出る
Google広告のアップロード型イメージ広告は150KBまでなど、媒体ごとに容量の上限があります。書き出したあとに必ずファイルサイズを確かめましょう。

出典:Adobe ヘルプ「Photoshop のクイック書き出し」

PhotoshopとIllustrator、どちらで作るか

Photoshopは写真の加工や合成が得意で、Illustratorは文字や図形をきれいに配置するのが得意です。バナー制作.jpでは、バナーをIllustratorで制作し、写真の加工などではPhotoshopを併用しています。どちらを選ぶかはバナー作成はイラレとフォトショどっち?でまとめています。

バナーの制作を頼むなら

バナー制作.jpでは、広告バナーをサイズに関係なく1本4,000円(税別、別途ディレクション費20%)で制作しています。同じデザインのサイズ違いは1サイズ2,000円です。元データ(aiファイル)が必要な場合は、制作費の20%で納品しています。くわしくは制作料金をご覧ください。
やっぱりLP制作はプロに任せたい!まず制作事例を見る

まとめ

  • 新規ドキュメントはピクセルで、RGBで作る
  • レイヤーに名前を付けて役割ごとにグループにすると、修正やサイズ展開が早い
  • 写真はスマートオブジェクト、文字はテキストのまま残す
  • 写真中心ならJPG、文字中心ならPNGで書き出し、容量を確かめる
  • 写真の加工はPhotoshop、文字の配置はIllustratorが得意
この記事を書いたライター
2009年創業のデザイン会社です。バナー制作.jp(バナー制作実績)では、Instagram・X(旧Twitter)・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上(バナー以外の制作を含む)、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

バナー制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    件名
    会社名

    会社名ふりがな

    担当者

    担当者ふりがな

    電話番号

    メールアドレス

    都道府県
    ご商談希望
    (3~4候補)

    web商談時に
    聞きたい事

    ご返信方法
    電話連絡の場合
    ※複数回答可

    お問い合わせ内容

    バナーサイズ
    (単位:px)

    デザイン参考

    バナーにいれる
    テキスト情報

    イメージ
    フォント
    リンク先URL

    レギュレーション(仕様)

    素材画像URL

    ※GigaFile便でアップロードしたURLを上記に張り付けてください
    ※提供素材が無い場合は有料素材のみで制作

    規約に同意する


    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

     
    バナーアーカイブ