この記事を読むのに必要な時間は約 17 分です。
Photoshop（フォトショップ）のアートボードを使ってGDN（Google ディスプレイ ネットワーク）やYDN（Yahoo!ディスプレイアドネットワーク）に向けたWEB広告バナーを複数種類作成する際に効率的な方法を紹介します。
ボリュームがある内容なので、前編と後編に分けて詳しく解説します。
この記事の目次
WEB広告のバナーを作る際、上図ように同じ内容のバナーのサイズ違いを作る事が度々発生します。
特に工夫せずに1つのバナーを1つのPSDで作ると計3つのPSDが必要になります。
…面倒ですよね。
1つのPSDでサイズ違いのバナーを全て管理しながら効率的に作成し、書き出しも1回で終わらせる。
その方が制作も管理も楽じゃないですか？
そんな便利な作り方を詳しく解説します！
制作の流れは「フォトショでバナー広告を作る方法を詳しく解説」を発展させた形です。
前回は1つのキャンバスで1つの絵を作っていましたが、今回は複数のアートボードを活用してサイズ違いのバナーを制作します。初心者の方にも分かりやすいように段階を踏んで詳しく解説します。
サンプルPSDも用意しております。
当記事でPhotoshopを使った本格的なバナー制作のテクニックを身に付けちゃいましょう！
サイズ違いバナーを別々のPSDで作成していた方はこの方法を知ると戻れなくなりますよ！
サンプルPSDも用意しているので、サンプルを参考にしながらより深く制作方法を学ぶこともできます。
1:300px x 250px
2:160px x 600px
3:728px x 90px
これらはGDN（Google ディスプレイ ネットワーク）でよく使うサイズのバナー3種です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
汚い字でOK、要素をざざっと書き出します。
個人的にはPhotoshopでデザイン作業を行う前に手描きラフを作っておくと進めやすいです。
デジタルで構成ラフを描くのもアリです。いきなりデザイン作業から始めるのが得意な方はその方法で、自身の作りやすい方法で進めるのが一番です。
年収800万円、年休140日、いいですね。
そんな職場どっかにねぇかな～。
WEB広告なので [ Web ] を選択します。
幅：300
高さ：250
解像度：72
アートボード：チェックを入れる
カラーモード：RGB
※必ずアートボードにチェックを入れましょう。
今回の制作ではアートボードを大いに活用するので、新規ドキュメント作成の際は [ アートボードのチェックを入れる ] 事を忘れないでください。
まだの方はAdobe公式サイトから入手しておきましょう。
キャンバス内のアートボード 1をクリックします。
アートボードの上下左右に̟ [ + ] が表示されます。
[ アートボード 1 ] が選択された状態になっています。
今回は右の [ + ] をクリックしてみます。
[ 移動ツール(V) ] + [ Altキー ] でドラッグするとアートボード1を任意の場所にコピーできます。
また、キャンバス内をドラッグすると好きな大きさのアートボードを好きな場所に作成できます。
お好みの方法で作成してください。
W:300px H:250pxをW:160px H:600pxに変更します。
[ プロパティパネル ] が非表示の場合は画面上部の [ ウィンドウ ] → [ プロパティ ] をクリックし、プロパティパネルを表示させてください。
レイヤーカラーを変更しておくとさらに管理がしやすいでしょう。
アートボードの位置は [ 移動ツール(V) ] を使ってお好みに調整してください。
移動ツールを使っている最中にミスってたまにアートボードを動かしてしまう事があるので、そのミスを防ぐことができます。
それでは手始めに300px 250pxのバナーから制作していきます。
今回は写真ACさんのコチラの写真を使用。
さらに素材にこだわりたい方はAdobeStockが断トツで最強です。
2億5000万点以上もの高品質素材が制作を加速させてくれますよ。
大きさや位置を整えておきます。
スマートオブジェクトの状態で拡大縮小すると画像が劣化しないのでオススメです。
AdobeStockには2億5000万点以上もの高品質素材が配布されています。
全て商用利用可能！
下記で高品質なPSD形式のテンプレートを厳選して紹介しております。
厳選バナーテンプレート50選を全て見たい方はコチラからどうぞ！
訪れた場所の写真を下地に、手前の文字を少し変えるだけでインスタ映えする作品の出来上がりです。
ダウンロード
一度使えばクリエイティブの常識が覆るほどの便利さを誇るAdobeStockの詳細を下記で徹底解説！
サンプルを見ながら作る、自身で作成した作品と比べる、素材として活用するなどしてください！
PSDを編集するにはAdobe Photoshop（アドビ フォトショップ）が必須、Adobe公式サイトからダウンロードしておきましょう。
Photoshopの学習をする上で、プロが作成した生データを研究する事は重要です。
普段からデザイン業務をされている方にとって自分以外のプロのクリエイターが作成したデータを見る事は日常茶飯事ですが、そうでない方は見る機会がありません。
AdobeStockのテンプレート素材はプロによる高品質な作品ばかり！
全て商用利用可能なので、テキストを変えるだけでそのまま使えます。
制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
想像だけで作るとイマイチな仕上がりになりがちですが、良質なサンプルを参考に作ると吸収できる情報の質が段違いです。
相手に舐められない名刺テンプレート50選
文字に高品質なエフェクトを追加するモックアップ
時短と品質の向上をされたい方に超オススメ！
写真を全く違うグラフィックに変える事が出来る高品質なエフェクト50選
下記記事で良質な素材を紹介しております。併せてチェックしてください！
以上、Photoshop（フォトショップ）ぼアートボードを活用して複数サイズのバナーを作る方法についての前編でした。
ひとまずバナーが1つ完成、おつかれさまでした！
後編で残り2つのバナーを作成し、書き出しの設定と書き出しを解説します。
スライスツールを使った書き出しをマスターするとWEB用の素材画像の書き出しが格段に楽に、かつキレイにできますよ。
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
InDesign用の商用利用可能なポートフォリオテンプレート77選はコチラ！
フォトショ基本操作
フォトショ応用操作
商用可能なフォトショ用素材
フォトショップのお困りごと
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう！
