こんにちは。デザイナーのヨシザワです。

Webデザインを作る際の基本となるPSDファイルですが、「複数名でデザイン作業を分担する」「コーダーさんにファイルを渡す」「クライアント様にファイルを納品する」といった様々な場面で、「PSDファイルを共有する」必要がでてくるかと思います。

今回はその「PSDファイルの共有」について、

・グループワークの円滑化
・データ整理作業の効率化

の2つのテーマから、より分かりやすいファイルをつくるためのPhotoshopの機能や関連ツール、小技などを紹介していきます。

※Photoshopのバージョンによっては使用できない内容もありますのでご了承ください。

 


グループワークの円滑化

複数名で作業をするときには、的確な情報共有が重要になってきます。サイト内のルールを統一し、無駄なスタイルの作成を防ぐことにもつながるので、Photoshopの機能をうまく活用していきましょう。

■文字スタイル・段落スタイルを設定

主要な書式スタイルを登録しておくことができる機能です。
<ウィンドウ>から<文字スタイル><段落スタイル>をクリックし、表示されたパネルの右下のボタンで追加・設定しておきます。文字と段落を両方設定した場合、文字スタイルのほうが優先されるので、使い分けて設定をしておきましょう。

あとからスタイルを変更した場合も、スタイルを適用しているすべてのテキストに反映されるのでとても便利です。

この設定はファイルごとに保存されているので、新規にファイルを作成した場合はスタイルがありません。その場合は、すでに設定がされている別のPSDファイルから引き継ぐことができます。パネル右上にあるメニューを開き、「文字スタイルを読み込み」「段落スタイルを読み込み」を押すと、設定を読み込むことができます。

 

■スウォッチにベースとなる配色を設定

サイト内で使用する色は、案件ごとにスウォッチに登録して保存をしておくと間違いがなく便利です。<ウィンドウ>から<スウォッチ>パネルを開き、以下の様に色とそれぞれの名前も付けておくと分かりやすいです。作成したスウォッチは保存・読み込みを行い、共有することが可能です。

レイヤーカンプにレイヤーの状態を登録

レイヤーカンプは、複数パターンのレイヤー状態を管理することができる機能です。
<ウィンドウ>から<レイヤーカンプ>パネルを開いておきます。

例えば、以下のようにボタンを通常時とカレント時でデザインを変える場合。01だけがカレントになっているレイヤー表示状態で、レイヤーカンプパネル右下の新規作成ボタンをクリックすると…

こちらの様にレイヤーの表示状態を保存していくことができます。ナビゲーションボタンのほかにも、デザイン案のパターンなどを保存しておくことで、イメージが伝わりやすくなり、自分で切り替える際にも便利です。

■バージョンによる違いに気をつける

最後に、機能が増えて便利になっていく分、古いバージョンのPhotoshopで開いた時に、デザインが的確に再現できなかったり、ファイルが壊れてしまったりする場合があるので注意が必要です。ファイルを共有する場合は、Photoshopのバージョンを考慮しておくことも重要です。

例)
・レイヤーグル―プへのスタイル適用(CS6・CC以外は適用されません)
・レイヤーグループにレイヤーをクリップ(CS6・CC以外は適用されません)
・レイヤーグループの数(CS5以降は最大10個までですが、CS4以前は5個までです)

 


データ整理作業の効率化

作業に熱中しているうちに、気付けばレイヤーの数が増え、整理が大変な状態になっていることがよくあります。もちろん共有する前にはきれいな状態にしますが、その作業を少しでも効率的に行うための内容を紹介していきます。

■(プラグイン)Layer Controlでレイヤーを整理

シンプルですがレイヤーの整理が便利になるPhotoshopのプラグインです。まずはこちらのページの<Download free>からプラグインをダウンロード(※現在はメールアドレスの入力が必要になっていますので各自の判断でDLしてください)。
http://madebyvadim.com/layrs/

インストール後Photoshopを再起動すると、<ウィンドウ>メニューの<エクステンション>のなかに<Layrs>が追加されているのでクリックしてウィンドウを立ち上げます。機能は5つでとてもシンプルです。

① Layer Name EDITOR
複数のレイヤーを選択し、ボタンを押すとレイヤー名を一括変更できます。レイヤー名の変更の方法は、「レイヤー名の前に追加」「レイヤー名の後ろに追加」「レイヤー名を置きかえる」の3つから処理を選択できます。

② REMOVE UNUSED EFFECTS
未使用のレイヤー効果を削除。一度付けたけどやっぱり使わなかった…という効果をすっきり消してくれます。

③ FLATTEN ALL LAYERS EFFECTS
レイヤースタイルをすべて削除しラスタライズ。こちらはまとめてラスタライズされてしまうので注意が必要です。

④ DELETE EMPTY LAYERS
空のレイヤーをまとめて削除。Photoshopに「非表示レイヤーの削除」がありますがその機能とは異なり、こちらは何も入ってないテキストレイヤーやまっさらな空レイヤーを削除してくれます。

⑤ RASTERIZE SMART OBJECT
スマートオブジェクトをまとめてラスタライズ。ファイルを軽くしたいときに便利です。

 

■レイヤーを複製した時に「○○のコピー」をつけない設定

フォルダやレイヤー効果がたくさん開いた状態になっていると、見づらい上にスクロールするのも大変ですね。altを押しながらレイヤーフォルダの▼の部分をクリックすると、フォルダ・レイヤー効果すべてまとめて閉じることができますので、まとめて閉じておきましょう。

 

■レイヤーやフォルダや効果はまとめて閉じる

フォルダやレイヤー効果がたくさん開いた状態になっていると、見づらい上にスクロールするのも大変ですね。altを押しながらレイヤーフォルダの▼の部分をクリックすると、フォルダ・レイヤー効果すべてまとめて閉じることができますので、まとめて閉じておきましょう。

 

■非表示レイヤーはまとめて削除

非表示になっている使わないレイヤーはまとめて一気に削除しておきましょう。
<レイヤー>メニューの<削除>→<非表示レイヤー>から削除ができます。

ただし、ロックをかけて非表示にしているレイヤーがある状態だと使えません。すべてのレイヤーのロックをまとめて解除したいときは、Ctrl+Alt+Aで全レイヤーを選択してロックを2回押すか、レイヤー検索機能がある場合はソートして、解除することができます。

 


まとめ

いかがでしたでしょうか。
自分だけではなく、他の人も分かりやすいように気を配ったファイル作り心がけることで、案件全体の質や効率の向上につなげていきたいですね。デザインを作りはじめる段階から意識して、外観はもちろん中身もきれいなファイルを作っていきましょう。