Webデザイナーが知っておきたいPhotoshopのPSDファイル、レイヤー、エフェクト、フォントやテキスト、素材の効率的な管理方法

良いデザイナーはデザインするだけでなく、細心の注意を払うことができる人です。
Web制作におけるチーム内、または個人でもPhotoshopでのデザイン作業やワークフローを効率よくするためのルールを紹介します。

チーム内やデザイナー同士でルールを明文化しておくと、いいですね。

Photoshop Etiquette

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• Photoshopのエチケット: PSDファイルの管理
• Photoshopのエチケット: レイヤーの管理
• Photoshopのエチケット: 素材の管理
• Photoshopのエチケット: フォントやテキストの管理
• Photoshopのエチケット: エフェクトの管理
• Photoshopのエチケット: 品質の管理

Photoshopのエチケット: PSDファイルの管理

Files -Photoshop Etiquette

PSDファイルを効率的に管理

エレメントごとにcommnd+NですぐにPSDを作ろうとせず、プロジェクト内でPSDを最小の数に保つようにします。

PSDファイルの数が多いと、それだけで混乱の元になります。

ファイルの内容が分かる適切なファイル名

「新しい.psd」「最新.psd」「最終版.psd」 私はどれを開けばいいのか分かりません。

「最新」「最終」というキーワードはファイル名に役立ちません。ファイルの内容が分かるファイル名をつけ、その後にバージョンをつけて管理するようにしましょう。

素材の格納場所

フォント・アイコン・写真などの素材は、PSDに近いフォルダで管理します。

フォルダの場所が遠すぎると探すのに手間がかかり、無駄な時間を浪費します。

PSDファイルの共有

PSDファイルをデスクトップで管理しているなら、チームのメンバーが容易にアクセスできるようにしておきます。Dropboxなどを利用するのもよいでしょう。

PSDファイルがどこにあるか分からないと、その都度あなたに尋ねることになります。

ファイルの命名規則を用意する

ファイル名に使用するのは「_」「-」もしくは「スペース」ですか？ 命名規則を用意しておけば、悩むことはありません。

また、他人がつけたファイル名でも容易に理解できます。

デバイスに頼ったデザインはしない

iPhoneは非常に便利ですが、さまざまなスクリーンサイズがあります。

特定のデバイスに適したデザインをするのではなく、ブレイクポイントを決め、さまざまなサイズに合うデザインをします。

Photoshopのエチケット: レイヤーの管理

Layers -Photoshop Etiquette

レイヤーに名前を付ける

「レイヤー1」「レイヤー2」「レイヤー1のコピー」でレイヤーを管理していませんか？

レイヤーに正しい名前をつけることで、自分も他の人も混乱することがなくなります。

レイヤーのグループを使う

何十、何百ものレイヤーが平置きされているのを想像してみてください。ぞっとします。

レイヤーは同種類のアイテムごとにフォルダにまとめることで、効率的に管理できます。

必要ないレイヤーは削除する

あなたはレイヤーのコレクターですか？ PSDで使われていないレイヤーを削除することに問題はありません。

レイヤーが増えれば増えるほど、使われていないレイヤーは必要のない仕事を増やします。

一般的な要素をグローバル化して管理

異なるレイアウトのPSDごとに、ロゴをコピーして利用する理由はありません。共通要素はグローバル化して、利用します。

よく使う要素はスマートオブジェクトにすることで、PSDで何度でも利用することができ、直す時も1ファイルで済みます。

作業の終了時には折り畳む

作業が終了した時には、フォルダを折り畳むようにします。すべてのフォルダが折り畳まれたら、作業完了です。

子ども達が遊び終えた後に「片付けなさい」と言う理由と同じです。あなたは散らかったまま作業することを望みますか？

Photoshopのエチケット: 素材の管理

Assets -Photoshop Etiquette

データは非破壊で

マスク、スマートオブジェクト、調整レイヤーなどを使い、大切なピクセルを壊さないようにデザインします。

ブレンドモードは慎重に

あなたはどのように色を塗りますか？ 塗る時に複数のオーバーレイや乗算になっていないか確認してください。

色はレイヤーのプロパティから16進数の値で正確に取得することが可能であるべきです。

画面解像度とピクセル密度に注意

作業を止めて、あなたの作ったロゴをさまざまなデバイスで見てみてください。ぼんやりしてませんか？

その原因は充分なピクセルを持っていないからで、@1xのアセットは、@2xのRetinaスクリーンではぼんやり見えます。SVGのように解像度に依存しないフォーマットを利用するのがよい方法です。

ファイルの圧縮

「別名で保存」で、JPEG画像を書き出すことをあえてしますか？

圧縮なしのイメージはファイルサイズが大きく、ロード時間がより多くなります。Photoshopで書き出す時は「書き出し形式」を使って、圧縮の量をチェックしてください。

不必要な空白スペースは不要

画像を書き出す時、レイアウト目的で余分なマージンやパディングは必要ありません。それはCSSで指定します。

CSSは配置を調整することが簡単で、優れています。画像にある余分な空白は、頭痛の原因となります。

協働に備える

協働作業は効率的に行いましょう。CCライブラリとリンクしたスマートオブジェクトを協働のために使用してください。

リンクされたスマートオブジェクトと一緒に、スタイルのコンポーネントがガイドし、パターンライブラリを他のデザイナーに割り当てることもできます。あなたが作業しているマスターのPSDは、魔法のように自動的に更新されるでしょう。

Photoshopのエチケット: フォントやテキストの管理

Type -Photoshop Etiquette

フォントは一元管理

チーム内で同じフォントを利用できるよう一元管理します。

フォントがないダイアログが表示されるのは最悪です。チーム内の皆が利用できるフォントを使用するようにしてください。

フォントを変形させない

非常にひどく見えることに加え、HTMLとCSSで実装する簡単な方法がありません。

プログラム的にそれが可能かは置いといて、デザイナーがフォントを変形されていることを意図したのか疑います。

文字はテキストボックスを使用

テキストボックスは文字を扱う時に、非常に便利です

より長いテキストボックスは、その背後のテキストを選択することを防止することができ、回避するにはイライラすることがあります。

テキストボックスを分ける

見出し、本文ごとにテキストボックスは分けて使用します。

それは個別化で、一つのテキストボックスの中に複数のフォントファミリーやサイズを設定しないほうがよいです。

一貫性のために文字スタイルを使う

すべてのテキストに使用しているフォントのサイズを変更する時の素晴らしい方法です。

文字スタイルのパネルでフォントファミリーやサイズ・カラーを管理すると、変更が簡単になります。

Photoshopのエチケット: エフェクトの管理

Effects -Photoshop Etiquette

オーバーレイは適切に使う

空色の矩形をオーバーレイで藤色にしました。えっ、なぜそんなことするの！

サムネイルのプレビューにオーバーレイのカラーがマッチするようにしてください、その逆も同様です。PSDファイルを精査する時に役立ちます。

慎重になりすぎ、もっと気楽に

エフェクトは一つも使いませんでした。

そのデザインがCSSで実現可能か分からないので、エフェクトをたくさん使うより、使わない方がいいと制限してしまうことがあります。

エフェクトは意図的に

チェックが簡単にできるからといって、レイヤー効果のパネルを粗末に扱わないでください。特にデフォルトの設定には注意です。

以前ほどけばけばしくはないですが、Photoshopのデフォルトの設定はあなたのデザインに必ずしも適したエフェクトではありません。そのエフェクトが何か分かるように設定されているだけです。

ストロークの仕様を知る

その通りに実装することは可能ですが、鋭角の内側が角丸になっているのは意図されたデザインではないと思います。

ストロークや、例えば選択範囲でも、内側は四角になり、外側は角丸に、中央はその両方を兼ね備えた状態になります。

光源を考慮する

エフェクトの重要なポイントは光源です。一つのエフェクトが90度で、他のが120度にしてしまうと太陽が2つあることになります。

光源は可能であれば、一貫していて、現実と同じにすべきです。

Photoshopのエチケット: 品質の管理

Quality -Photoshop Etiquette

校正

リリースする前に文法的なミスがないか、第三者の目で確認するようにします。

デザインのピクセルに集中してしまうと、デザイナーは文字の間違いを見落としてしまうことがあります。

素材の権利

デザインに使用した素材の権利は問題ないですか？

素材ごとにドキュメントを残し、安全に使える素材か確認できるようにします。もちろん不明なものは使用しないでください。

ブラウザの互換性に精通する

ブラウザの限界を知ることはスタンダードと言えるでしょう。

各ブラウザはコンテンツをそれぞれ異なってレンダリングします。特に新しいテクニックを使う時は注意してください。

すべてのスクリーンサイズを考慮する

あなたのカンプに「_iPhone.psd」「_iPad.psd」「_desktop.psd」と接尾辞があるなら、それは少し違います。

世界には数多くのデバイスがあり、なぜあなたは制限するのですか？ 未知だったり、人気がないデバイスも包括できるよう、デバイスではなく、サイズでデザインするべきです。

一貫

意図することなくブルーが3種類になっていませんか？ そのレッドはロゴと同じ色ですか？

もし意図的でないなら、それは避けてください。異なるブルーをすべて同じブルーにする作業は無駄な作業です。