Photoshop

Photoshop CC 導入。バナー作成時に楽する複数アートボードとスマートオブジェクトの活用方法

zakkです。こんにちは、今日はバナー作成時に効率よく作業するためのTipsをお送りします

広告バナーやHPバナー、facebook用、LINE用などなど、1つのイベントに対して複数の最適化されたサイズでバナーを作成しますよね。
その際、zakkは、いままで1つのPSDファイルに1サイズで作成をしてました。なので、1つのイベントで最低5つの違ったサイズのバナーPSDファイルを用意し、制作。
ここまでは良いのですが、修正は必ず来ます。出来上がった頃に担当者より、「やっぱりこの画像に変更して」など。その場合、5つのPSDを修正し書き出し。
しばらくすると、「ごめん、このロゴを入れてーこれ最後だからー」と、また追加の修正。5つのPSDを修正し書き出し。
毎度これの繰り返しなんですよねぇ。。。
この無駄な作業を効率よくする方法をお送りします。使うPhotoshopのバージョンはCCです。昔の買切りのディスクバージョンではなくて、最新型の月額モデルのPhotoshop CCとなります。

Photoshop CC で効率良くバナーを作成しよう

まず、Photoshop CCより導入されたアートボード機能。illustratorでは前からあったアートボード機能がPhotoshopでも使えるようになったんですね。素晴らしい。
1つのPSDファイルに複数のアートボードを設置出来る為、各種バナーサイズに合わせたアートボードを設置することで、1つのPSDファイルで全てのバナーを編集できます。
それでは、実際に作ってみましょう。※zakk流の為、もっと効率が良い方法があると思います。皆さんでさらに効率化してください。

アートボードを設置する

 

 

新規ファイルを作成したら、左上の移動ツールを長押しします。すると以前は無かったアートボードツールが選択できますのでこちらに切り替えます。
下図の場所です。長押しすると出現しますよ。

続いて任意のサイズでアートボードを作成していきます。ここでは、4つのアートボードを作成しました。

レイヤーパネルはこのようになります。それぞれアートボード毎にレイヤーを設置されます。
アートボードの名前は分かりやすいようにリネームしておくとやりやすいですね。

ここまで出来たらアートボードの設置は完了です。続いてレイヤーを配置しましょう。

レイヤーの配置

それでは、お正月明けですが謹賀新年のバナーを作成してみましょう。今年は申年ですのでさるの画像を用意しアートボードに設置します。

ここで効率化をはかる為に、最初に画像を設置後すぐにスマートオブジェクトに変更します。画像をスマートオブジェクトに変更後、それぞれのアートボードにコピーをしましょう。
謹賀新年のテキストもそれぞれのアートボードに設置します。どうでしょう。全てのバナーが一目で確認できますね。
さて、ここまで出来たらあとは書き出しです。書き出しはアートボード毎に一括で可能です、これは楽です。従来使用していた”shift+ctrl+alt+s”ではなく、”shift+ctrl+alt+w”のショートカットを利用します。
それでは実際にショートカットで呼び出します。

ダイアログが出現し、アートボード毎に書き出し方法が選択可能です。これで一発書き出し!効率化ですねぇ。

終了のはずが駆け込み修正!

書き出しが出来たら後は担当者に渡して終了です。しかし、ここで来るのが駆け込み修正!zakkの昨年末の経験を交えてwお送りします。

担当者:年末最終日にごめん、さるの写真なんだけどやっぱりイラストに変更して。
zakk:あ、はい。(さっきOKでたじゃないか、アップまであと10分しかないぞ)

よくある光景ですね、修正はよくある普通の事です。確認してOKもらってもよくあることです。。。

さて、こんな事態でも複数アートボードで作成しておけば簡単に1分で修正から書き出しまで出来ます。
まず、このサルの画像をイラストに変更しましょう。画像はスマートオブジェクトにしてますので、レイヤーパネルからスマートオブジェクトをダブルクリックし編集画面を呼び出します。

サルの画像をイラストに変更します。サルの画像を非表示にし、イラストを表示。そして保存。

すると、一発で変更できました、素晴らしいー!あとは、サイズを微調整した後に、”shift+ctrl+alt+w”で一括書き出しをすればOK。
いかがでしょうか?HP運営バナーや広告バナーなど、普段使っているバナーサイズを複数アートボード作って置きテンプレートとしてPSDファイルにしておけば、今後のバナー作成に手間がかかりませんよね。

複数アートボードとスマートオブジェクトを活用しもっと楽をしましょうー!

 

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. ヤフオクの商品説明を綺麗に!売上アップのポイント
  2. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  3. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  4. マーケティングオートメーションの「Mautic」導入について
  5. facebookのいいねボタンに5種類の感情ボタンが出現!
  6. LINEで郵便局の荷物追跡や再配達ができる!?
  7. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  8. WordPressの悩み相談「目次を中央寄せにしたい」を解決。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

OVERHIT GvG「栄光の戦域」攻略のポイントを理解する。

GvGが実装され2日目、初日は偵察によるポイントが勝利ポイントに加算されるなど不具合がありましたね。…

簡単に美しいマーブル模様をPhotoshop CCで作成する方法

マーブル模様を簡単に作成する方法です。使用するのはPhotoshop CC。CCじゃなくてもいけるか…

WordPressの悩み相談「目次を中央寄せにしたい」を解決。

ひと昔はアメブロのカスタム相談が多かったですが、最近はWordPress(ワードプレス)に移行してい…

マーケティングオートメーションの「Mautic」導入について

マーケティングオートメーションの「Mautic」について、自社サーバーを利用したネットショップに導入…

OVERHIT(オーバーヒット) 「震天の神域 風の龍 ファフニール」が10月18日(木)START

前回の討伐戦の風BOSSは、「アラクネス」でしたが、今回は「震天の神域 風の龍 ファフニール」です。…

人気記事

  1. 仮想通貨歴23日目 初の大暴落を経験。
  2. 黒騎士と白の魔王 ギルドバトルの基本とルールについてまとめ
  3. 城ドラ トロールの使用感について!出しどころがポイント。
  4. 城ドラ トロールLv30フル装備でリーグに参戦!動画もあるよ。
  5. 城ドラ タートルキャノンはおすすめ!フル装備にして感じた事

インスタグラム

カテゴリー記事一覧

PAGE TOP