photoshopでのウェブデザインの勘どころ

１ファイルごとに管理する

１ファイル＝１ページとして管理する方法。コーディングデータとして渡されたときは、こちらのほうがやりやすい気がします。また、カンバスの高さが各ページで違っても平気なので、実用的に思えます。

０：通常どおり元データをデザインする

ベースとなるデザインカンプを作成します。その際、ヘッダーやフッター、サイドバーなど、レイヤーグループの整理をしておきます。

１：スマートオブジェクトでパーツグループを統合して管理する

ヘッダーやフッターなど、「共通パーツ」となっているグループを選択して、右クリックで「スマートオブジェクトに変換」するとひとつのレイヤーとして扱えるようになります。スマートオブジェクトレイヤーをダブルクリックするとパーツのみの編集も可能です。

２：共通パーツを他のページへ反映したいときは「同じ位置へペースト」

［1］コピー元のファイルとコピーさせたいファイルを両方ともphotoshopで開く。
［2］コピーしたいレイヤーを選択して【レイヤーの複製】ダイアログの【保存先】（ドキュメント）のプルダウンでコピーさせたいファイル名を選ぶ。
［3］「ＯＫ」ボタンを押すと同じ位置にコピーされる

これを、すべてのページで繰り返します。
この作業も面倒ではあるので、Extentionで共通パーツをpsd化して反映するほうが速いかもしれません。そちらは後で補足します。

３：マウスホバーや、ツールチップの表現に「レイヤーカンプ」を使う

１- 通常通りデザイン一式と、マウスホバーをしたときの画像もレイヤーグループに入れて表示/非表示できるところまで作りこむ
2 - レイヤーカンプで表示/非表示を変えて、各レイヤーカンプを書き出しする

Fireworksでいうところの「ステート」機能のようなイメージで、「レイヤーカンプ」を活用します。レイヤーカンプは、レイヤーの表示/非表示を組み替えて、様々なバージョンを作るための機能。ボタンの変化や、ツールチップなどをすべてひとつのファイルで作成し、グループ化などをしておき、表示/非表示で切り替えてバージョンを作っていきます。

※あくまでもレイヤーの「表示/非表示」によるバージョンの作成なので、「ステート」のように、各ステートで新しいオブジェクトを作る機能ではない、ということを認識しておかなければなりません。

１つのファイルにすべてのビューを統合（できるだけFwに近くする）

この場合、カンバスの高さが変更できない、共通パーツの変化のon/offや位置変更に対応していくとグループ階層が深くなってコーダーさんに渡すときに複雑になる（スマートオブジェクトにしていても、です）というようなことがありますのであまりおすすめはしませんが、やり方として紹介します。

０：通常どおり元データをデザインする

まずは、いつもどおりベースとなるページをデザインします。

１：スマートオブジェクトでパーツフォルダを統合して管理する

レイヤーの量がページ数によってどんどん増えていきますので、まとめられるもの、共通パーツなどはどんどんスマートオブジェクト化していきましょう。

２：共通部分レイヤーグループと、各ページ表示用レイヤーグループを作る

共通パーツのオブジェクトやグループを、「共通パーツ」等の名前にしたグループに入れておきます。
また、各ページ表示用に、グループを作成し、ロックしたりロックを外したりしながら作りこんでいきます。

３：すべて作ってから、レイヤーカンプでページ用に作ったレイヤーグループの表示/非表示を切り替えてカンプを作成する

すべてのパーツ・表示を作ってから、「レイヤーカンプ」機能でページごとの「グループ」を「表示/非表示」に切り替えてレイヤーカンプを作成し、出力します。

＊ここで気をつけておかなければいけないのは、いくら表示の雰囲気が似ているとはいえ、「新規ページ」を作っているわけではないということです。先にも書きましたが、「レイヤーカンプ」はあくまでも「バージョン」を管理する機能なのです。

Extension関連

photoshop CCでも使えた、Extentionを紹介します。もっともっと速く作れるようにやりやすい機能拡張を手に入れて、独自のデザイン環境を整えていきましょう。

Trevor Morris Scripts.

レイヤーの検索（英語のみ）、ソート、オブジェクトの複数ボックス展開
オブジェクトの整列、中心に整列が一気にできる（photoshop CCでも可能）
http://pspanels.com/12-new-photoshop-tools-for-cs6/

Linked Smart Objects

psdの共通パーツファイルをスマートオブジェクトとして読み込める
相対パスでは指定できないため、共同で制作する場合は再リンクが必要。
リンクファイルがない場合は、スマートオブジェクトとして作用する。
http://coliss.com/articles/software/photoshop-extension-linked-smart-objects.html

Pixel Dropr

Photoshopでよく使うパーツをどのドキュメントでも利用できるようにするプラグイン
http://coliss.com/articles/build-websites/operation/design/photoshop-plugin-pixeldropr.html

スライス関連

スライスをすばやく作成する

レイヤー＞レイヤーに基づく新規スライスでレイヤー書き出し
http://dis.ne.jp/blog/topics/3035.html

スライスの一括リネーム

photoshopで複数のスライスをリネームしながら保存する方法
http://liginc.co.jp/designer/archives/3612

「web用に保存」の際に一気に形式を変更

スライスを全体ドラッグですべて選択できる→そのあと形式変更→すべてのユーザー定義スライスに指定して書き出し

カスタムシェイプでよく使うアイコンを登録しておく

パスで書きだされているアイコンなら、なんでもカスタムシェイプに登録できます。
フリーアイコンセットなどもpsdファイルでシェイプになっている場合は登録しておくと高速に作業できそうです。
aiファイルからのコピペももちろん可能。

よく使うフォントは、「アクション」に登録

よく使うフォントは、アクションに登録しておくとすぐに変換できる
http://chibinowa.net/notebook/ps/fontaction.html

Fireworksは「パッケージ」、Photoshopは「拡張していく器」

私の主観ですが、Fireworksの便利なところって、ある程度パターンや、オブジェクトや、UIパーツや、スタイルが準備されていて、パッケージ化されているところだったんだなぁと感じました。
全部入りだから、使いやすい（場合がある）。そんな印象です。

対してPhotoshopでは、初期段階ではWebデザインツールとしては必要最低限のものしか用意されていません。
しかし、カスタマイズできる伸びしろが非常に大きく感じます。
好きなスタイルや、パターンや、シェイプを作ったり、探したりして登録して、さらにはそれらを使いやすくするためのツールがある感じ。ひとつの小さな箱から、どんどん繋いでいって自分なりの開発環境を整えることで、効率化をはかったり、自分らしいデザインができるようになっているように感じました。
カスタマイズには時間がかかりますし、ブラシやらパターンやら「ライブラリ」がいっぱいあって、管理は必要ですが、それだけ「自由」が与えられているようにも感じました。

みなさんも、自分なりのデザイン環境を整えてみてはいかがでしょうか。。