Photoshopのカンバスとアセットを使って効率的なカンプ作成


1.キャンバス別で各ページや必要であれば各幅のビューを解像度等倍で作成

2.完成したデータをキャンバスごとに別ファイル書き出し

3.書き出したキャンバスごとのPSDファイルでレイヤーをRename、アセット書き出しを行う

4.最初のキャンバス、解像度等倍のものでサイズ、マージン幅など確認しながらコーディング

※レイヤーを選択した状態でコマンドを押すとマージン幅がガイド表示される
※AdobeCloud上にアップすることで使用しているカラーコードやCSSが確認できる

CSSをコピーについて
PhotoshopのCSSをコピーはレイヤー名がクラス名になる。これを駆使することでPhotoshop上でプレコーディングを行う事が可能。