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

こんにちは。
みなさんWebのデザインはなにでしますか?Photoshop, Illustrator, Fireworksなどでしょうか。ちなみに僕はPhotoshop派です。
今回はPhotoshop、PSDでデザインファイルを作成するときに気をつけたいエチケットをまとめたサイトをご紹介します。

Photoshop Etiquette

Screen Shot 2014-11-22 at 06.09.17
Photoshop Etiquette

  • Files
  • Layers
  • Images
  • Type
  • Effects
  • Practices
  • qa

納品時に気をつけたい点が掲載されています。
あなたのWebデザイン、再編集したり、引き渡したり、他の人が開くときは気にしたい点ですね。
もちろん自分の制作でも効率化するような内容でしたのでご紹介したいと思います。

Files

まずはファイルについて、

  • PSDを作り過ぎない
    • できるだけまとめましょう。
  • 名前を適切につけましょう
    • 最新とか最終盤とか、絶対変化するので…。せめてバージョンにしましょう。
    • → この辺りはuniversionsだと簡単ですね!
  • 素材は近くに置きましょう
    • 元素材を探す時間は短縮するため、PSDファイルのすぐそばに起きましょう
  • UI Element毎にPSDをつくりましょう
    • 「作り過ぎない」と矛盾しますが、PSDではパッと表現しきれないUIの動きや変化が分かるようにしましょう
  • 共有できる場所におきましょう
    • ファイルの送付問題諸々
    • → これもuniversionsで簡単解決!

Layers

次はレイヤーについて

  • レイヤーに適切な名前をつけましょう
    • コピーのコピーはなんのことやら
  • フォルダ(グループ)を活用しましょう
    • 構造的になるうえに、エリアの表示/非表示が簡単になります
  • 不要なレイヤーを消しましょう
    • 使ってないレイヤーが残っていませんか?
  • 共通要素をグローバル化しましょう
    • フォルダ機能などをつかって、ひとつの親から影響させることができます
  • スマートオブジェクトをつかって共通要素を整理しましょう
    • 複数のPSDをつくると、その分だけ変更や修正が必要です

Images

続いて大事なイメージについて

  • 簡単にラスタライズしない
    • 修正しにくくなります。ベクターのコピーをとりましょう
  • マスクをグローバル化しましょう
    • レイヤーのところにも書きましたが、フォルダ機能をつかって一つにかけるだけでOKです
  • グリッドにスナップさせる
    • 綺麗に整理されることは、コーディングのしやすさにもつながります
  • 描画モードは気をつけてつかいましょう
    • オーバーレイや乗算・焼き込みなどで表現された色は取得が難しいです
  • 元のファイルを破壊しないようにしましょう
    • いつ元の状態に戻さないといけなくなるかわかりません。フィルターで操作しましょう

前半は以上です

いかがでしたか?
たしかに…と思う点がたくさんありました。後半では続きいきたいと思います!

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

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

@universionsをフォロー