スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう～ 第1回：劣化知らずの「スマートオブジェクト」
スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう
この連載では、PhotoshopでWebデザインするときには欠かせない 「スマートオブジェクト」の特徴と、デザイン作業を効率化するヒントをご紹介します。
スマートオブジェクトの特徴
Web制作では修正や更新作業など、デザインの細かい修正作業が多く発生します。これがしばしばPhotohsopではデータ劣化の原因となります。そんなとき、スマートオブジェクトを活用すれば、画質を劣化させずに編集することができ、大変便利です。
スマートオブジェクトの大きな特徴は大きく分けて以下の3つです。この連載では３回に分けて、それぞれのポイントをご紹介します。
- データを劣化させること無く変形が行えるため、直しに強いデータ作成が可能となります。
- 1 つのスマートオブジェクトを編集すると、デザイン内に配置された全てのコピーが自動的に更新されます。
- 「スマートフィルター機能」でフィルターの値の再調整や削除などが可能です。
画像の拡大縮小による問題
スマートオブジェクトを使わずに画像サイズを変えた場合の問題点を見てみましょう。Photoshopは、「ラスター形式」と呼ばれる、四角いドット（ピクセル）の集合で構成された画像を加工・編集します。JPEG, BMP, PNGなどは全て「ラスター形式」です。デジカメなどの外部デバイスから取り込んだ写真もこの「ラスター形式」に該当します。
ラスター形式の画像はドットで構成されています。
通常のラスター画像を編集するとドットの保持する色情報が書き換えられます。では、この画像を「ラスター形式」のまま、つまり普通に画像を開いた状態のままで、［縮小］して再度［拡大］してみると、どうなるでしょう？
画像を縮小すると、画像を構成するドットの数が減るため、オリジナルのドットの色情報が破棄されます。そして、再度拡大した時、元の色情報はもうありません。その結果、下のように画像が劣化し、ボケてしまいます。
縮小と拡大により劣化した画像
実際のデザインの現場では、画像の位置や大きさなどを試行錯誤することも多いと思います。そのときに、このように「ラスター形式」の画像のまま拡大縮小を繰り返したらどうでしょうか。どんどんドットの色情報が破壊されて、上の写真と同様に、試行錯誤の分だけ画像が劣化してしまいます。
しかし、この劣化はあらかじめ最初の段階でラスター画像をスマートオブジェクト化しておくことで防ぐことができるのです。
スマートオブジェクトは「ラスター形式」の画像データの“元”を保持したオブジェクト形式です。”元”を保持しているため、編集によりドットの情報を失うことがないのです。また、Illustratorで作った「ベクトル形式」のデータもスマートオブジェクトとしてPhotoshop内で扱えます。この場合は、元の「ベクトルデータ」が保持されています。
それでは、「ラスター形式」の画像を例に、スマートオブジェクトの生成、編集方法を見てみましょう。
スマートオブジェクトの作り方
任意のラスター形式の画像をスマートオブジェクトにする
ある程度のレベルまで加工した上で「スマートオブジェクト」化した方がよい場合、例えば修正が必要な写真の場合は、レタッチが終わった任意の段階で「スマートオブジェクト」に変換します。［ファイル］→［開く］で先ほどと同じ画像を開いてみましょう。
画像を開くとレイヤーパネルに画像レイヤーが追加される
背景レイヤーとして通常（ラスター形式）の画像レイヤーが開きました。左側の小さい画像をレイヤーサムネールと呼びます。
これをスマートオブジェクトにするには、レイヤーを選択した状態で、レイヤーパネルの右上にある［パネルメニューアイコン］、もしくは選択したレイヤーの右側で［control］+クリック（右クリック）し、［スマートオブジェクトに変換］を選択します。
パネルメニューアイコンから［スマートオブジェクトに変換］を選択
スマートオブジェクトに変換された
スマートオブジェクトレイヤーに変換すると、青丸部分の表示が変わり、レイヤーサムネールがスマートオブジェクトサムネールになります。
スマートオブジェクト化された画像は、先ほどの画像と異なり、縮小した上で拡大をしてみても、画像の劣化がないことが確認できます。
スマートオブジェクト化後に拡大縮小を繰り返した画像
スマートオブジェクトとして配置する
最初からスマートオブジェクトとして画像を配置したい場合は、Photoshopで開いているファイル内で ［ファイル］→［リンクで配置］／ ［埋め込みで配置］を選択して画像サイズを調整の上配置します。
新規で白い背景のPSDファイルを作成し、その上に画像を［配置］
Illustratorのデータもこの方法でスマートオブジェクトとして埋め込めます。
スマートオブジェクトの編集
スマートオブジェクトは、サイズの変化による劣化が起きない代わりに、色調の変更や画像の修正などといった作業が直接行えません。スマートオブジェクトをPhotoshop内で編集するには、大きく分けると２つの方法があります。
スマートオブジェクトをラスター形式に変更する方法
スマートオブジェクトを元のラスター形式に再変換します。スマートオブジェクトレイヤーの右側で［control］+クリック（右クリック）して［レイヤーをラスタライズ］を選択します。この場合、「スマートオブジェクト」ではなくなるので、画質の劣化に注意しましょう。
［スマートオブジェクト］→［ラスタライズ］と選択したところ
レイヤーメニューからも同様の手順で変換可能です。
スマートオブジェクトを別のデータとして開く
画像を作業の都度ラスター形式に変換するのも面倒ですし、特にIllustratorのベクター形式のデータなどはパスのデータが破棄されてラスター形式になってしまうので、再編集できません。そこで、次は「別のデータとして開く」方法を紹介します。
スマートオブジェクトは次のいずれかの操作で、別のPhotoshopのデータとして開いて編集ができます。
- スマートオブジェクトレイヤーのサムネール部分をダブルクリック。
- ［パネルメニューアイコン］で、［コンテンツを編集］を選択。
パネルメニューアイコン（青丸）から［コンテンツを編集］を選択、もしくはスマートオブジェクトサムネール（赤 丸）をダブルクリックします
元データがラスター形式の画像の場合、別のPSDデータとしてファイルが開きます。また、Illustratorで作成したデータのスマートオブジェクトをこの方法で開くと、Illustratorが立ち上がるので、.aiデータとしてベクトルデータの編集ができます。
これらのファイルに編集を加えて保存すると、元のファイルのスマートオブジェクトに変更内容が反映されます。
以上がスマートオブジェクトの基本的な操作です。
次回はスマートオブジェクトの編集機能を活かした、画像やボタンなどの一括変更の方法や、「リンクでの配置」「埋め込みでの配置」の使い分け、「収集」機能のご紹介などを、制作の実例を交えて紹介します。
スマートオブジェクトの実例や「オブジェクト」の考え方についてはこちらもご覧下さい：
PhotoshopでWebデザインを始めよう／第四回： ロゴを配置して、背景パーツを作成しよう
注 ： この記事では、Mac OS Xを基本に解説しています。ショートカットは、「command（Ctrl）」のように、Windowsの場合を括弧内で表記しています。