【Photoshop】アートボードを使ったバナーを複数作る方法

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

Photoshop（フォトショップ）のアートボードを使ってGDN（Google ディスプレイネットワーク）やYDA（ディスプレイ広告運用型）に向けたWEB広告バナーを効率的に複数種類作成する方法を紹介します。

Photoshop初心者・ノンデザイナーの方にも作れるよう、詳しくメイキングを完全紹介！
当記事の内容を活用すれば1つのPSD内に複数のアートボードを作成し、スクウェア型・縦長・横長など、様々なサイズのバナーを作成する事ができます。

ボリュームがある内容なので、前編と後編に分けて詳しく解説します。（当記事は前編です。）

この記事の目次

作例とアートボードの利点

WEB広告のバナーを作る際、上図ように同じ内容のバナーのサイズ違いを作る事が度々発生します。
特に工夫せずに1つのバナーを1つのPSDで作ると計3つのPSDが必要になります。

…面倒ですよね。

1つのPSDでサイズ違いのバナーを全て管理しながら効率的に作成し、書き出しも1回で終わらせる。
その方が制作も管理も楽じゃないですか？

そんな便利な作り方を詳しく解説します！

制作の流れは「フォトショでバナー広告を作る方法を詳しく解説」を発展させた形です。

前回は1つのキャンバスで1つの絵を作っていましたが、今回は複数のアートボードを活用してサイズ違いのバナーを制作します。初心者の方にも分かりやすいように段階を踏んで詳しく解説します。

サンプルPSDも用意しております。
当記事でPhotoshopを使った本格的なバナー制作のテクニックを身に付けちゃいましょう！

サイズ違いバナーを別々のPSDで作成していた方はこの方法を知ると戻れなくなりますよ！
サンプルPSDも用意しているので、サンプルを参考にしながらより深く制作方法を学ぶこともできます。

作成するバナーの仕様

今回は3種類のバナーを作成します。要素は全て同じでサイズとレイアウト違いの3種類です。

1:300px x 250px
2:160px x 600px
3:728px x 90px

これらはGDN（Google ディスプレイネットワーク）でよく使うサイズのバナー3種です。

複数サイズのバナー制作手順

それでは実際に複数サイズのバナー制作を行いましょう。

Photoshopを導入しましょう

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

構成を考える

構成を考えます。A4のコピー用紙やチラシの裏などにペンで描きます。今回は架空の転職サイトのWEB広告を作成します。
汚い字でOK、要素をざざっと書き出します。

個人的にはPhotoshopでデザイン作業を行う前に手描きラフを作っておくと進めやすいです。
デジタルで構成ラフを描くのもアリです。いきなりデザイン作業から始めるのが得意な方はその方法で、自身の作りやすい方法で進めるのが一番です。

年収800万円、年休140日、いいですね。
そんな職場どっかにねぇかな～。

キャンバスを設定

キャンバスを新規作成します。
WEB広告なので [ Web ] を選択します。

幅：300
高さ：250
解像度：72
アートボード：チェックを入れる
カラーモード：RGB
※必ずアートボードにチェックを入れましょう。

アートボードのチェックを入れる

アートボードのチェックを入れるとレイヤーパネルに [ アートボード ] の項目が追加されます。

今回の制作ではアートボードを大いに活用するので、新規ドキュメント作成の際は [ アートボードのチェックを入れる ] 事を忘れないでください。

アートボードを増やす

STEP.1

キャンバス内のアートボード 1をクリック

Photoshopの準備はできましたか？
まだの方はAdobe公式サイトから入手しましょう。

キャンバス内のアートボード 1を [ 移動ツール(V) ] でクリックします。
アートボードの上下左右に̟ [ + ] が表示されます。

[ アートボード 1 ] が選択された状態になっています。

※もちろん [ アートボードツール ] で編集してもOK。

STEP.2

+を押してアートボードをコピーする

アートボードの上下左右に̟ [ + ] をクリックするとアートボードがコピーされます。
今回は右の [ + ] をクリックしてみます。

[ 移動ツール(V) ] + [ Altキー ] (Mac：Option) でドラッグするとアートボード1を任意の場所にコピー可。

また、キャンバス内をドラッグすると好きな大きさのアートボードを好きな場所に作成できます。
お好みの方法で作成してください。

STEP.3

アートボードサイズを変更する

コピーした [ アートボード1のコピー ] をアクティブにし、[ プロパティパネル(旧：属性) ] 内の [ アートボード ] を確認します。

W:300px H:250pxをW:160px H:600pxに変更します。

[ プロパティパネル ] が非表示の場合は画面上部の [ ウィンドウ ] → [ プロパティ ] をクリックし、プロパティパネルを表示させてください。

STEP.4

3つ目のアートボードを作成

同様の手順で3つ目のアートボード（728×90）を作成しましょう。

FINISH

アートボード名を変更して完成

アートボードの名称を分かりやすいものに変更したら完成です。アートボードやレイヤーの名称変更は面倒がらずに行わないと後々に管理が面倒な事になり、逆に非効率的になることが多いです。

レイヤーカラーを変更しておくとさらに管理がしやすいでしょう。アートボードの位置は [ 移動ツール(V) ] を使ってお好みに調整してください。

アートボードの位置をロック

アートボードの場所が決まったら必要に応じて [ 位置をロック ] をクリックして [ アートボードの位置をロック ] して下さい。
移動ツールを使っている最中にミスってたまにアートボードを動かしてしまう事があるので、そのミスを防ぐことができます。

デザイン制作

それでは手始めに300px 250pxのバナーから制作していきます。

STEP.1

写真素材を探す

背景に使う写真素材を探します。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

写真を配置する

先の写真をドラッグ＆ドロップで配置します。
大きさや位置を整えておきます。

スマートオブジェクトの状態で拡大縮小すると画像が劣化しないのでオススメです。

STEP.3

写真を補正する

写真の色味を変更します。

文字を見やすくするために背景を [ ぼかし(ガウス) ] でぼかし、[ 調整レイヤー ] を使って背景の色を薄く調整を入れました。ぼかす場所、レイヤー効果を当てる場所は [ レイヤーマスク ] を使って限定します。

レイヤーマスクの使い方はコチラから。

調整レイヤーはコチラの記事で解説しております。

STEP.4

文字を入力する

構成ラフを元にテキストを入力します。
サンプルは「新ゴ」を使っています。AdobeCC利用者なら使い放題のAdobeFontsの利用も良いでしょう。

サイズ調整は行わず、一通りの要素となるテキストをパパっと入力します。

なお文字ツールの使い方はコチラの記事で解説しています。

STEP.5

文字サイズや太さを調整する

文字サイズやフォントファミリーを変更して文字に調整を加えます。

なお文字パネルの使い方はコチラで、段落パネルの使い方はコチラで詳しく解説しております。

STEP.6

背景やアイコンをシェイプで作成する

シェイプで文字の下地やアイコン類を作成、配置します。ついでに文字の色も変更しておきましょう。

シェイプの使い方はコチラ、フリーのカスタムシェイプ50選はコチラで紹介をしておりますので是非ご覧ください。

FINISH

完成！

仕上げにバナーの周囲に1pxのアウトラインを追加して300px x 250pxのバナーが完成です。

ある程度バナー制作に慣れたら30分もあれば作れるようになります。

これで前半が終了。
後半に続きます。

ワンランク上のバナー素材

AdobeStockには2億5000万点以上もの高品質素材が配布されています。
全て商用利用可能！
下記で高品質なPSD形式のテンプレートを厳選して紹介しております。

厳選バナーテンプレート50選を全て見たい方はコチラからどうぞ！

#01 Web Banner Layout Set 4

様々なサイズのウェブバナー広告のテンプレートです。
汎用的なレイアウトなので様々な分野の広告にピッタリ！

ダウンロード

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

ブルーとイエローの配色がキレイなソーシャルバナー用テンプレートです。

ダウンロード

#03 Social Media Sale Banners Layout Set

印象的な色遣いが特徴的なソーシャルメディアバナーです。
セール系の内容ですが、文字替えするだけで全く違った方面のバナーにできます。

ダウンロード

#04 Set of 15 Minimalist Social Media Post Layouts

ミニマルデザインで構成されたソーシャルバナーです。
シンプルだからこそ画像や文字サイズ、レイアウトを整えないとダサくなりますからね。シンプルデザインの参考にオススメ！

ダウンロード

#05 6 Social Media Post Layouts with Gold Accents

ゴールド系の色味で構成されたテキストがアクセントになっているソーシャルバナー用テンプレートです。
訪れた場所の写真を下地に、手前の文字を少し変えるだけでインスタ映えする作品の出来上がりです。

ダウンロード

高品質なテンプレートが大量にあるAdobeStock

最強素材サイトのAdobeStockは1カ月無料体験が可能です。
一度使えばクリエイティブの常識が覆るほどの便利さを誇るAdobeStockの詳細を下記で徹底解説！

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

サンプルPSDのダウンロード

fantiaとnoteから当記事で作成したサンプルPSDをダウンロードできます。
サンプルを見ながら作る、自身で作成した作品と比べる、素材として活用するなどしてください！

PSDを編集するにはAdobe Photoshop（アドビフォトショップ）が必須、Adobe公式サイトからダウンロードしておきましょう。

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のアートボードを活用して複数サイズのバナーを1つのPSD内に作る方法についての前編でした。

ひとまずバナーが1つ完成、おつかれさまでした！

後編で残り2つのバナーを作成し、書き出しの設定と書き出しを解説します。
スライスツールを使った書き出しをマスターするとWEB用の素材画像の書き出しが格段に楽に、かつキレイにできますよ。