ポートフォリオの作り方をゼロから徹底解説

【Photoshop】スライスツールで複数のバナーを書き出す方法

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

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

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

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

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

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

構成を考える

前編の300×250バナーと同様にコピー用紙やチラシの裏などに構成ラフを描きます。
内容は同じでレイアウトだけ変えています。

きったねぇ暗号みたいな字でも自身で内容が理解できればOK、こまけぇこたぁいいんだよ。

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

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
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
スライスツールを選択する
Photoshopがまだの方はAdobe公式サイトから入手しておきましょう。

まず [ スライスツール ] を選択します。
ナイフみいたなアイコンがスライスツールです。
STEP.2
スライスする
ドラッグでスライスのエリアを作ります。

300×250の大きさでスライス出来たら160×600と728×90も同様にスライスのエリアを作成します。
サイズ変更は上下左右の小さい点をドラッグします。

[ Ctrl ] を押しながら別のスライスエリアをクリックすると選択対象を変更できます。
STEP.3
スライスオプションで書き出す対象画像に名前を付ける
[ Ctrl ] を押しながらスライスしたエリアをダブルクリックすると [ スライスオプション ] が開きます。

書き出しする際の名称を変更できるので名称を入力しておきます。

書き出し後のリネーム作業は意外と時間が掛かるので、書き出し前の段階で全て決めておくと、修正後の書き出しも楽です。
FINISH
完成!
これで書き出す下準備が整いました。

Web用に保存をして完成!

STEP.1
Web用に保存を開く
[ Ctrl ] + [ Shift ] + [ Alt ] + [ S ]で[ Web用に保存 ] を開くことができます。

[ ファイル ] → [ 書き出し ] → [ Web用に保存(従来) ] から開けますが、よく使う保存方法なのでショートカットで覚えておくと便利です。
STEP.2
書き出す画像を選択
書き出す画像を選択します。

3枚のバナーを選択するので [ Shift ] を押しながら対象画像をクリックし、複数選択します。
STEP.3
書き出し形式を設定
書き出す画像の形式を設定します。
今回は [ JPEG ] [ やや高画質 ] を選択してみます。

設定ができたら下部の [ 保存 ] をクリックします。
STEP.4
保存場所を指定
保存する場所を決めます。
今回はデスクトップを指定しました。

スライスの項目は [ 選択したスライス ] にしておきます。

最後に [ 保存 ] をクリックします。
FINISH
書き出し完了
デスクトップに [ images ] という名称のフォルダが自動で作成され、その中に書き出された画像が格納されます。

いい感じに各サイズのバナーが書き出されました!
画質を落とさずに圧縮する
Photoshop側で圧縮設定を入れるのも良いですが、ドラッグ&ドロップでキレイに画像を圧縮してくれる無料サービスがあるので、そちらを利用するのも大いにアリですよ!
上手く活用すると画質を保ったまま画像の容量を激減させることができます。【無料】画像をキレイに圧縮できるオンラインサービス12選

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

fantiaで当記事で作成したサンプルPSDをダウンロードできます。

サンプルを見ながら作る、自身で作成した作品と比べる、素材として活用するなどしてください!

fantiaでPSDをダウンロード

サンプルPSDを編集するにはPhotoshopが必要
PSDを編集するにはAdobe Photoshop(アドビ フォトショップ)が必須です。 Adobe公式サイトからダウンロードしておきましょう。 Illustratorや他のアドビ製品も使うならコンプリートプランが便利ですが、Photoshop単品はフォトプランが最もお得です。

ワンランク上のバナー素材

AdobeStockには2億5000万点以上もの高品質素材が配布されています。
全て商用利用可能!
下記で高品質なPSD形式のテンプレートを厳選して紹介しております。

厳選バナーテンプレート50選を全て見たい方はコチラからどうぞ!

Web Banner Layout Set 4

様々なサイズのウェブバナー広告のテンプレートです。
汎用的なレイアウトなので様々な分野の広告にピッタリ!

ダウンロード

6 Social Media Banner Layouts with Blue and Yellow Accents

ブルーとイエローの配色がキレイなソーシャルバナー用テンプレートです。

ダウンロード

Social Media Sale Banners Layout Set

印象的な色遣いが特徴的なソーシャルメディアバナーです。
セール系の内容ですが、文字替えするだけで全く違った方面のバナーにできます。

ダウンロード

Set of 15 Minimalist Social Media Post Layouts

ミニマルデザインで構成されたソーシャルバナーです。
シンプルだからこそ画像や文字サイズ、レイアウトを整えないとダサくなりますからね。シンプルデザインの参考にオススメ!

ダウンロード

6 Social Media Post Layouts with Gold Accents

ゴールド系の色味で構成されたテキストがアクセントになっているソーシャルバナー用テンプレートです。
訪れた場所の写真を下地に、手前の文字を少し変えるだけでインスタ映えする作品の出来上がりです。

ダウンロード

高品質なテンプレートが大量にあるAdobeStockAdobeStock
最強素材サイトのAdobeStockは1カ月無料体験が可能です。
一度使えばクリエイティブの常識が覆るほどの便利さを誇るAdobeStockの詳細を下記で徹底解説!

まとめ

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

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

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

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

ではまた!

Illustratorは活用されていますか?
Photoshopだけでなく、Illustratorも活用されているでしょうか?
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得!
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!