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

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

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

Photoshop(フォトショップ)のアートボードを使ってGDN(Google ディスプレイ ネットワーク)やYDN(Yahoo!ディスプレイアドネットワーク)に向けたWEB広告バナーを複数種類作成する際に効率的な方法の後編です。

前編は下記から見られます。

【Photoshop】アートボードを使ったバナー制作 サイズ違いを簡単に作成!

では後半戦のスタートです!

構成を考える

前編の300×250バナーと同様にコピー用紙やチラシの裏などに構成ラフを描きます。内容は同じでレイアウトだけ変えています。
きったねぇ暗号みたいな字でも自身で内容が理解できればOK、こまけぇこたぁいいんだよ。

完成バナーを別のアートボードへコピペ&レイアウト調整

STEP.1
300x250内のレイヤーを別アートボードへコピー
300×250オレンジ色の登録無料(レイヤー名はbtn)を[ 移動ツール(V) ] + [ Alt ] + [ ドラッグ ]で160×600のアートボード内へコピーします。
STEP.2
対象レイヤーは自動で別アートボード内に移動
300×250のアートボードから160×600のアートボード内にレイヤー内のオブジェクトを移動させると、自動的に160×600のアートボード内に対象レイヤーが入ります。便利!
STEP.3
他レイヤーも同様にコピー&移動
他のレイヤーも同様の手順で160×600と728×90のアートボード内に素材となるレイヤーをコピペします。
FINISH
レイアウト調整して完成
前編のデザイン作成と同様にレイアウト調整を行うと完成です。デザイン作業の具体的な作成方法や編集方法は前編の記事を参考にしてください。

書き出し用のスライスを設定

3つのアートボードあるPSDをそのままJPGやPNGで書き出すと、全てのバナーが1画面になった画像が書き出されます。
1枚1枚バラバラにした状態で書き出すにはスライスの設定を追加する必要があります。WEB系ではよく使う機能です。
STEP.1
スライスツールを選択する
まず[ スライスツール ]を選択します。ナイフみいたなアイコンがスライスツールです。
STEP.2
スライスする
ドラッグでスライスのエリアを作ります。300×250の大きさでスライス出来たら160×600と728×90も同様にスライスのエリアを作成します。
サイズ変更は上下左右の小さい点をドラッグします。
※[ Ctrl ]を押しながら別のスライスエリアをクリックすると選択対象を変更できます。
STEP.3
スライスオプションで書き出す対象画像に名前を付ける
[ Ctrl ]を押しながらスライスしたエリアをダブルクリックすると[ スライスオプション ]が開きます。書き出しする際の名称を変更できるので名称を入力しておきます。
書き出し後のリネーム作業は意外と時間が掛かるので、書き出し前の段階で全て決めておくと、修正後の書き出しも楽です。
FINISH
完成!
これで書き出す下準備が整いました。

書き出しをして完成!

STEP.1
Web用に保存を開く
[ Ctrl ] + [ Shift ] + [ Alt ] + [ S ]で[ Web用に保存 ]を開くことができます。[ ファイル ] → [ 書き出し ] → [ Web用に保存(従来) ]から開けますが、よく使う保存方法なのでショートカットで覚えておくと便利です。
STEP.2
書き出す画像を選択
書き出す画像を選択します。3枚のバナーを選択するので[ Shift ]を押しながら対象画像をクリックし、複数選択します。
STEP.3
書き出し形式を設定
書き出す画像の形式を設定します。今回は[ JPEG ]で[ やや高画質 ]を選択してみます。
設定ができたら下部の[ 保存 ]をクリックします。
STEP.4
保存場所を指定
保存する場所を決めます。今回はデスクトップを指定しました。
スライスの項目は[ 選択したスライス ]にしておきます。
最後に[ 保存 ]をクリックします。
FINISH
書き出し完了
デスクトップに[ images ]という名称のフォルダが自動で作成され、その中に書き出された画像が格納されます。いい感じに各サイズのバナーが書き出されました!
MEMO
フォトショ側で圧縮設定を入れるのも良いですが、ドラッグ&ドロップでキレイに画像を圧縮してくれる無料サービスがあるので、そちらを利用するのも大いにアリですよ!上手く活用すると画質を保ったまま画像の容量を激減させることができます。【無料】写真を劣化させずに圧縮できるオンラインサービス12選

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

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

fantiaでPSDをダウンロード

オススメのデザイン書

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

まとめ

以上、Photoshopを使ったサイズ違いのバナーを効率的に作成する方法を前編と後編に渡って紹介しました。

WEB広告用のバナーにはサイズが色々あり、同じ内容でもサイズの違うバナーを作る事が度々発生します。その際、1つのバナーに対して1つのPSDで作成するとファイル管理や制作の効率が悪くなるので、1つのPSDで一元管理しておくと制作の効率と管理が良くなります。
またスライスツールを使った一括書き出しも、WEBのように細々とした画像素材を書き出す際に非常に効果的な機能です。

デザイナーでなくてもバナーが作れるようになると、間違いなく社内での貴方の需要や価値が高まりますので是非バナー制作にチャレンジしてみてください。

ではまた!

Photoshopを最安で導入するには

Photoshop(フォトショップ)を持っていない方は、下記から最安値で購入できます。
各種通販サイト等で取り扱われていますが、結局Adobe公式サイトが最安値かつ安全です。

オススメはコンプリートプラン

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。
アプリ単体を2つ3つ使うと費用がコンプリートプランと同等かそれ以上になります。

制作はPhotoshop、Illustrator、Lightroom、InDesign、Acrobat、etc…複数のアプリを使い分けながら作る事が多いです。
Photoshopで作業をしている際に「Illustratorなら効率的に作れるのに…」、「完成したデザインをPDFで複数ページに冊子形式にしたいなぁ…」という事は頻繁にあります。
なのでデザイナーにとって最低限Photoshop、Illustrator、Acrobatは必要です。

それならいっそ初めからコンプリートプラン を選択する方が断然便利でお得ですよ。

学生・教職員なら

学生や教職員の方にオススメなのが
65%OFFはデカイですね!
アプリ1本分の価格で全てが使えます。

Photoshop単品ならフォトプランが最安

Photoshopを使うならAdobe公式の フォトプラン が一番お得です。
Photoshop単体の半分以下の価格で、尚且つLightroomもセットになっているのが嬉しいですね。

アマゾンや他の通販サイトのフォトプランだと、不要なオンラインストレージが付いて倍くらいの価格です。Photoshop自体の最安はAdobe公式サイトの フォトプラン なので気を付けてください。

ゼロフォトもくじ

ゼロから始めるPhotoshopのもくじです。

目次一覧
ゼロから始めるシリーズ

IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記からどうぞ。