喜ばれる納品。PSDのデザイン制作で気をつけるポイント。【後半】

こんにちは。
前回に引き続き、PSDでデザインファイルを作成するときに気をつけたいエチケットをまとめたサイトのご紹介です。

前半はこちら:喜ばれる納品。PSDのデザイン制作で気をつけるポイント。【前半】 | unitopi

Photoshop Etiquette

Screen Shot 2014-11-22 at 06.09.17
Photoshop Etiquette

Type

続いてはWebを意識して作ることについて

  • ピクセルをつかいましょう
    • 自由変形ツールでサイズを変更するのはやめましょう。ピクセルで整数値をつかってください
  • フォントのLICENSEに気をつけてください
    • 次の人が使えますか?
  • テキストをストレッチさせないでください
    • 縦に伸ばしたり、CSSで実現することが難しいものは避けましょう
  • テキストボックスはきちんとしたサイズにしましょう
    • 必要以上にエリアをとっていると、他の要素を邪魔します
  • 属性がことなる場合は、個別のテキストにしましょう
    • 一つの要素の中にフォントサイズをバラバラにいれたりしないようにしましょう

Effects

過度なエフェクトは禁物です

  • パターン化できる背景をつかいましょう
    • 背景の繰り返しイメージをつくるのは容易ではありません
  • エフェクトを使い過ぎないようにしましょう
    • CSSで実現する場合とてもつらいことになります
  • グラデーションか、ディザか
    • ストライプに見えるグラデーションを使ってる方がチラホラ
  • ストロークを適切に使いましょう
    • 外側のストロークは角が丸くなります

Practices

以下のことを試してみましょう

  • グリッドを使用する
  • ドロップシャドウは薄めに
    • 濃すぎるドロップシャドウはおもすぎます
  • Webフォントをつかう
  • デバイス幅を考えよう
    • 960pxだけでいいですか?
  • 使用契約を調べて画像をつかう

qa

  • 校正する
    • 複数人でスペルチェックなどしておきましょう
  • ワイヤーフレームと比較する
    • 一つ前の工程と比べるのはだいじです
  • ブラウザの互換性に精通する
  • 一貫した色使いをしましょう
    • 微妙に違う赤を3種類つかうなどしない。意図的でない限り

まとめ

いかがでしたか?
少し多いですが、確かに気をつけたい点ばかりですね。
デザイナーさんによってそれぞれの文化はあると思いますが、実際触りにくいデータもあります…。このあたり、最低限のルールとしてこのようなエチケットを参考にしてみるといいかもしれません。

是非依頼するデザイナーさんにもご紹介ください。

フォローして続編をチェック

@universionsをフォロー