Photoshopのデザインカンプをもらってからコーディングする方法

Photoshopのカンプをもらって開いてから「さあ、どーする」状態になった方に伝えます。

使用バージョン：PhotoshopCC（v 20.0.4）

全体をみる

Photoshopを開いて「スライスしないと！」と思ったあなたは不正解！

まずはカンプの全体を見て、以下の点に注意して見よう。

H1、H2、H3の確認

ロゴはH1?P？

HTMLの階層構造を意識して、「大枠（container）」「中枠（section）」「小枠（flex-box、float-box）」などを簡単に考えよう。

リンクになる箇所をチェック。ロゴはリンク？ここのテキストはリンク？バナーなの？画像なの？

ホバーの表現はどーするか？デザイナーさんに確認しないと・・・わからない。

画像になる箇所、テキストで記述する箇所を分けていく

スライス設定（アセット書き出し）

画像で切り抜く場所が確定したら、スライス工程に入ります。

・・・とっても簡単です。

ファイル　＞　生成　＞　画像アセットをチェック

環境設定の確認

アセット書き出し先を変更する

スライスしてみた！（アセット書き出し）

一度設定を行うと、次回ファイルを修正（スライス画像の変更や、スライス画像の設定）してからphotoshopを保存するだけで、「assets」フォルダが最新に切り替わる仕様になっています！

スライスは、「画像に名前（拡張子を含む）を付けて保存するだけ」なのです！
命名方法によって、「2倍書き出し」「フォルダの階層構造を維持して書き出し」 Photoshopの画像アセットの生成用レイヤー名まとめ

テキストデータの値を確認しよう！

photoshopから文字データを確認してCSSに反映する方法です。

line-height の求め方

「 line-height / font-size」
26px / 16px = 1.625（単位が付かないのが正解）


letter-spacing（トラッキング）の求め方

「トラッキング / 1000 」em（単位）

100 / 1000 = 0.1em


数値の計算には電卓が必須のため、アプリなどの用意をしておきましょう！