もっと楽しく！Photoshop活用でデザインの表現力UP 第3回：スマートオブジェクトを活用したWebデザインの進め方 前編：「リンクを配置」で効率よく
Photoshop CC （2014年10月公開） 対応
外部リンクが可能になってますます便利なスマートオブジェクト。便利そうなのは分かったけど具体的にWebのデザインではどう利用するの？という疑問を解決するため、実際の作業の流れに沿ってポイントをご紹介します。
今回は「スイーツ情報を集めたWebマガジン」のデザイン作成という設定で進めます。
全体のステップは以下の通りです。(STEP5以降は後編でご紹介します)
STEP1 ファイル構成の検討
STEP2 ベースデザイン
STEP3 展開デザインと共通パーツの外部化
STEP4 スマートオブジェクトの調整
STEP5 レイヤーカンプを配置先からコントロールする
STEP6 納品
Tips スマートオブジェクト使用時の注意点
STEP1 ファイル構成の検討
ある程度ページを量産してからでもよいのですが、最初の段階で構成を決めておいた方が手間が少ないため、はじめにやっておきましょう。
今回は以下のファイル構成で進めます。直接開くことの多いページデザインのpsdファイルと分けるため、外部リンクするスマートオブジェクトの置き場として「_common」という専用のフォルダを用意します。また、写真を多く使用するWebマガジンなので、共通パーツと配置写真用に「_data」フォルダを用意します。
ページデザインが複数になる場合は、通し番号を振って分かりやすいファイル名にしましょう。
今回は
・ 00_top.psd
・ 01_detail.psd
・ 02_category.psd
・ 03_map.psd
…
のように頭に通し番号を振りました。
STEP2 ベースデザイン
クライアントへのデザイン提示をトップページから行うと仮定して、トップページ(00_top.psd)のデザインから始めます。この段階では外部化はあまり意識せず、サイト全体の構成をイメージしながらバランスを見てレイアウトを進めます。
後から見て分かりやすいように、ブロックごとにグループを作成して関連レイヤーを格納します。
今回のロゴはIllustrator形式で作成しました。［ファイル］->［リンクを配置］でファイルを選択し、ベクトルスマートオブジェクトとして配置しましょう。
サイト内のアイコンとして「Go」をモチーフにしたので、これもスマートオブジェクト化して各所で使用します。
STEP3 展開デザインと共通パーツの外部化
トップページのデザインにOKが出たら、下層となる記事詳細ページ(01_detail.psd)の制作を進めます。
2ページ分のデザインが出来上がったところで、共通する部分を外部リンクのスマートオブジェクト化していきます。サイトの構成を考慮すると以下のパーツが外部化できそうです。以降の作業は01_detail.psd内で行います。
リンクのスマートオブジェクト化は［レイヤーパレット］で行います。外部化したいブロックのグループを選択して［ctr］＋クリック(またはオプションボタンをクリック)し、［スマートオブジェクトに変換］を選択します。
この状態ではスマートオブジェクトはpsd内にあるのでまだ外部化されていません。再度［ctr］＋クリックして［リンクされたアイテムに変換］すると、保存先が表示されます。「_common」フォルダを選択してpsd形式で保存しましょう。
参考：デフォルトではpsb(ビックドキュメント形式)となります。psb形式は2GBを超える（または300,000ピクセルを 超える）ファイルをサポートしているのがpsdと異なる部分です。そこまで大きなファイルでない場合はpsd形式で保存してしまいましょう。
この作業をヘッダー、右カラム、フッターのレイヤーグループに対して行い、外部ファイルとしてheader.psd、side.psd、footer.psdができました。
外部化についてはスマートオブジェクト入門 第2回 「スマートオブジェクト」と「配置」の活用で徹底時短の後半もご覧ください。
STEP4 スマートオブジェクトの調整
右カラム
01_detail.psdを見ると、side.psdのサイズがかなり大きいようです。このカラムの幅はデザイン上300pxを想定しているので、このままだと扱いづらいですね。side.psdを元々想定していた大きさに調整しましょう。
レイヤーパレットからsideレイヤーをダブルクリックしてside.psdを開き、［⌘］＋［C］(またはメニューバーの［イメージ］-> ［カンバスサイズ］)でカンバスサイズ設定画面を開きます。幅を［300px］、高さを［1142px］の実寸に変更します。
位置がずれてしまった場合はぴったり合うように調整してください。
side.psdを保存して、01_detail.psdに戻ります。スマートオブジェクトのカンバスの大きさを変えると配置位置がずれてしまうので、その場合は元の位置と同じになるように調整してください。
フッター
footer.psdは特に問題がなさそうですが、紙のデザインと違いWebのデザインはコンテンツの量に応じてカンバスの高さが変わるのが特徴です。ヘッダーと違いフッターは上下の位置変更が多いため、右カラムとは逆に余白を含んだレイヤーを最下部に入れておくとレイアウトが楽になります。
ここでは「bg」というレイヤーを実際の高さより上下それぞれ60px多いサイズで配置します。
これで基本の画面デザインとパーツの外部化が完成です。作業しやすそうなファイル構造になりましたね。
後編ではレイヤーカンプを活用して、さらに実務に即した調整を行っていきます。
https://blogs.adobe.com/creativestation/web-photoshop-more-expressive-smartobject-layercomp
後編ではレイヤーカンプの活用法をご紹介！