fantiaはじめました!無料素材やAI、PSDを配布中です。

【Photoshop】アートボードを使ったバナー制作 前編

この記事を読むのに必要な時間は約 18 分です。

Photoshop(フォトショップ)のアートボードを使ってGDN(Google ディスプレイ ネットワーク)やYDN(Yahoo!ディスプレイアドネットワーク)に向けたWEB広告バナーを複数種類作成する際に効率的な方法を紹介します。
内容にボリュームがあるので前編と後編に分けて詳しく解説します。

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

…面倒ですよね。

1つのPSDでサイズ違いのバナーを全て管理しながら効率的に作成し、書き出しも1回で終わらせる、その方が制作も管理も楽じゃないですか?
そんな便利な作り方を詳しく解説します!

制作の流れは下記記事の「フォトショでバナー広告を作る方法を詳しく解説」を発展した形です。1つのキャンバスで1つの絵を作っていましたが、今回は複数のアートボードを活用してサイズ違いのバナーを制作します。初心者の方にも分かりやすいように段階を踏んで詳しく解説します。
サンプルPSDも用意しております。当記事でPhotoshopを使った本格的なバナー制作のテクニックを身に付けちゃいましょう!

【Photoshop】フォトショでバナー広告を作る方法を詳しく解説

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

作成するバナーの仕様

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

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

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

構成を考える

構成を考えます。A4のコピー用紙やチラシの裏などにペンで描きます。今回は架空の転職サイトのWEB広告を作成します。
汚い字でOK、要素をざざっと書き出します。
個人的にはPhotoshopでデザイン作業を行う前に手描きラフを作っておくと進めやすいです。デジタルで構成ラフを描くのもアリです。いきなりデザイン作業から始めるのが得意な方はその方法で、自身の作りやすい方法で進めるのが一番です。

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

キャンバスを設定

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

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

MEMO
アートボードのチェックを入れるとレイヤーパネルに[ アートボード ]の項目が追加されます。
今回の制作ではアートボードを大いに活用するので、新規ドキュメント作成の際は[ アートボードのチェックを入れる ]事を忘れないでください。

アートボードを増やす

STEP.1
キャンバス内のアートボード 1をクリック
キャンバス内のアートボード 1をクリックします。アートボードの上下左右に̟[ + ]が表示されます。
[ アートボード 1 ]が選択された状態になっています。
STEP.2
+を押してアートボードをコピーする
アートボードの上下左右に̟[ + ]をクリックするとアートボードがコピーされます。今回は右の[ + ]をクリックしてみます。

[ 移動ツール(V) ] + [ ALTキー ]でドラッグするとアートボード1を任意の場所にコピーできます。
また、キャンバス内をドラッグすると好きな大きさのアートボードを好きな場所に作成できます。
お好みの方法で作成してください。
STEP.3
アートボードサイズを変更する
コピーした[ アートボード1のコピー ]をアクティブにし、[ 属性パネル ]内の[ アートボード ]を確認します。
W:300px H:250pxW:160px H:600pxに変更します。
[ 属性パネル ]が非表示の場合は画面上部の[ ウィンドウ ] → [ 属性 ]をクリックし、属性パネルを表示させてください。
STEP.4
3つ目のアートボードを作成
同様の手順で3つ目のアートボード(728×90)を作成しましょう。
FINISH
アートボード名を変更して完成
アートボードの名称を分かりやすいものに変更したら完成です。アートボードやレイヤーの名称変更は面倒がらずに行わないと後々に管理が面倒な事になって逆に非効率的になることが多いです。
レイヤーカラーを変更しておくとさらに管理がしやすいでしょう。
アートボードの位置は[ 移動ツール(V) ]を使ってお好みに調整してください。
MEMO
アートボードの場所が決まったら[ 位置をロック ]をクリックして[ アートボードの位置をロック ]しておく事をオススメします。移動ツールを使っている最中にミスってたまにアートボードを動かしてしまう事があるので、そのミスを防ぐことができます。

デザイン制作

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

STEP.1
写真素材を探す
背景に使う写真素材を探します。今回は写真ACさんのコチラの写真を使用します。
他の写真を使われる場合は下記記事でフリー素材を紹介しておりますので参考にしてみてください。
【無料・商用利用可】写真&画像をフリーで使える素材サイト16選+α 2020年版
STEP.2
写真を配置する
先の写真をドラッグ&ドロップで配置します。大きさや位置を整えておきます。
スマートオブジェクトの状態で拡大縮小すると画像が劣化しないのでオススメです。
STEP.3
写真を補正する
写真の色味を変更します。文字を見やすくするために背景を[ ぼかし(ガウス) ]でぼかし、[ 調整レイヤー ]を使って背景の色を薄く調整を入れました。ぼかす場所、レイヤー効果を当てる場所は[ レイヤーマスク ]を使って限定します。
レイヤーマスクの使い方はコチラから。
調整レイヤーの使い方は記事で解説しております。
【Photoshop】フォトショの調整レイヤーを徹底解説
STEP.4
文字を入力する
構成ラフを元にテキストを入力します。サンプルは「新ゴ」を使っています。サイズ調整は行わず、一通りの要素となるテキストをパパっと入力します。
なお文字ツールの使い方は下記記事で解説しています。【Photoshop】フォトショの文字ツールの使い方を徹底解説
STEP.5
文字サイズや太さを調整する
文字サイズやフォントファミリーを変更して文字に調整を加えます。
なお文字パネルや段落パネルの使い方は下記記事で詳しく解説しております。【Photoshop】フォトショの文字パネルの機能と使い方を徹底解説【Photoshop】フォトショの段落パネルの機能と使い方を徹底解説
STEP.6
背景やアイコンをシェイプで作成する
シェイプで文字の下地やアイコン類を作成、配置します。ついでに文字の色も変更しておきましょう。
シェイプの使い方やフリーのカスタムシェイプの紹介をしておりますので是非ご覧ください。【Photoshop】フォトショのシェイプツールの使い方・編集方法を徹底解説【無料・商用可】Photoshopのカスタムシェイプ46選【2020年度版】
FINISH
完成!
仕上げにバナーの周囲に1pxのアウトラインを追加して300px x 250pxのバナーが完成です。
ある程度バナー制作に慣れたら30分もあれば作れるようになります。

前編の終了

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

【Photoshop】アートボードを使ったバナー制作 後編

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

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

fantiaでPSDを無料ダウンロード

オススメのデザイン書

デザインを作る際に非常に有益な情報が書かれている書籍を厳選しました。さらっと読むだけでもすごく勉強になるのでオススメですよ。作業PCの隣に並べておくと迷ったときに便利です。WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。

【Photoshop】アートボードを使ったバナー制作 後編
目次一覧
ゼロから始めるシリーズ目次
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記から。