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. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  3. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  4. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  5. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  6. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  7. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  8. table装飾時に持っておきたいベーステンプレートとなるCSS

コメント

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

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

おすすめ記事

濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡単に色変更が出来るけど、ダーク系をキレイな白色にするのはひと手間かかるし調整がなかなか難しいねChange the dark sweater to a more difficult white.Also red and blue. – from Instagram

投稿コメント濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡…

写真合成のレタッチ。 – from Instagram

投稿コメント写真合成のレタッチ。lifezakk Instagram…

光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種類を使ってます。調整には、トーンカーブの明暗を多用。 – from Instagram

投稿コメント光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種…

GoProMAX等で撮影した360度写真をPhotoshopで簡単に編集する方法。

先日発売されたGoProMAX。360度の写真や動画が撮影できるアクションカメラですね。今回は、…

GoProMaxからのキャプチャをPhotoshopでレタッチ。 – from Instagram

投稿コメントGoProMaxからのキャプチャをPhotoshopでレタッチ。lifeza…

人気記事

  1. 城ドラ 11/30 キャラ能力バランス調整 まとめ
  2. 城ドラ タートルキャノンはおすすめ!フル装備にして感じた事
  3. 【おすすめアプリ】パチスロコードギアス 反逆のルルーシュR2「777NEXT」
  4. iPhone7 / iPhone7 Plusに機種変更する方は念のためアプリの引継ぎを確認しよう。
  5. iPhoneのライトニングケーブル根本断線を予防するマストアイテム

カテゴリー記事一覧

PAGE TOP