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. facebookのいいねボタンに5種類の感情ボタンが出現!
  2. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  3. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  4. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  5. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  6. table装飾時に持っておきたいベーステンプレートとなるCSS
  7. LINEで郵便局の荷物追跡や再配達ができる!?
  8. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…

コメント

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

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

おすすめ記事

OVERHIT(オーバーヒット) 風属性レイドボス「アラクネス」7月26日(木)開始!

7月26日(木)からは、風属性レイドボス「アラクネス」が登場します。風属性なので、炎属性のパーティで…

OVERHIT(オーバーヒット) 7/12開始、水属性「VS リエージスタイン」のまとめ。

7/12より水属性レイドボス「リエージスタイン」が登場します。★5武器・防具・アクセサリーなどの…

OVERHIT(オーバーヒット) 待望のレイドバトル「討伐戦」についてまとめ。

2018年6月26日(火)05:00~7月16日(月)04:59迄 開催される初のイベント「討伐戦」…

OVERHIT(オーバーヒット) 毎日10時間ぐらいプレイしてみて身に付いた攻略要素まとめ

OVERHIT(オーバーヒット)は、5/29の配信開始から2週間、現在100万ダウンロードのイベント…

NEXONの新作アプリ「OVERHIT」を毎日10時間プレイしてみた感想

NEXONの新作アプリ「OVERHIT」を配信開始日5/29から毎日10時間やってみました。主にSS…

人気記事

  1. 城ドラ 11/3の新キャラは、3コスのサムライビートル!
  2. iPhone7/iPhone7 Plus はiPhone6やiPhone6 Plusのケースを流用できるのかな!?
  3. 城ドラ アンチが多いバルーンを最大限に活かす3つのポイント
  4. 千変万化の策略と戦略が魅力のウォー・アンド・ オーダー「War and Order」
  5. 城ドラ ランダムデッキ選出ボーダーラインについて

カテゴリー記事一覧

PAGE TOP