デザイナーからコーダーへ、見やすいpsdデータのまとめ方

このエントリーをはてなブックマークに追加

最近他の会社のデザイナーさんとお話をしていた時、

  • Photoshopのレイヤー分けはどうしてる?
  • コーダーさんにPSDを渡す時、スライス切っている?
  • Photoshopのレイヤーモード(乗算・焼き込み)使ってる?

こんな話題があがりましたので、思いつくまま記事にしてみます。
この人のPSDの作り方いいな!と思った事はすぐに取り入れ、改善していますが、これがベストな状態かどうかはまだ分かりません(泣)ですので、もし抜けている事などありましたら、コメントやツイートなど頂けますと喜びます。

PSDは自分だけが使うものではない。という大前提

自らデザイン&コーディングもやっている。という方を除いて、純粋なデザイナーさんなら次のフェーズとして、コーダーさんにPSDをお渡しする。ということが発生します。
コーダーさんにお渡しした時に、見やすい構造でストレス無く、作業が出来るPSDデータを心がけていきたいですね。

命名規則

こんな感じにしています。

●ファイル名…通し番号-半角英数字.psd
→対Windowsで日本語表記だと文字化けしてしまうために、なるべく半角英数字に。対Macと決まっている場合は日本語表記でもOK。ただ、英表記だと一目で何のファイルか分かり辛い為、00-Toppage.psd等通し番号を付けて、名前順で並ばせた時に綺麗に並ぶようにしています。

レイヤー系

●レイヤー、レイヤーグループに名前を

パーツごとにざっくりとレイヤーグループに分け、更にその下階層も整理しましょう。なにがどこにあるか、他の人が見ても分かるように配慮しておきましょう。
また、レイヤーをコピーすると「レイヤ1ーのコピー」とご丁寧に名前が付いてくれますが、これはとても見辛いので、外しましょう。
こちらのアクションを入れれば自動的に「コピー」付かないようにしてくれます。とても重宝しています。

[Photoshop] コピーしたレイヤーの名前をリネームするスクリプト | loftimg™ blog
http://loftimg.jp/blog/design/photoshop.php

●ロック
複数の画面があり、全てに共通する背景画像など確実に動かさないものに関してはロックをかけても大丈夫だと思います。それ以外はレイヤーを切り替えたりということが発生するので、ロックはかけないようにしておきましょう。

画像系

●スマートオブジェクト

  • Flash系のコンテンツでベクターデータが必要
  • ベクターデータの編集が容易に行えるように
  • ベクターに関わらず、大きめのデータが必要になる時

を考慮して、スマートオブジェクトにしておくと、元のデータにすぐに切り替え可能ですので、なるべくスマートオブジェクトにしておきましょう。
スマートオブジェクトの活用については下記のブログで丁寧にまとめてくださっています。

photoshopでのウェブデザインの勘どころ | バニデザノート
http://vanidesign.blog.fc2.com/blog-entry-91.html

●ロールオーバー
デザインFIX後、コーダーさんにPSDを渡すとなった時、ボタン・バナー類のロールオーバーイメージも入れておきましょう。間違ってもコーダーさんに「ちょっと作っておいてよ」と言わないように…。私事ですが、大阪から東京に出て来た時、この作業「なんで??これデザイナーの仕事!?」ってずーっとぶーぶー言っていました。今では普通にこなせるようになりました(笑)たかがロールオーバー、されどロールオーバー。これもデザイナーの仕事です…。
▲上記のレイヤー階層「赤ラベル」をいつもRolloverとして切り替えて頂くようにしています。

●repeat系の画像

ヘッダー、フッターなど背景をリピートさせて使うような場合、途中で途切れておかしくならないか?リピート可能な画像かどうかシミュレーションしておきましょう。

●画面を作る程でもない、各種ボタンパーツ

→お問い合わせフォームの確認ボタン等、画面は作らないが、ボタンだけは必要といった場合もありますよね。こういったパーツも先回りして作成しておくようにしましょう。

●白背景の画像に対して、乗算で横着しない
→一見切り抜かれているように見えて、レイヤーモードを外すと、白背景が……。
これはがっくり来ます…。透過pngとして使用する場合などが考えられますので、面倒くさがらずに切り抜きましょう。

●スライス
→切る切らないは場合によりけり。
一度スライスを切ってしまった後に、修正が入った場合は、修正箇所に合わせて切り直す等の配慮は大丈夫かと思います。コーディング知識0の方は、余計なことはせず、そのままデータを渡しましょう。良かれと思って…が返って作業をやりづらくさせてしまうことも…。。

まとめ

ちょっとHTML、CSSかじった事のある人や、自分でコーディングする人なら、ある程度どうしてあげたらコーダーさんに優しいか。ということが分かるものですが、全くコーディング分からない。というデザイナーさんは、出来上がったサイトを見て、どういう画像パーツでサイトが仕上がっているか目を通しておくと、段々感覚が掴めてくると思います!

ご意見・ご感想は下記にコメント頂くか、@moco2までメッセージやツイート頂けると嬉しいです。

Comments are closed.