もっと楽しく！Photoshop活用でデザインの表現力UP 第4回：スマートオブジェクトを活用したWebデザインの進め方 後編 ：「レイヤーカンプ」でこんなにラクラク作業
Photoshop CC （2014年10月公開） 対応
とっても便利なスマートオブジェクト。でも、画面ごとに表示が少しづつ変わるからやっぱり共通化は無理…。いえいえ、実は属性パネルからリンク元のレイヤーカンプが指定できるのです(Photosho CC 2014 リリースから)。後編はスマートオブジェクトを120%活用するためのテクニックをご紹介します。
前編ではリンクされたスマートオブジェクトを配置することで、共通パーツを外部化したページデザインを行いました。後編は外部化したパーツの表示を「レイヤーカンプ」でコントロールする方法と、スマートオブジェクト使用時の注意点についてご紹介します。
全体のステップは以下の通りです。(STEP4以前は前編でご紹介しています)
STEP1 ファイル構成の検討
STEP2 ベースデザイン
STEP3 展開デザインと共通パーツの外部化
STEP4 スマートオブジェクトの調整
STEP5 レイヤーカンプを配置先からコントロールする
STEP6 納品
TIPS スマートオブジェクト使用時の注意点
STEP5 レイヤーカンプを配置先からコントロールする
ヘッダー
前編はページのヘッダーを外部リンクのスマートオブジェクトとしてページ間で共有化しました。
ヘッダーのナビゲーションにカレント表示(表示中のコーナーを示すピンクの横線)を含むので、配置するページによって示す箇所を切り変えたいですね。
そこでレイヤーカンプを利用して、表示の切り替えを配置先のページからコントロールできるようにします。 （レイヤーカンプの詳細はこちらの記事の5をご覧ください）
レイヤーパレット］から配置したheader.psdをダブルクリックで開き、「HOME」、「CATEGORY」などそれぞれのページを示す横線を表現したレイヤーを作成します。
続いて各ページごとにレイヤーカンプを作成します。例えば、記事詳細ページ (01_detail.psd)であれば、「SPECIAL」以外のコーナーを指す横線を非表示にして、［レイヤーカンプパレット］から［新規レイヤーカンプを作成］ボタンをクリックします。分かりやすいようにレイヤーカンプに「SPECIAL」と名前をつけます。
同様に他のコーナー分のレイヤーカンプを作成します。全て作成したらheader.psdを保存して01_detail.psdに戻ります。
［属性パネル］を表示すると、先ほど作成したレイヤーカンプが選択できるようになっています。
レイヤーカンプから「SPECIAL」を選択すると、ヘッダーの「SPECIAL」の下に横線が表示されます。これで外部リンクされたスマートオブジェクトの表示を、配置先のページから切り替えができるようになりました。
header.psdひとつで各コーナー分を表示できるので、ファイル構造が分かりやすくなりますね。
STEP6 納品
デザインが一通り完成しました。コーディングなどデザイン以降の作業のために、別の担当者に渡す時は以下に注意しましょう。
納品先のPhotoshopのバージョン
過去バージョンのPhotoshopの場合、対応していない機能を使用しているとpsdを開くときに以下のアラートが表示されます。
「このドキュメントには、レイヤーを編集可能なままにしておくと破棄される不明なデータが含まれています。編集不可能にして元の外観を維持するには、「統合」を選択して合成データを統合画像として読み込んでください。」
「リンクされたスマートオブジェクト」に対応していないバージョンでは「統合」でラスタライズされてしまいます。バージョンが異なることがあらかじめ分かっている場合は、納品先で編集する必要があるかどうかを確認しましょう。
過去バージョンでpsd内のマートオブジェクトとして編集可能な状態を保持したい場合は「リンクされたアイテムの埋め込み」で埋め込みスマートオブジェクトに変換してファイル内に持たせるとよいでしょう。
レイヤーパネルの「スマートオブジェクト用フィルター」で一覧化が可能なので、状況や引き渡し先の環境に応じてpsdを整理して納品しましょう。
ファイルの構造の説明
前編の冒頭でご紹介したように、ファイルの構造を予め納品先に伝えておくと概要を把握しやすくなるので親切ですね。
例えば01_detail.psd(記事詳細ページ)を先にコーディングする必要があり、このpsdだけ先に納品するので「_data」フォルダ以下はロゴと数点の写真のみ必要、というケースを想定します。
トップページや他のページで使用している写真はまだ必要ないため、必要なファイルのみを集めるためにパッケージ化しましょう。書き出し先のフォルダを指定するとその画面に紐付いたファイルを集めてくれます。
1つの画面だけ先に納品する時などにも有効です。
パッケージ化について詳しくはこちらの記事をご覧ください。
カレント、ロールオーバーなどの状態の説明
カレントやロールオーバーの各状態のpsd内での表現方法は、ご紹介したレイヤーカンプに設定する以外にも様々です。
通常のレイヤーとして用意しておき、表示・非表示で切り替える場合は、psdをぱっと見ただけでは分かりづらい可能性があります。jpgやFinderのサムネイルだけでは伝わりづらい箇所は、レイヤーコードの説明を図にするなど資料化してpsdの概要を伝えておくと納品後もスムーズに進行できます。
Tips スマートオブジェクトの使用上の注意点
いいことずくめのように見えるスマートオブジェクト。ただし苦手なこともあるので、特性を理解した上で活用しましょう。
＊2015年1月時点の機能についての注意点です
Point 1
シェイプレイヤーはPhotoshop単体ではベクトルデータのスマートオブジェクトにできません。ビットマップデータだと元のサイズより拡大すると劣化して表示されます。
劣化させずに拡大するにはスマートオブジェクトの元の大きさを変更するか、一旦Illustrator形式でパスを書き出し、書き出したファイルをIllustratorで開いてコピー&ペーストで再配置が必要になります。
Point 2
スマートオブジェクト化した際のカンバスサイズは、表示していない領域も含んだ最大サイズとなります。見た目は小さくても、レイヤーマスクや非表示で残しておいたレイヤーのサイズもカンバスに含まれます。
今回のようにデザインができてから外部化する場合はカンバスサイズに注意してください。また、外部化したpsdの縦横サイズを変更すると、配置先のpsdにも影響があります。
Point 3
フィルターの情報をそれぞれのスマートオブジェクトが持っているため、変形やカンバスサイズの変更で再描画が必要となった際に処理が遅くなることがあります。
Point 4
一度スマートオブジェクト化すると戻れません。リンク⇄埋め込みの変更は可能ですが、元のレイヤーの状態に戻すことはできません。
都度スマートオブジェクトを開いて編集して保存、もしくはスマートブジェクトを開いて丸ごと元のpsdに移すという手順が必要となるため、全体のバランスを見ながら繰り返し細部を調整する作業には不向きです。
基本のデザインがある程度確定してからスマートオブジェクト化するようにしましょう。
Point 5
元データのカラープロファイルは反映されません。印刷用のデータやカメラ固有のものなど作業環境とは異なるカラープロファイルが入っている場合がありますが、リンクの場合は無効になってしまいます。
作業環境に揃える場合は元データを開いて変換する必要があります。カラー設定で［プロファイルの不一致］のオプションにチェックを入れて、配置した写真データを開いて変換しましょう。
いかがでしたでしょうか。スマートオブジェクトの登場でPhotoshopのデザイン作業が劇的に効率化したと言っても過言ではありません。得意・不得意なことを理解した上で、ぜひ実際のデザイン業務にフル活用してみてくださいね。