WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

最近、photoshopで一括修正ができる裏技を発見したので、ご紹介したいと思います。この方法だと、作業時間と手間がかなり省けるように思います＾＾

量産したデザインに修正が入ったら？

お仕事でデザインを作っていると、修正や変更はつきものです。
例えば、下のような見出しのデザインを作ったとします。

この見出しを量産して、デザインを作っていきます。

ここまで作ったところで、

『やっぱり見出しの色を変えたいな・・・』

というご要望があった場合、どうしますか？
実際にはもっとたくさんの見出しを作ることもあるので、量産してしまった後にデザイン変更が入ると、少し色を変えるだけでも時間がかかってしまいます。
でも、お客さんも待っていることですし、軽い修正なら少しでも早く終わらせて、確認してもらいたいですよね。

そこで、同じデザインで量産したパーツを一気にまとめて修正できる裏技を、あらかじめ仕込んでおくと便利なのです。

スマートオブジェクト機能を利用する！

スマートオブジェクトはご存知でしょうか？
デザインに写真を入れたり、Illustratorなどで作ったイラストをはめ込んだりすると、その写真やイラストのphotoshop上のレイヤーは「スマートオブジェクト」となります。
これは、画像のデータを外部から読み込んでいる形になっているため、直接編集することができません。
編集するには、スマートオブジェクトのレイヤーをダブルクリックし、別のデータとして開いた上で作業をする必要があります。

コーディングで例えるなら、元のデザインがhtmlとすると、スマートオブジェクトはCSSのような立ち位置になるかもしれません。

デザイン上でスマートオブジェクトをコピーで増やしてから、スマートオブジェクトを開いて編集すると、コピーで量産したものすべてに編集結果が適用されます。
これを利用するのです。

まずは、準備

量産予定のレイヤーをグループ化する

見出しのように量産する予定のあるパーツを1つ作ったら、テキスト以外をグループ化します。
グループ化については、グループにしたいレイヤーを「Shift」キーを押したまま選択してから「Ctrl」＋「G」で、できます。

このとき、テキストなど量産のたびに変更する部分を含めないように気をつけてくださいね。
また、グループには分かりやすい名前をつけておくと尚良いです。

グループをスマートオブジェクト化

そうしたら、このグループをスマートオブジェクト化します。
グループのレイヤーを選択した状態で右クリックをすると、「スマートオブジェクトに変換」というのがありますので、選択してください。

レイヤーのアイコンが変わったらOKです。
これで下準備ができましたので、量産しましょう★

スマートオブジェクトを修正

スマートオブジェクトを開く

先ほど作った見出しデザインに修正が入りました。
まずは、スマートオブジェクトを開きましょう。

スマートオブジェクトレイヤーのアイコンをダブルクリックします。

すると、元のデザインとは別ウィンドウで、見出しの背景のレイヤーだけが入ったデザインデータが開きます。

見出しデザインを修正

今回は、ベースの色だけ修正します。
修正ができたら、保存します。

元のデザインの見出しの色が、一気に変わりました！
コピーしたものでも、同じものを読み込んでいるので、同じように反映されるんですね。

形も変えられます

次の例は、アイコンです。
見出しより量が多いので、量産後の修正がますます大変になりますが、こちらもスマートオブジェクトを使えばラクラクです。

スマートオブジェクトを開く

別ウィンドウで、スマートオブジェクトを開きます。
上のように、元のデザインとスマートオブジェクトを並べて作業すると、色の雰囲気などが元デザインに合っているかどうかを確認しながら修正できるので、おすすめです。

アイコンデザインを修正

丸いアイコンにしましたが、四角いアイコンに変更、色も変えます。

保存すると、こちらもまとめて修正ができました！
一覧ページやフッターリンクなどをデザインする際に、重宝しそうです。

スマートオブジェクト化のメリット

作業時間を短縮できる！

普通にデザイン修正をしようと思うと、1つを修正してからまたコピーし直さなければなりません。
難しい作業ではないのですが、量が多いと結構大変です。
1つ修正するだけでまとめて変えられると、修正作業分しか時間をかけなくて済むので、1つ変えるのも100個変えるのも同じ時間でできるので便利です。
ただし、念のためちゃんと全部変わっているかどうかチェックはしておきましょう。

間違いが起こりにくい

修正したものをコピーで量産し直すと、ずれてしまったり作業を1つ忘れてしまうなど、ミスが起こりがちです。
スマートオブジェクトなら同じデータを読み込んでいるため、必ず同じデザインに統一されるので安心ですね。
もちろん、こちらもあとでチェックはしておきましょう。

スマートオブジェクト化の注意点

変えたくないものも変わってしまう

最初にグループ化するときに、文字など毎回変わるものを巻き込まないように注意しましょう。
もしやってしまっても削除すれば良いのですが、うっかり消し忘れてしまうこともあります。
最初に確認しておきましょう。

また、例えば色違いのものを作りたいときに、スマートオブジェクトを変更してしまうと、すべて変わってしまうのでご注意ください。
少しでも違うデザインのものを作るときには、パーツデザインをスマートオブジェクトとして開いてから、レイヤーをドラッグ＆ドロップで元のデザインに持って行きます。
そこで改めてスマートオブジェクト化すれば、別のオブジェクトとなり、個別に編集することができます。

サイズを変えるとずれてしまう

スマートオブジェクトでサイズを変えることもできます。
スマートオブジェクトのキャンバスサイズは、含まれている要素にぴったりのサイズとなっているので、サイズを変えたいときはキャンバスサイズもそれに合わせましょう。

しかし、サイズ変更をすると、当然ですが元のデザイン上での位置が変わってしまい、余白などにずれが起こります。
（CSS変更なら全体に調整されますが、こちらは画像しか変わりません）
サイズ変更をした場合は、あとで配置の調整も忘れずに行いましょう。

量産を利用して効率を上げよう

コーディング修正はCSSを変えるだけで一気にできていいな・・・と思っていましたが、photoshopでも可能でした。
いろいろ注意点はありますが、上手く利用して手早く修正をしましょう♪