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 や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  2. 川沿いの景色 – α6400 – sig…
  3. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  4. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  5. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  6. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  7. テーブルの見出しを固定できるjsがとても便利。
  8. マーケティングオートメーションの「Mautic」導入について

コメント

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

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

おすすめ記事

雪山フォト – フォトレタッチ

投稿コメント雪山フォトrezakk399 Instagram…

ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ

投稿コメントずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる…

多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思ったけど結構時間を使った。ただ、面白い。 – フォトレタッチ

投稿コメント多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思った…

秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待。 – フォトレタッチ

投稿コメント秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待…

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

人気記事

  1. 合成する時のトーン調整レタッチ
  2. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポンシブ対応させてみよう。
  3. 本当にシワにならないの?CHOYA Shirt 日清紡のワイシャツ。1年着用したレビュー!
  4. 猫魔王ベレト戦、ソーサラーで挑んだ感想と攻略デッキについて。
  5. 8月のおすすめアプリは、リネージュ2レボリューション

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP