XDで作成されたデザインカンプに慣れていると、最初はPhotoshopからのコーディングに戸惑うことがあると思います。
ここではPhotoshopのデザインカンプからコーディングする際に覚えておくと便利なことを紹介していきます。

コーディング用に環境を設定する

単位をpxにする
1.左上の編集タブから環境設定をポイントし、単位・定規を選択する
2.環境設定画面が開いたらpixelに変更する

ワークスペースを設定する
1.レイヤー、プロパティ、カラー以外のコーディングに使わないパネルを閉じる

2.文字、情報パネルを表示させる
ウインドウメニューから文字、情報をチェックする

文字パネルをプロパティの隣に、情報パネルをカラーの隣にそれぞれドラッグ＆ドロップする

3.コーディング用のワークスペースとして保存しておく
※呼び出す時はウィンドウ→ワークスペース→コーディング用

コーディングで最低限使うツールを紹介

コーディングでよく使うツールは以下の通りです。
1.移動ツール：オブジェクトを選択するとプロパティで幅、高さを確認できる。このツールでほとんどの値が取得できる。
2.ものさしツール：線を引いてその長さを確認できる。細かい隙間を測りたい時に使う。ものさしツールとスポイトツールは同じ場所にある。長押しすると選択できる。
3.スポイトツール：カラーコードを確認できる。移動ツールで選択しても確認できる。
4.文字ツール：文字を選択してコーディング用に貼り付けることができる。移動ツールでダブルクリックしても選択できる。

値を取得する方法

1.オブジェクトの値を取得する　
移動ツールでオブジェクトを選択するとプロパティパネルで幅、高さ、ボーダーなどの値を確認できます。

色のアイコンからカラーコードを確認できます。

ボーダーが設定されている場合、オブジェクトを選択すると線の太さや色、border-radiusを確認できます。

透過画像はレイヤーパネルの不透明度で確認することができます。　不透明度80％ならCSSはopacity0.8になります。

2.文字の取得
文章を文字ツールで選択するか移動ツールでダブルクリックします。文字パネルを開くとfont－family、太さ、文字サイズ、行間line-heightなどを確認できます。

3.余白の取得
移動ツールでオブジェクトを選択した状態でctrl（command）を押すと近くのオブジェクトとの距離が表示されます。

画像の書き出し

一つ一つのレイヤーから書き出す方法
対象の画像を移動ツールで選択するとレイヤーがハイライトで選択されます。レイヤーの上で右クリックし書き出し形式を選択します。

PNGやJPGなどの書き出し形式、　ファイルサイズ、画像サイズを指定して保存することができます。ファイルの保存先を指定して保存します。

一括で保存する方法
レイヤーの名前をjpgや.pngなど画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。

ファイル　⇒生成　⇒画像アセットにチェック ⇒保存（ctrl+ｓ）　

開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。

上記の方法だと基本的には等倍で書き出されますが、２倍サイズで書き出すこともできます。
２倍サイズで書き出したいときはレイヤー名を変更するときに200％と入力し半角スペースの後に名前を付けて＠2xとつけて保存します。（ctrl+ｓ）　例）200% mv@2x.png

すべての画像に対し同じ作業をするのが大変なので、まとめて書き換える方法があります。
名前を書き換える用のレイヤーを作る：右下のプラスボタンを押して一番上にレイヤーを作ります。
名前　1倍の方を書き出すファイル名をつける：「default 1x, 200% 2x/@2x」　⇒保存します。
全部のレイヤーにこの設定があたる：全部の画像が1倍、2倍のサイズで保存されるようになります。