クリエイターなら絶対に登録しておきたい転職エージェント5選!

【Photoshop】アートボードを使ったバナー制作 スライスツールで簡単書き出し

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

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

1つのPSDで複数サイズのバナーを効率的に作成できます。

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

【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をダウンロード

Photoshopが必須
PSDを編集するにはAdobe Photoshop(アドビ フォトショップ)が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

オススメのデザイン書

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

WEBの情報だけだと限界があるので良書から学ぶのも大いにアリですよ。

まとめ

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

WEB広告用のバナーにはサイズが色々あり、同じ内容でもサイズの違うバナーを作る事が度々発生します。その際、1つのバナーに対して1つのPSDで作成するとファイル管理や制作の効率が悪くなるので、1つのPSDで一元管理しておくと制作の効率と管理が良くなります。

またスライスツールを使った一括書き出しも、WEBのように細々とした画像素材を書き出す際に非常に効果的な機能です。

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

ではまた!

Photoshopを最安で導入しよう

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

単品よりも圧倒的にお得で便利なCreative Cloudコンプリートプランがオススメです。Photoshop、Illustrator、Acrobatを単体で使うと、費用がコンプリートプランと同等かそれ以上になります。
初めからコンプリートプランを選択する方が断然お得&便利ですよ。

学生・教職員なら

学生や教職員の方にオススメなのが
アプリ1本分の価格で全てのAdobe製品が使い放題!

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

Photoshopを使うならAdobe公式のフォトプランが一番お得です。

アマゾンや他サイトのフォトプランは、1TBのオンラインストレージが付いて倍くらいの価格です。

制作を加速させる最強素材サイト

最強素材サイトであるAdobeStockがあると制作の効率性、品質がさらに高まります。
無料素材とは一味違うので手を加える手間が劇的に省けますよ。

ゼロフォトもくじ

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

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

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