Photoshop PSD Webデザイン

もう怖くない！大規模案件に負けないPSDデータ作成方法

こんにちは、小林です。もうじきGWですね、今からワクワクしています。

さて一昨日の土曜日、セミナー・イベントで有名なCSS Niteの「Webデザインで使うPhotoshop」というテーマの講義を受けてきました。
セミナーは今回で2回目の参加でした。初めてのセミナーは約2年前のデザイナー成りたての頃で、テーマは同じく「Webデザインで使うPhotoshop」でした。
今回はその続編にあたるのですが、今まで知らなかった機能だったり、こんな使い方があったのか～と感じるたくさんの新発見がありました。

4名の講師の方がそれぞれセッション別にお話されたのですが、牧下 浩之さん（株式会社Plankton Design代表取締役）の「実案件で活用できるPhotoshopデータ作成ルール」というセッションが個人的に一番勉強になったので、簡単ではありますがかいつまんでご紹介させて頂きます。

 中～大規模案件におけるデザイン作成の問題点

ペライチのランディングページや、ページ数の少ないサイトならまだしも、数十～100ページを超える、中～大規模な案件ではデザイン作成にいろいろと問題が出てくると思います。（photoshopを使ってデザインカンプを作ることを想定）
僕が経験した例を挙げると、

  • デザインルールの徹底が難しい。（特に他の人にページ量産を手伝ってもらう時）

  • 共通部分（ヘッダーやフッターなど）、共通パーツ（見出しのあしらいやボタンなど）に修正が入ると大変。

というところが一番ネックでした。

 

カラースウォッチ、文字スタイル、段落スタイルを活用してルールを統一する。

 例として下記のようなページがあったとします。

blog01

 

このページのカラースウォッチは下記のようになります。

02_140421

 

このスウォッチを他のデザイナーに配布しておけば、カラーのばらつきはなくなるでしょう。

 

そして文字スタイルと段落スタイルを下記のように設定しました。（こちらはPhotoshop CCからの機能になります。）

03_140421

 

文字スタイルに「フォント」、段落スタイルに「サイズ・行間」を設定しています。
文字スタイルにまとめて設定もできるのですが、そうなるとピンポイントでの設定となり項目がかなり増えてしまうので、段落スタイルとで分けて重ねがけが効率が良いとのことでした。確かに。

この文字スタイルと段落スタイルは残念ながらプリセットには登録できないため、他のPSDには継承されません。
しかしそれぞれのパネルオプションから「文字（段落）スタイルを読み込み」をクリックして、元のPSDを指定すると簡単に登録できますのでご安心を。

04_140421

 

これだけでかなりルール付けできたのではないでしょうか。
あとは基本、マージンなどはしっかりとガイドを引くなりすれば対応できると思います。

 

共通部分はPSDを分けてリンク配置する

PSDをリンク配置

こちらもPhotoshop CCからの新機能になりますが、かなり便利なので御存知の方も多いでしょう。

今までヘッダーなどの複数ページに共通するところに修正が入り再度デザイン提出となるとかなり手間のかかることで大変でした。しかしこの機能を使えば元のPSDを修正するだけで他ページにも適用されます。

このサンプルではヘッダー(header.psd)とフッター(footer.psd)をリンク配置しています。

試しにheader.psdの背景色を黒にして保存してみます。

05_140421

 

すると…

06_140421

 

はい、リンク設定したpsdに反映されました。これは本当に便利です！

より詳しくはこちらの記事が参考になります。Photoshop CC、ついに外部ファイルをリンクできるように（stocker.jp）

 

エレメントを画像アセットでリンク配置

 上記の応用です。

見出しのあしらいやボタン、アイコンなどをひとつのPSDにまとめます。（element.psdとしました）

07_140421

この際、各オブジェクトにきちんと拡張子までファイル名に指定しないと画像アセットで生成されませんのでご注意ください。
画像アセットに関して詳しくはこちら（Photoshop ヘルプ /レイヤーからの画像アセットの生成 | Photoshop CC）

そしてツールバーにある[ファイル]→[生成]→[画像アセット]をクリックすると、PSDと同一階層のディレクトリに、【[PSD名]+-assets】というフォルダができます。

08_140421

 

この中には、さきほどレイヤーでファイル名を指定した画像がきれいに切りだされています！

そしてこれを、さきほどのヘッダー・フッターと同様にリンク配置します。これでもうできたも同然です。
例えば「見出しのあしらいの色を紺から赤に変更！」という修正がきたら、element.psd上で修正します。

09_140421

 

修正したらそのままCtrl + Sで保存するだけです。再び画像アセットをクリックする必要はありません。

これで元にPSDを見てみると…

10_140421

 

見事に反映されています！

最初の準備が若干手間なのでページ数少ない時は不要かと思いますが、ページ数が多ければ多いほど絶大な効果が期待できるでしょう。

 

大事なところはきちんとレイヤー名をつけよう

これもまたPhotoshop CCからの新機能ですが…レイヤーの絞り込み機能が備わっています。
たとえばマウスオン時の画像を作るときはレイヤー（フォルダ）名に「on」としておきます。（ついでにレッドで色もつけときました）

 

11_140421

 

そして検索条件を[名前]にしてonという文字列を入力して検索！

 

12_140421

 

見事に「on」フォルダだけ絞り込みされました。
これとレイヤーカンプ機能を併用すれば、かなり効率アップにつながると思います。
レイヤーカンプ機能については以前の記事で紹介しています（レイヤーカンプ機能を使ってボタンのon/offを素早く切り替え）

ただ問題点も

かなりwebデザインツールとして機能アップしたPhotoshop CCですが問題もあります。過去バージョンとの互換性が完全ではないところです。
リンク配置などはとても協力な機能なのですが、過去バージョンではエラーを起こして開くことができないこともあるそうです。そのためラスタライズするなどして先方へ提出する必要があります。
またラスタライズでは修正が効かないためそもそも新機能が使えないこともあります。

まだ出て日も浅いCCですので仕方ないかもしれませんが早く多くの人や会社に浸透すれば良いなと思います。

 

 

関連記事