37日目 | Photoshopでカンプを作る

  1. Photoshopで新規作成
  2. CTRL+R ルーラー出す
  3. 表示-新規ガイド(水平0,10,35,80,90,252… 垂直0,10,36,120,130,180,420,430,511,600,610)
  4. シェイプツール四角
  5. ロゴ(スマートオブジェクト)手本ファイルのロゴレイヤーからドラッグ。スマートオブジェクトなのでカラーオーバーレイで塗り色の変更ができる
  6. 見出し画像はシェイプツール四角を2つのピークのあるグラデーションオーバーレイで作る
  7. 本文テキスト部分はアンチエイリアスをoffにする。
  • クライアントに実現不可能な整形されたフォントで作ったカンプを見せてはならない。実現不可能なのにその残像を記憶に刻み込んでしまい、ハードルが上がる
  • ちなみにpやhへの書体指定は厳禁である!
  • また書体「HGなんとか」使用も厳禁である!汚なくなる。
  1. 電話の記号は記号書体「wingdings」で出す。shift+8でプッシュホン電話記号になる
  2. 画像、テキストを配置し終わったらスライスツール(カッターアイコン)でスライスしていく。拡大表示して画像ぎりぎりの部分を切る。
  3. 微調整はスライス選択ツールでできる
  4. 各スライスをダブルクリックして名前をつけていく。直感的にわかりやすい名前。
  5. WEB用に書き出し
  • GIFかJPEGか判別しつつ、ロゴならGIF、写真画像ならJPEG
  • GIFの場合、背景白なら透明チェックいらないが、そうでなければ透明にチェック入れてマット(背景色)にする
  • JPEGの場合、「高画質」選ぶ
  1. 書き出しの設定は画像のみ、初期設定、すべてのユーザー定義スライスにする。
カンプ作成目的:ブラウザで表示した時、どう見えるかの確認をクライアントとの間で共有すること

画像の見え方、本文文字の見え方(ぎざぎざ)など。