もっと楽しく!Photoshop活用でデザインの表現力UP 第3回:スマートオブジェクトを活用したWebデザインの進め方 前編:「リンクを配置」で効率よく

by Adobe Comms

Posted on 01-29-2015

もっと楽しく!Photoshop活用でデザインの表現力UP

Photoshop CC (2014年10月公開) 対応

外部リンクが可能になってますます便利なスマートオブジェクト。便利そうなのは分かったけど具体的にWebのデザインではどう利用するの?という疑問を解決するため、実際の作業の流れに沿ってポイントをご紹介します。

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

今回は「スイーツ情報を集めた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形式で作成しました。[ファイル]->[リンクを配置]でファイルを選択し、ベクトルスマートオブジェクトとして配置しましょう。

 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多いサイズで配置します。

 HTMLで上下に60pxの余白を入れる場合を想定

これで基本の画面デザインとパーツの外部化が完成です。作業しやすそうなファイル構造になりましたね。

後編ではレイヤーカンプを活用して、さらに実務に即した調整を行っていきます。

 後編ではレイヤーカンプの活用法をご紹介!

Topics: クリエイティブ

Products: