スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう～ 第2回：「スマートオブジェクト」と「配置」の活用で徹底時短

連載

スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう

前回に引き続き、Webデザインには欠かせない「スマートオブジェクト」の機能をご紹介します。今回はスマートオブジェクトの編集機能を活かした画像やボタンなどの一括変更の方法や、「埋め込みで配置」「リンクで配置」の使い分けについて解説します。

Photoshop CC の体験版をダウンロード

配置したコピーをまとめて変更

下のWebページのデザインを見てください。同じバラのアイコンが何度も出てきます。

同じアイコンが繰り返し並ぶデザイン

配置が一通り済んだ後になって、この「バラのアイコンの色を全部変えたい」という修正が入るケースは多いものです。すべて消して一つ一つ配置し直すのは大変ですね。

そんなときは「スマートオブジェクト」の特徴を活かしましょう。アイコンをスマートオブジェクト化して、そのコピーして配置しておくことで、編集作業が生じた際に、すべてのコピーをいっせいに変更できます。

スマートオブジェクトの読み込み

上のバラのアイコンはIllustratorで作られています。これを［ファイル］→［埋め込みを配置］から、読み込みます。IllustratorのAIデータの場合は「スマートオブジェクトとして開く」というダイアログが出ますので、[OK]を選択します。

ダイアログボックスが出たらそのまま[OK]を選択します。

スマートオブジェクトのコピー

読み込んだアイコンはスマートオブジェクトに変換済みです。Photoshopのカンバス上で適切なサイズに変更しましょう。

サイズが決まったら、次はスマートオブジェクトを必要な数だけコピーします。スマートオブジェクトが含まれるレイヤーを選択して、［レイヤー］メニューから［レイヤーの複製］を選択し、ダイアログが表示されたら［OK］をクリックします。

必要な数だけ揃ったら、アイコンを配置していきます。今回のような等間隔の配置は、［移動ツール］パネルの［垂直方向中央を分布］を使うと楽でしょう。

レイヤーを複製したところ

スマートオブジェクトを使ったデザインができました

スマートオブジェクトの編集

アイコンをスマートオブジェクトのコピーと置き換えたところで、冒頭の「アイコンのバラの色や形を全部変えたい」という修正を反映させてみましょう。

「バラのアイコン」のスマートオブジェクトを含むレイヤーを１つ選んでダブルクリックすると、Illustratorが立ち上がり、バラの花のデータが編集可能な状態になります。ここでは、バラの花の色を赤から青に変え、茎の形を少し変更してみましょう。

Illustratorで「バラのアイコン」を変更しました

［ファイル］メニューから［保存］を選択し、Illustratorファイルを閉じます。

Photoshopに戻ると、全てのバラがブルーに変わっていることが分かります。

「バラのアイコン」がすべて青になりました

アイコンだけでなく、バナーや装飾要素など、同一ファイル上で複数回使用する「部品」をスマートオブジェクト化し、コピーして使用することで修正の「時短」が可能です。

同時に修正を反映したくない場合

同じ元データを使っていても、更新は別途行いたい場合もあることでしょう。例えば、上のデザインで、写真の上のアイコンは赤いバラのままにしておきたい場合です。

そんなときは、コピーしたスマートオブジェクトとは別に、改めてデータをスマートオブジェクトとして配置します。新規に読み込んだスマートオブジェクトを写真上のアイコンとして配置すれば、左カラムのアイコンと、写真上のアイコンは別のスマートオブジェクトのコピーです。

写真上のアイコンは新規に配置したスマートオブジェクトです。

以降、左カラムの青いバラと、右カラムの赤いバラが同時に変更されることはありません。

以上が、スマートオブジェクトのコピーの特徴です。

［埋め込みで配置］と［リンクで配置］の使い分け

Photoshopでスマートオブジェクトを配置するには、［ファイル］メニューから、［埋め込みで配置］と［リンクで配置］の２種類が利用できます。［リンクで配置］は2014年1月公開のPhotoshop CCから追加された機能です。それぞれの特徴は下の通りです。

［埋め込みで配置］

［リンクで配置］

この２つの配置の違いについて、具体的に見ていきましょう。

編集後の元データの違い

下の図ではデスクトップ上に、「写真」という 素材フォルダ と、その素材を使ったPhotoshopのPSDデータがあります。

「写真」フォルダとPSDデータ

この素材の中から、中央に使っている赤いバラの写真を［埋め込みで配置］で配置した場合と［リンクで配置］で配置した場合で、オブジェクト編集後の元データを比べてみることにしましょう。

まずは、〔埋め込みで配置〕した場合です。

［埋め込みで配置］した場合のレイヤーパネル

レイヤーサムネールはスマートオブジェクトサムネールの表示になります。この状態で、レイヤーをダブルクリックして、赤いバラの写真の色を別途開き、彩度を白黒に落として[保存]します。デスクトップ上のデータを確認してみましょう。

[埋め込みを配置]で編集した場合

PSDデータでは色が変わっていますが、「写真」フォルダの元画像（赤丸部分）には影響がありません。これはPSD内に元画像が埋め込まれているためです。

次に、［リンクで配置］した場合を見てみましょう。

［リンクで配置］した場合のレイヤーパネル

［リンクで配置］で配置を行うと、レイヤーサムネールのアイコンが鎖のマークになります。

のデータも同様に、レイヤーをダブルクリックしてオブジェクトを編集、保存し、元画像の状態を確認してみましょう。

[リンクを配置]で編集した場合

PSDデータの編集と連動して「写真」フォルダの元画像が編集されたことが分かります。Photoshopデータに「写真」フォルダー内のデータがリンクしますので、編集すると元のデータを開いたことになり、編集結果が元データに反映されます。

リンクと埋め込みの切り替え

一旦配置したオブジェクトの「埋め込み」と「リンク」を後から［属性］パネルを使って変更できます。これは2014年6月公開のPhotoshop CC から利用できる機能です。

［属性］パネルから配置の種類を切り替え

リンクとして配置したデータを埋め込みに変えると、外部ファイルから、データをPSD内に取り込みます。

一方、埋め込みで配置したデータをリンクに変更すると、PSD内のデータを外部ファイルとして書き出します。その際、保存先を指定するダイアログが表示されます。

保存先を指定するダイアログ

ここでは、保存先をデスクトップにし、［保存］します。

リンク用の画像photo2（黄色いバラ）が別途書き出される

「写真」フォルダーの外に、「photo2.jpg」がコピーされているのが確認できます。このように、属性パレットから配置と埋め込みの変換を行うと、別途画像がコピー・書き出されてリンク扱いになります。

また、保存先を元画像と同じフォルダーに指定すると、元の画像データが「上書きの後にリンク」されます。最初に埋め込みで配置した「元データとリンクし直す」のではないことに注意しましょう。

［リンクで配置］の活用法

［リンクで配置］は、写真だけでなくPSDデータそのものに適用できます。例えば、Webデザインに必要なヘッダー、ナビ、フッターなどの共通パーツをあらかじめ別のPSDとして作成しておき、それぞれを［リンクで配置］でスマートオブジェクトとして配置します。

左カラムとフッターを別に作って［リンクで配置］した例

このように共通パーツをリンクしたPSDファイルで作業を行うことで、配置した共通パーツに変更が生じた際でも、元のPSDを編集すれば、［リンクで配置］した、すべてのPSDの該当箇所が更新されます。

リンクされている共通パーツのPSDを編集

たとえば上のように、フッターの背景色を変えたい場合、共通パーツのPSDだけを編集すれば、［リンクで配置］されているすべてのPSDファイルのフッターが自動的に置換されます。

［リンクで配置］は、複数のデザイナーで1つのサイトを扱う場合や、ページ数が多いWebサイト制作などで特に活用したい機能です。

まとめ

Webデザインの制作にスマートオブジェクトを活用することで、同じパーツの一括変更が簡単に行えます。［埋め込みで配置］は、元画像への影響を考えずに気軽に使えるので、ランディングページなどの単発的なデザインや、別の媒体でも使っているような画像を素材として使用する場合は［埋め込みで配置］を使うのが良いでしょう。

一方で、Web用に支給されたデータを複数のデザイナーが共有するケースは、あらかじめ［リンクで配置］を使うようにルール付けしておくと、必要データを正確に管理でき、データ容量も軽くて済むので便利です。また、共通パーツを「リンク」扱いにすることで、複数のファイルを扱う作業でも、常に最新のデザインデータで作業できます。

ただし、この［リンクを配置］で配置したオブジェクトやPSDファイルを編集・保存すると、自動的に元データが上書きされてしまいますので、「やっぱり元に戻したい」時などに対応ができません。元データについては、作業前に念のため別の場所へバックアップを取った上での作業をお勧めします。

また、リンクしている外部ファイルデータだけを別途変更すると、元のPSDデータが適切に編集できないこともあります。最後にその場合の対処方法を説明します。

[リンクを配置]使用時の注意点

[リンクを配置]を使用する場合、元データの編集後にヒストリーパネルなどでPSDデータを編集前の状態に戻したり、「画像」フォルダから別の場所に元データファイルの位置が変わると、参照元のデータのバージョンが異なる、あるいは見つからないために警告が表示されます。

リンクされた元のスマートオブジェクトデータに異常がある場合（バージョンが異なる）

ファイルのバージョンが異なる場合はレイヤーパネルを［control］+クリック（右クリック）で［変更されたコンテンツを更新］を選択すると、最新のデータに置き換わります。

リンクファイルが見つからない場合

元のファイルが見つからない場合は、上のようなアイコンになり、ダブルクリックで編集しようとすると、ファイルを再リンクするようにダイアログで促されます。

また、元ファイルが見つからない状態で、カンバス上の該当オブジェクトをダブルクリックして編集しようとすると、下のように該当オブジェクトのラスタライズを促されます。

ラスタライズするかを確認するダイアログ

元データがリンクできない場合は［OK］を選択するとラスタライズされ、通常のオブジェクトとして編集できます。

以上が「配置」機能についての特徴です。

次回はスマートオブジェクトの「フィルター」についてご紹介します。スマートオブジェクトにした上で、フィルターを使うと「スマートフィルター」として、再編集や微調整が簡単に行えます。また、リンクファイルが含まれたデータを受け渡す時に便利な「パッケージ」機能についても取り上げます。