Photoshopでデザインカンプを作成する
最初に、グラフィックソフトを利用してデザインカンプを作成。デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。
画面領域はサイズを測ってガイドを引いてもよいですが、デザインテンプレートを利用するのが手軽です。
・iPhone 4 GUI PSD (Retina Display)
iPhone 4 GUI PSDにはさまざまなパーツが1枚のPSDファイルにまとめられています。
ダウンロードしたPSDファイルをPhotoshopで開いて、最初に必要な パーツ（右側にあるiPhone 4の端末イメージ）だけを新しいファイルにコピー。
レイヤーリストにある「iPhone 4」というグループを右クリックして、「グループを複製」を選ぶ。
保存先のドキュメントに「新規」を選択すると、レイヤーグループだけをコピーしたドキュメントが作成されます。
iPhone 4 GUI PSDはiPhone 4の画面解像度（640×960ピクセル）を前提に作成されているので、3GS以前（320×480ピクセル）用のサイトを作るには半分のサイズにする必 要がある。
[イメージ][画像解像度]メニューから、大きさを50％に設定。
以降の作業をしやすくするため、余計なレイヤーを削除または非表示にしたら準備は完了です。このファイルをテンプレートとして保存しておき、デザインカンプのベースに利用するとよい。
あとは、このテンプレートの中に今回のサイトのデザイン要素を配置していきます。必要に応じてiPhone 4 GUI PSDからiPhoneのパーツ類をコピーして利用すると、標準パーツなどは楽に作れます。また、作業中にiPhoneの枠を外した状態を確認したり、カ ンプ完成後に画像をスライスしたりしやすいように、パーツのレイヤーは分けて作成しておく。
