【Photoshop】様々なサイズのバナーが作れるテンプレートPSD

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Adobe Photoshop（フォトショップ）で様々なサイズのバナーが簡単に作れるテンプレートPSDの使い方と作例をフォトショ初心者の方に詳しく解説します。

バナーを準備するとなると様々なサイズが必要になります。しかし当記事で紹介するテンプレートを使えば16種類ものサイズのテンプレートが収録されています。GDNやYDNをはじめとしたWeb広告用バナー、各種SNS用のバナー、そしてWebサイト用のバナーなど。面倒なサイズ差分が簡単に準備できる優れもの！

この記事の目次

何が作れるの？

上記の様に様々な規定サイズのバナーが簡単に作れるデザインテンプレートを活用した制作例です。よくあるバナーで必要なサイズは当記事で紹介するテンプレートに全て収録されていますよ。
画像と文字を少し変えるだけで高品質なバナーがあっという間に作成できます！

バナーテンプレートの使い方

それではPSD形式のバナーテンプレートを使って様々なバナーを作成してきましょう。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

バナーテンプレートの編集方法

STEP.1

バナーテンプレートをダウンロード

バナーテンプレートのPSDT素材をダウンロードします。サンプルは [ Web Banner Layout Set 4 ] です。16種類ものサイズが収録されたバナーテンプレートのオススメ素材ですよ。

STEP.2

Photoshopで開く

ダウンロードしたバナーテンプレートのPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。

STEP.3

Photoshopで画像を編集

レイヤーパネルを開きます。
※非表示の場合は [ F7 ] で表示可。
アートボードでサイズ別のバナーが管理できます。サンプルは1200px x 630pxのアートボードを触っていきます。

まずは画像を変更します。[ Your photo (double click) ] と書かれたレイヤーサムネールをダブルクリックしましょう。

別タブでPSBが開きます。お好きな画像を配置しましょう。サンプルはコチラの画像を使用しました。
最後に [ Ctrl + S ] (Mac：⌘ + S)で上書き保存しましょう。

元のバナーテンプレートのPSDタブをクリックすると画像が差し変わっている事が確認できます。

STEP.4

文字を編集して完成

[ 文字ツール ] で文字を変更します。
※ショートカットは [ T ]

文字を変更後はPhotoshop画面上部の [ 〇 ] をクリックして確定します。英文はテンプレートのフォントのまま、日本語フォントは [ 源ノ角ゴシック VF ] を利用しました。（バリアブルフォントなので太さの調整が自由にできます。）

STEP.5

背景のシェイプの色を変更

お好みで背景色を変更しましょう。背景は [ シェイプ ] で構成されているので簡単に色変更が可能。

レイヤーパネル内の [ Background ] と [ Arc ] のレイヤーサムネールをダブルクリックするとカラーピッカーが開きます。好きな色を設定しましょう。

サンプルは少しブルー系に寄せました。

FINISH

他のサイズにも流用

同様の手順で他のサイズのバナーテンプレートにも画像と文字の変更を適用しましょう。以上でバナー作成の編集が完了しました。

ゼロベースだと工数が掛かりますが、[ Web Banner Layout Set 4 ] を使えば短時間で様々なサイズのバナーが作成できますよ。

バナーを書き出す方法

STEP.1

書き出しを選択

[ ファイル ] → [ 書き出し ] → [ 書き出し形式 ] をクリックします。
[ Alt + Shift + Ctrl + W ] (Mac：Option + Shift + ⌘ + W)

STEP.2

書き出し設定＆書き出し

書き出し形式のダイアログ画面が開きます。左メニューに書き出し対象の画像一覧、右メニューに書き出し設定が表示されています。
設定後は右下の [ 書き出し ] をクリック。

STEP.3

書き出しの完了

以上でバナーの書き出しが完了しました。各サイズのアートボードが個別のJPEGやPNG等で書き出す事ができます。
書き出した画像はそのままGDNやYDN、各種SNSやWebサイト用のバナーとして活用する事ができますよ。

その他ジャンルのバナーに展開した例

ワイヤレスイヤホンや転職バナーなど、その他のジャンルに展開した作例です。素材や配色を変えると全く印象が異なるバナーにする事ができます。[ Web Banner Layout Set 4 ] は汎用性の高いバナーテンプレートなので、ジャンル問わずで使えるのが利点ですよ。

高品質なPSD形式のバナー素材

用途に応じたライセンス体系のもとで商用利用できる、高品質なPSD形式のバナー素材を厳選しました。
※テンプレート素材のライセンス条件は公式ページでご確認ください。
使用頻度の高い素材なので持っておくと作業効率が劇的に向上しますよ！

#01 Web Banner Layout Set 4

当記事で使用した16種類ものバナーサイズが収録されたWebバナーテンプレートの決定版です。バナーサイズやレイアウトに迷った時はこのテンプレートを活用すればあっという間に解決できますよ。

ダウンロードする

#02 12 Social Media Banner Layouts

ソーシャルメディアに適したバナーテンプレートのPSD素材です。12種類のデザインパターンが収録されており、様々な分野のバナーに応用できますよ。

ダウンロードする

#03 Beauty Web Banner Set

美容系の業界に特化したバナー4種セットです。スクウェア型と横長バナーが収録されているPSD素材ですよ。

ダウンロードする

#04 Web Banner Layout Set 1

16種類のバナーサイズが収録されたテンプレートPSDです。同じ要素で異なるレイアウトが多数収録されているので、デザイン制作の参考になりますよ。

ダウンロードする

#05 Social Media Post Layout Set with Pink and Yellow Accents

ピンク色を基調としたポップで可愛い世界観のスクウェア型のバナーテンプレート素材です。6種類のデザインパターンが収録されたPSD。Instagram（インスタグラム）の投稿用素材に最適ですよ。

ダウンロードする

#06 Black Friday Social Media Banners

ブラックフライデーに特化したソーシャルメディア向けバナー素材です。文言を変更する事で簡単に別のセールや訴求用バナーに改造できますよ。

ダウンロードする

#07 Square Social Media Banner Kit

フード系に適したスクウェアサイズのバナーテンプレートのPSD素材です。9パターンのデザインが収録されており、フード系以外のコンテンツにも流用可能です。

ダウンロードする

#08 Social Media Posts Layout with Blue and Green Accents

くすみカラーのブルートグリーンで構成されたスタイリッシュなソーシャルメディア向けバナーテンプレート素材です。企業の投稿用テンプレ等に向いています。

ダウンロードする

#09 6 Social Media Banner Layouts with Blue and Yellow Accents

ブルーとイエローで構成された夏カラーのスクウェアサイズバナーテンプレート素材です。パンチのある見た目なので訴求力が高いバナーデザインに仕上がっています。

ダウンロードする

#10 Set of Web Banners with Cross Shape

13種類のスタンダードなバナーサイズが収録されたバナーテンプレートのPSD素材です。太くてインパクトのある文字とクロスがモチーフのモノクロ系デザインがカッコいいですね。

ダウンロードする

様々なバナー素材

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

コチラの記事で様々な世界観で作成された高品質なバナー素材を紹介しています。Photoshopだけでなく、Illustratorで作成されたバナーも必要な方は是非チェックしてください。

おわりに

以上、Photoshop（フォトショップ）でバナーテンプレートを使って高品質な規定サイズのバナーを手軽かつ短時間で作る方法でした。
ゼロベースでバナーを作るには工数が必要ですが、[ Web Banner Layout Set 4 ] を使えば画像と文字を差し替えるだけで高品質なバナーが簡単に作れます。

16種類ものサイズが収録されているので、作る機会の多いGDNやYDN、XやInstagram・Facebook、そしてWebサイトのバナーなど。様々なサイズのバナー展開が簡単にできます。

そして書き出しもアートボードでサイズが分かれているので一括出力が可能。
様々なジャンルのバナーに展開できる便利なテンプレートなので是非ご活用ください！

ではまた！