使用バージョン:PhotoshopCC(v 20.0.4)
全体をみる
Photoshopを開いて「スライスしないと!」と思ったあなたは不正解!まずはカンプの全体を見て、以下の点に注意して見よう。
H1、H2、H3の確認
ロゴはH1?P?
HTMLの階層構造を意識して、「大枠(container)」「中枠(section)」「小枠(flex-box、float-box)」などを簡単に考えよう。
リンクになる箇所をチェック。ロゴはリンク?ここのテキストはリンク?バナーなの?画像なの?
ホバーの表現はどーするか?デザイナーさんに確認しないと・・・わからない。
画像になる箇所、テキストで記述する箇所を分けていく
スライス設定(アセット書き出し)
画像で切り抜く場所が確定したら、スライス工程に入ります。・・・とっても簡単です。
ファイル > 生成 > 画像アセットをチェック



スライスしてみた!(アセット書き出し)


スライスは、「画像に名前(拡張子を含む)を付けて保存するだけ」なのです!
命名方法によって、「2倍書き出し」「フォルダの階層構造を維持して書き出し」 Photoshopの画像アセットの生成用レイヤー名まとめ
テキストデータの値を確認しよう!
photoshopから文字データを確認してCSSに反映する方法です。
「 line-height / font-size」
26px / 16px = 1.625(単位が付かないのが正解)
letter-spacing(トラッキング)の求め方
「トラッキング / 1000 」em(単位)
100 / 1000 = 0.1em
数値の計算には電卓が必須のため、アプリなどの用意をしておきましょう!