Webバナー制作に役立つPhotoshop 5つの小技

 業務でアドビ株式会社の画像編集ソフト「Photoshop」をお使いの方も多いと思います。古くから2次元コンピュータグラフィックスの分野を代表するソフトで、当初は専門家やプロの間で使用されていましたが、今では廉価版も登場し、一般の方でも趣味でお使いの方も多いでしょう。
 当社でもエディトリアルデザイナーやグラフィックデザイナーを中心に、Webや画像加工やウェブバナー、GIFアニメーション、ロゴデザインやイラスト制作など、非常に幅広く活用されていますが、それだけにすべてを理解するのは難しいという面もあります。
 そこで今回は同じ苦労をされている方に少しでも情報共有できればということで、当社のデザイナー陣が普段から使用している、知っていればちょっと便利な機能をいくつかご紹介したいと思います。

 

小技その1:レイヤースタイルの効果を拡大縮小する

 レイヤーに光彩(外側)やドロップシャドウの効果をつけたあと、自由変形をするとオブジェクトが拡大・縮小されますが、このとき光彩(外側)やドロップシャドウなどの効果までは拡大縮小されません。
 そのため毎回レイヤー効果の数字で調整していませんか?

 これを回避するには、レイヤースタイルの効果を拡大・縮小すればOK。レイヤースタイルの設定数値を一括で拡大・縮小することができます(※レイヤーごとに行う必要はあります)。

【手順】
①レイヤーにレイヤースタイル効果がついている状態で、レイヤー名の右にある「fx」をマウスの右クリック。
②ポップアップされた項目から「効果を拡大・縮小」を選択すると、%での拡大・縮小ができる

 その他の方法として、レイヤースタイル効果も含めてスマートオブジェクトにすることで、拡大・縮小も一緒に変更することもできます。ただし、この方法では大幅な拡大・縮小をすると画質が粗くなるので注意が必要です。

小技その2:アートボードとスマートオブジェクトの活用

 共通のデータを用いて、複数の制作物を進める場合はありませんか。そんな業務でトラブルのタネになるのが、ファイルの管理とデータの差し替えです。
 たとえばバナーを各種サイズで制作しているとき、当然ながらデータの中身やファイル名は似てしまい、ファイルを混同するミスを招きやすくなります。また、提供されたロゴなどのデータが差し替えになると、すべての制作物を修正しなければなりません。手間はもちろんですし、工程が増えることでミスも起きやすくなってしまいます。
 これらをできるだけ防ぐ手段はないでしょうか。

 こんなときに便利なのが、アートボードとスマートオブジェクト。
 PhotoshopのアートボードはIllustratorのアートボードやIndesignのスプレッドのように、複数の制作物をひとつのファイルで制作することができる機能です。
 また、スマートオブジェクトはロゴやキャッチコピー、アイコンなど共通するパーツを一括で差し替えすることができます。
 制作開始段階で、ある程度どれをスマートオブジェクトにするかなど計画しておくと、後々の作業効率もさらに上がります。

※スマートオブジェクトに一度変換すると解除するためには一度スマートオブジェクト自体を開いて、中にあるレイヤーをコピーする必要があります。Photoshop2020以降はプロパティにある「レイヤー変換」でスマートオブジェクトを解除することが可能となりました。

【手順】
●アートボード
①対象のレイヤーまたはグループレイヤーをマウスの右クリックまたはレイヤーウィンドウの右上のメニューボタンでメニューを開く
②レイヤー別にする場合は「レイヤーからのアートボード」を選択
グループレイヤー別にする場合「グループからのアートボード」を選択

※オブジェクトが画面外にはみ出している場合は一度全選択(コマンド+A)でレイヤーウィンドウの下部にあるカメラアイコン(マスク)にすることで解消されます。

●スマートオブジェクト
①対象のレイヤーをマウスの右クリックまたはレイヤーウィンドウの右上のメニューボタンでメニューを開く
②「スマートオブジェクトに変換」を選択

 

小技その3:アートボードを個別PSDに書き出し

 複数のアートボードを使用したひとつのファイルから、アートボードごとの個別PSDデータを書き出したいときはどうすればいいのでしょうか。

【手順】
① 対象のアートボードをレイヤーウィンドウから選択
② メニューの「ファイル」→「書き出し」→「アートボードからファイル」を選択

 

小技その4:自由変形の拡大縮小起点を指定する

 オブジェクトを自由変形すると、デフォルトではアンカーポイントがオブジェクトの中心にあります。これはオブジェクトの中心を起点として自由変形できるということなのですが、この起点を動かすためには、オプションバーにオブジェクトの左上、左中心、左下、上中心、中心、下中心、右上、右中心、右下と9つの起点変更が可能です。
 しかしそれ以外に座標で場所を指定することが可能です。たとえば画面サイズよりも大きなオブジェクトを自由変形する場合に画面サイズ内で変形させたいときなどに有効です。

【手順】
① 対象レイヤーを選択後、メニューの「編集」→「自由変形(コマンド+T)」をするとオブジェクトに自由変形のアンカーが表示
② このとき中心にあるアイコンを少しドラッグ&ドロップすると、オプションバーにあるX,Y座標に数値を入力してアンカーポイントだけ移動することができる

 

③ その後、通常どおり変形をすれば、数値入力したアンカーポイントの起点で自由変形が可能

小技その5:グループレイヤーの一括折りたたみ

 複数のレイヤー構成で制作する場合、グループレイヤーにまとめるなど整理して制作していきますが、グループレイヤーを開きすぎてしまうとどこに何があるのかわからなくなってしまいます。

 そんなときは一度グループレイヤーをすべて閉じることで、対象のレイヤーを見つけやすくなります。
 この機能はデフォルトではメニュー内にもないため、ショートカットですぐ使えるようにしておくと大変便利になります。

【手順】
① メニュー「編集」→「キーボードショートカット」→エリア「パネルメニュー」→パネルメニューコマンド「レイヤー」
② 「すべてのグループを折りたたむ」を選択してショートカットを設定する

 

 

おしまいに

 いかがでしたでしょうか。
 今回は当社のデザイナー視点によるPhotoshopの小技を紹介させていただきました。もちろん、ご紹介した小技は機能のごくごく一部です。こういった小技は、自分の業務にあわせた日々の作業を進めるなかで、検証を積み重ねることで生み出されることも少なくありません。ぜひ、皆さんもチャレンジしてみてください。

 また、業務でPhotoshopは必要だけれど、使えるスタッフがいないという企業様。当社ではWebや出版物の画像加工やバナー制作、GIFアニメーション、ロゴデザインやイラスト制作に至るまで、幅広く画像関係の業務を承っております。 特に最近はゲーム内バナーやSNS用の静止画・動画のウェブバナーなどをご評価いただいておりますので、なにかお困りの際はぜひお気軽にご相談ください。

■関連リンク

・制作実績 広告販促物
https://www.qbist.co.jp/works/promo.html

・バナー制作のご相談はこちら
https://www.qbist.co.jp/contact/offer.html

関連記事