DAY35.デザインカンプからコーディング編 PerfectPixelを使ったチェック&修正
01.PerfectPixelのダウンロード・活用方法
PerfectPixel
・実際のサイトの上に透過した画像を重ねる
・ブラウザ上でコーディングのズレを確認できる拡張機能
・修正もデベロッパーツールで簡単に出来る
必ずしもピクセルパーフェクトで納品が求められるわけでは無い
プロとして再現度の高いコーディングができる実力は身につけておくべき
02.PerfectPixelの使い方
1.重ねる画像を取得する
2.サイトに重ねてみる
①デベロッパーを幅をカンプと合わせる
②カンプの画像を読み込む
・X → 0
・Y → 0
・Scale → 1
・Lock → 選択
3.「答え」を見ながら微調整
デザインカンプはコーダーからすると1つの答え
PerfectPixelのいいところは、答えを見ながら調整していける
デベロッパーツールを使って微調整しながら正解を導き出すことができる
この記事が気に入ったらサポートをしてみませんか?