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


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