繰り返し利用するようなグラフィックはスマートオブジェクトで共通化しましょう!

制作物の中で繰り返し使うような同一デザインのパーツはスマートオブジェクトを利用して共通化させましょう。 まずはスマートオブジェクトの特徴を解説します。

スマートオブジェクトの特徴

元の画像データを保持したまま加工

レイヤーやレイヤーグループ、画像、Illustratorなどで作成したベクトル画像などをスマートオブジェクトとして扱うことによって元データを保持したまま様々な加工ができます。いわゆる非破壊編集が可能になります。

1つのソースを編集すれば複製したすべてに変更が自動反映される

スマートオブジェクトを複製する際、元のソースコンテンツファイルとのリンクを維持することによってひとつのスマートオブジェクトを編集することによって複製されたすべてのスマートオブジェクトに変更が反映されます。 今回のテーマである「共通化」はこの特徴を利用します。

リンク関係を保持してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [レイヤーを複製] を選択します。

他にも通常のレイヤーを複製する方法でスマートオブジェクトを複製すればリンク関係を保持した形で複製ができます。(altキーを押しながらドラッグして複製など)

リンク関係を解除してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [スマートオブジェクト] /[スマートオブジェクトを複製] を選択します。

この方法で複製されたスマートオブジェクトは独立したコンテンツとなり編集を加えても他のスマートオブジェクトに影響を与えません。

スマートオブジェクトを効果的に使った事例

複数サイズのWebバナー制作

複数サイズのWebバナー制作をする場合、スマートオブジェクトと変数機能を活用することによって かなりの効率化がはかれます。

変数機能の活用術「Web編」

Tipsをみる


レスポンシブWebデザインのカンプ制作

アートボード機能を使って複数デバイスのカンプ制作を1つのドキュメントで行う際はスマートオブジェクトを活用しましょう。

サンプルデータ(10MB)はこちらから

DOWNLOAD


広告展開イメージにもスマートオブジェクトを活用

スマートオブジェクトの共通化と変形しても元データを保持する特徴を活用した事例です。

サンプルデータ(2.1MB)はこちらから

DOWNLOAD


スマートオブジェクトの外部ファイル化

Photoshop CC 2014からスマートオブジェクトを外部ファイル化できるようになりました。。

スマートオブジェクトをリンクされた外部ファイルに変換

共有モジュールなどを外部ファイル化して別ファイルと共有することができるようになりました。修正があっても外部ファイルを変更すればリンクしているすべてに変更が反映されるのでとても便利です。

レイヤー(レイヤーグループ)、スマートオブジェクトを一発で外部リンクファイル化するスクリプトを下記ページにて公開しています。
ぶっこ抜いてリンクスクリプト


外部ファイルをリンク配置(スマートオブジェクト)

容量の大きいデータを読み込んでもリンク配置で参照するだけなのでPSDファイルを軽いままに保つことができます。


Photoshop CC 2015ではさらに進化!
ネットワーク経由でリンク配置が可能に(Creative Cloud Libraries)

Photoshop CC 2015で追加された「ライブラリ」パネルにスマートオブジェクトをドラックするだけで「Creative Cloud アセット」のライブラリにグラフィックを追加、リンクすることが可能になりました。

スマートオブジェクトを外部ファイル化するたびに保存先を指定する手間がなくなります。何よりもローカルで管理するファイルが1つですむのでスマートに作業を進めることができます。

しかしストレージ容量が20GB(個人版)と限られているのとずっとサービスが続くという保証もないので、あくまで作業中の利用にとどめて完成したらパッケージ機能でデータはひとまとめにして保存しておく運用方法がいいかなと思います。

CC 2014以前で開くとリンクエラーになってしまうので注意が必要です。(リンクエラーのスマートオブジェクトの編集はできなくなりますがドキュメント自体は開いて編集することが可能です。)