スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう～ 第3回：何度でも変更できる「スマートフィルター」
スマートオブジェクト入門～直しに強いPhotoshopデータを作ろう
前回に引き続き、Webデザインには欠かせない「スマートオブジェクト」の機能をご紹介します。今回は、スマートオブジェクトにフィルター効果をかけられる「スマートフィルター」機能について解説します。最後に、リンクされたオブジェクトを収集する「パッケージ化」もご紹介します。
Photoshopのフィルターを使うと、ぼかしやシャープをはじめ、様々な効果を適用できます。しかし、元の画像そのものに効果を掛けてしまうため、１度実行してしまうと、後から微調整が効きません。
そこで「スマートフィルター」を活用しましょう。「スマートフィルター」とは、スマートオブジェクトに適用したフィルターの名称です。
スマートフィルターの特徴は以下の３点です。
- 適用後に調整できる
- 複数のフィルターの組み合わせができる
- スマートフィルター適用後にスマートオブジェクトの編集ができる
スマートフィルターの使い方
まずはスマートオブジェクトを用意しましょう。スマートオブジェクトへの変換は、第一回でご紹介した作り方のほか、[フィルター]→[スマートフィルター用に変換]という方法もあります。
[ファイル]→[開く]で開いた画像は初期設定では「背景」となっており、この「スマートフィルター用に変換」が使用できません。「背景」レイヤーをダブルクリックして、「新規レイヤー」を選択・作成した後に［スマートフィルター用に変換］を選択しましょう。
「スマートフィルター用に変換」でも、変換できる。
スマートオブジェクトに変換できたら、再度「フィルター」メニューを選んでフィルターを掛けると、下のように「スマートフィルター」が適用されます。
「スマートフィルター」が適用される
この「スマートフィルター」は、フィルター効果を後から調整できます。
レイヤーパネルのスマートフィルターの各項目をダブルクリックして、フィルターの値を再度調整したり、目のマークをクリックすることで表示／非表示選択したり、通常のレイヤーと同様に項目をゴミ箱のマークまでドラッグすることで、削除することもできます。
複数のフィルターの組み合わせができる
「スマートフィルター」では、複数のフィルターを利用・編集できます。複数のスマートフィルターの順序を入れ替えれば、画像にフィルターが適用される順番が代わるため、フィルターの組み合わせによっては、異なる効果を実現できます。
元画像
この元画像に対して、ぼかしフィルターと、フィルターギャラリー（ラップ）を掛けてみましょう。この２つのフィルターは、単独で適用すると、それぞれ下のような効果が得られます。
２つのフィルター効果
この２つを両方適用してみましょう。
２つのスマートフィルター（１）
画像を「ぼかし」た後に、「ラップ」の効果が適用されており、滑らかな表現になっています。
フィルターの適用順を変更
このスマートフィルターの適用順序を入れ替えると、異なる効果が得られます。レイヤーパネルから適用したスマートフィルターを選び、ドラッグ＆ドロップで順序を入れ替えてみましょう。
「スマートフィルター」順序の入れ替え
すると、下のような描画になります。
２つのスマートフィルター（２）
適用順序が変わったことで、今度は、「ラップ」の効果を「ぼかし」たことになります。
このように、「スマートフィルター」は、複数のフィルターを適用したり、後から効果を入れ替えて調整することが可能です。
スマートフィルター適用後にスマートオブジェクトの編集ができる
スマートフィルターを使えば、フィルター適用後のスマートオブジェクトの再編集も可能です。例として、文字にスマートフィルターを適用した後で、再度文字を編集してみましょう。まず、テキストレイヤーをスマートオブジェクトにします。
文字をスマートオブジェクトに
このスマートオブジェクトにフィルター使用します。今回は、[フィルターギャラリー]→[ラップ]を選んで、文字に光沢感を出します。
[フィルターギャラリー]→[ラップ]
[OK]でスマートフィルターを適用します。
スマートフィルターが適用されたスマートオブジェクトの編集
今度はテキストの色を変えてみましょう。
文字を別ファイルとして開く際のダイアログ
レイヤーパネルの、テキストレイヤー左側のレイヤーサムネール（青丸）をダブルクリックして、スマートオブジェクトを開いて編集します。ダイアログ（上図）が出たら［OK］を選択します。
テキストレイヤー（Tのアイコン）が保持されたスマートオブジェクト
上のように、別途文字のみのファイルが開きました。レイヤーパネルを見ると、編集可能なテキストレイヤーの状態が確認できます。
通常のテキストと同じように、[文字ツール]や「レイヤースタイル」を使って、文字の修正や色を変えることが可能です。
色やフォントを簡単に変えられる
好みに応じて編集して保存して閉じます。元のPSDデータに戻ると、先ほどの修正が反映されています。
スマートフィルターの再調整
スマートフィルター（ラップ）は、最初に掛けた数値がそのまま適用されているので、新しい文字と合うように、こちらも変更を行います。変更を行うには、レイヤーパネルから文字のレイヤー（レイヤー名：The Rose）→「スマートフィルター」を辿り、「フィルターギャラリー」の項目をダブルクリックします。
「フィルターギャラリー」をダブルクリック
「フィルターギャラリー」が開いて編集できます。
スマートフィルターの再編集
今回は影を少し抑え、光沢のあるリボンのような質感にしてみましょう。フィルターの値を変更したら、[OK]で適用します。
調整されたスマートオブジェクト
テキストレイヤーを保持したまま、文字の色や効果を変更することが出来ました。
「パッケージ化」機能
第二回の記事で書いたように、スマートオブジェクトをリンクとして配置すると、ファイル管理が煩雑になります。これを解決するのがパッケージ機能です。2014年6月に公開されたPhotoshop CC から、必要なリンクファイルだけを自動で「パッケージ化」して、まとめる機能が搭載されました。
「リンクを配置」を利用したPSDのファイル管理
例えば、下のデザインPSDを見てみましょう。
複数の素材を使用しているデザイン
このデザインに使用している素材やデザインパーツのいくつかは、[リンクを配置]で配置されています。リンク元の素材は、「写真」、「イラスト」、「パーツ」の３つのフォルダにあります。次の画像がその様子を示したものです。
素材が複数のフォルダーに点在している状態
「埋め込み」での作業の場合は、デザインした PSD データ１つを納品すればよいのですが、「リンク」で作業・納品する場合、PSDで使用している素材の画像データも一式納品する必要があります。
しかし、素材の数が多い場合は、使用しているファイルを手作業で確認してまとめるのが面倒になりますし、もし素材とPSDデータの位置関係が途中で変わっていたり、抜けがあったりすると、納品先で正確にPSDデータを描画・編集することができない場合があるので、注意が必要です。
例えば、上の画像の例であれば、破線で囲んだ３つの素材は、左下のデザインでは使用されていません。納品時にはこれらを含まないように、ファイルの位置関係を壊さないよう注意しつつ、まとめ直す作業が発生します。こういった場合に役に立つのが「パッケージ化」機能です。
「パッケージ化」機能を利用する
それでは実際に使用してみましょう。PSDデータを一度［保存］した上で［ファイル］→［パッケージ化］を選択します。
新しく搭載された［パッケージ化］機能
保存する場所を選んで[選択]をクリックします。
保存先を選択
［選択］をクリックすると、リンクで配置しているオブジェクトとPhotoshop のPSDデータ、選択したフォルダに収集されます。「パッケージ化」されたフォルダーの名前は「<PSD データ名>フォルダー」となります。
下の画像の左から２番目が「パッケージ化」されたフォルダーです。このフォルダーを開くと、中に「リンク」フォルダーが確認できます。
「パッケージ化」されたフォルダー
リンクフォルダーを見てみると、リンクとして使用していない画像は含まれません。このように、必要なデータだけを１つのフォルダーに集めてくれるのです。素材が多かったり階層が複雑なデータの場合は、特に役に立ちそうです。
また、パッケージ化はデータを移動ではなくコピーするので、既存の環境に影響を与えないというメリットもあります。納品時にはどんどん活用したい機能です。
おわりに
ここまで説明してきたように、スマートオブジェクトは便利な機能です。しかし、画像はとにかく最初からスマートオブジェクトに！ではないことを覚えておきましょう。
例えば撮ったそのままの写真をスマートオブジェクトにして埋め込むと、PSDデータが重くなるだけです。最初に画像のゴミ取りや切抜き、色調補正などの必要なレタッチを行いましょう。
画像サイズについては、「これ以上は大きく使わないだろう」というサイズに解像度やpixel数を変換した上でスマートオブジェクトにしておくと、無駄がありません。『スマートオブジェクトへ変換するタイミング』を意識するとより効率的にデザイン作業を行えます。
スマートオブジェクトに変換する一手間は慣れないうちは面倒かもしれません。しかし、更新・修正作業や、複数の作業者でデータを扱うことの多いWebデザインでは、誰でも素早く直せるデータを作ることも、プロとして大事なスキルです。「スマートオブジェクト」、二の足を踏んでいた方も、今日からぜひ活用してみてください。