free web hit counter

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. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  2. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  3. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  4. ヤフオクの商品説明を綺麗に!売上アップのポイント
  5. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  6. facebookのいいねボタンに5種類の感情ボタンが出現!
  7. LINEで郵便局の荷物追跡や再配達ができる!?
  8. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…

コメント

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

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

おすすめ記事

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

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

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

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

Photoshopの炎フィルターを使って簡単にテキストを炎文字にしてみる。

炎文字は、結構頻繁に使います。例えば、イベントやキャンペーンのポスターやバナー、アプリゲームでも使っ…

OVERHIT(オーバーヒット)光討伐「スフィンクス」登場。

2018/09/27 12時から光討伐「スフィンクス」が登場となります。これで全属性での討伐完了です…

OVERHIT(オーバーヒット) 闇属性レイドボス「獣の王」9月13日(木)登場!

久々の討伐戦です。レイドボスが闇属性なので、今まで通りの場合、闇属性の強力な武器防具やアクセサリーが…

人気記事

  1. 城ドラ 7コストの「ブルードラゴン」登場。気になるスキルなどまとめ。
  2. ゾンビを揃えて感染拡大、爽快ゾンビマッチパズル!えっうちの庭にゾンビが!?
  3. 城ドラ ジャイアントベビー コスト3でチビドラ・エルフ・雪ん子に強し!
  4. 城ドラ ヴァルキリーを30装備(レアアバター込み)まで育てて使った感想。
  5. 城ドラ 11/3の新キャラは、3コスのサムライビートル!

カテゴリー記事一覧

PAGE TOP