この記事を読むのに必要な時間は約 18 分です。
Photoshop（フォトショップ）のアートボードを使ってGDN（Google ディスプレイ ネットワーク）やYDN（Yahoo!ディスプレイアドネットワーク）に向けたWEB広告バナーを複数種類作成する際に効率的な方法を紹介します。
ボリュームがある内容なので、前編と後編に分けて詳しく解説します。
WEB広告のバナーを作る際、上図ように同じ内容のバナーのサイズ違いを作る事が度々発生します。
特に工夫せずに1つのバナーを1つのPSDで作ると計3つのPSDが必要になります。
…面倒ですよね。
1つのPSDでサイズ違いのバナーを全て管理しながら効率的に作成し、書き出しも1回で終わらせる。
その方が制作も管理も楽じゃないですか？
そんな便利な作り方を詳しく解説します！
制作の流れは「フォトショでバナー広告を作る方法を詳しく解説」を発展した形です。
前回は1つのキャンバスで1つの絵を作っていましたが、今回は複数のアートボードを活用してサイズ違いのバナーを制作します。初心者の方にも分かりやすいように段階を踏んで詳しく解説します。
サンプルPSDも用意しております。
当記事でPhotoshopを使った本格的なバナー制作のテクニックを身に付けちゃいましょう！
【Photoshop】フォトショでバナー広告を作る方法を詳しく解説
サイズ違いバナーを別々のPSDで作成していた方はこの方法を知ると戻れなくなりますよ！
サンプルPSDも用意しているので、サンプルを参考にしながらより深く制作方法を学ぶこともできます。
この記事の目次
1:300px x 250px
2:160px x 600px
3:728px x 90px
これらはGDN（Google ディスプレイ ネットワーク）でよく使うサイズのバナー3種です。
汚い字でOK、要素をざざっと書き出します。
個人的にはPhotoshopでデザイン作業を行う前に手描きラフを作っておくと進めやすいです。
デジタルで構成ラフを描くのもアリです。いきなりデザイン作業から始めるのが得意な方はその方法で、自身の作りやすい方法で進めるのが一番です。
年収800万円、年休140日、いいですね、ははっ。
そんな職場どっかにねぇかな～。
WEB広告なので [ Web ] を選択します。
幅：300
高さ：250
解像度：72
アートボード：チェックを入れる
カラーモード：RGB
※必ずアートボードにチェックを入れましょう。
今回の制作ではアートボードを大いに活用するので、新規ドキュメント作成の際は [ アートボードのチェックを入れる ] 事を忘れないでください。
アートボードの上下左右に̟ [ + ] が表示されます。
[ アートボード 1 ] が選択された状態になっています。
今回は右の [ + ] をクリックしてみます。
[ 移動ツール(V) ] + [ ALTキー ] でドラッグするとアートボード1を任意の場所にコピーできます。
また、キャンバス内をドラッグすると好きな大きさのアートボードを好きな場所に作成できます。
お好みの方法で作成してください。
W:300px H:250pxをW:160px H:600pxに変更します。
[ 属性パネル ] が非表示の場合は画面上部の [ ウィンドウ ] → [ 属性 ] をクリックし、属性パネルを表示させてください。
レイヤーカラーを変更しておくとさらに管理がしやすいでしょう。
アートボードの位置は [ 移動ツール(V) ] を使ってお好みに調整してください。
移動ツールを使っている最中にミスってたまにアートボードを動かしてしまう事があるので、そのミスを防ぐことができます。
それでは手始めに300px 250pxのバナーから制作していきます。
他の写真を使われる場合は、下記記事でフリー素材を紹介しておりますので参考にしてみてください。
【無料・商用可】フリーで使える写真＆画像素材サイト16選+α 2021年版
大きさや位置を整えておきます。
スマートオブジェクトの状態で拡大縮小すると画像が劣化しないのでオススメです。
文字を見やすくするために背景を [ ぼかし(ガウス) ] でぼかし、[ 調整レイヤー ] を使って背景の色を薄く調整を入れました。ぼかす場所、レイヤー効果を当てる場所は [ レイヤーマスク ] を使って限定します。
レイヤーマスクの使い方はコチラから。
調整レイヤーは下記記事で解説しております。
【Photoshop】フォトショの調整レイヤーの使い方と写真補正の方法
サンプルは「新ゴ」を使っています。
サイズ調整は行わず、一通りの要素となるテキストをパパっと入力します。
なお文字ツールの使い方は記事で解説しています。
【Photoshop】フォトショの文字ツールの使い方を徹底解説
なお文字パネルや段落パネルの使い方は下記で詳しく解説しております。
【Photoshop】フォトショの文字パネルの使い方と機能を徹底解説
【Photoshop】フォトショの段落パネルの使い方と機能を徹底解説
シェイプの使い方やフリーのカスタムシェイプの紹介をしておりますので是非ご覧ください。
【Photoshop】フォトショのシェイプツールの使い方・編集方法を徹底解説
【無料・商用可】Photoshopのカスタムシェイプ46選【2021年度版】
ある程度バナー制作に慣れたら30分もあれば作れるようになります。
ひとまずバナーが1つ完成しました。おつかれさまでした！
後編で残り2つのバナーを作成し、書き出しの設定と書き出しを解説します。
スライスツールを使った書き出しをマスターするとWEB用の素材画像の書き出しが格段に楽に、かつキレイにできますよ。
【Photoshop】アートボードを使ったバナー制作 スライスツールで簡単書き出し
サンプルを見ながら作る、自身で作成した作品と比べる、素材として活用するなどしてください！
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。
デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。
さらっと読むだけでもすごく勉強になるのでオススメですよ。
作業PCの隣に並べておくと迷ったときに便利です。
WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。
オススメはコンプリートプラン
初めからコンプリートプランを選択する方が断然お得&便利ですよ。
学生・教職員なら
学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題！
Photoshop単品ならフォトプランが最安
Photoshopを使うならAdobe公式のフォトプランが一番お得です。
※アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。
制作を加速させる最強素材サイト
無料素材とは一味違うので手を加える手間が劇的に省けますよ。
ゼロから始めるPhotoshopのもくじです。
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。
