-
1:ID:KxFCoT · 2020-08-05

初心者です。
トレーニングのために、WEBサイトをトレースしようとしています。

<困っていること>
Chrome拡張:GoFullPageでスクリーンキャプチャ
→  Photoshopで開き、選択範囲でピクセルサイズを測る

しかし、Chrome inspect で確認するピクセルサイズと一致しない


Photoshopは解像度72ppiです。
Chrome表示は100%です。

一致させるにはなにを変更したらいいのでしょうか?

5 件の回答

2:ID:jfVYCi · 2020-08-11

横に並べてマネしたほうが練習になるんじゃないか。

ちなみにwinの解像度は96dpiだが。

3:ID:CppP5n · 2020-08-12

GoFullPageがよくわからないけれど、それはChromeのスクリーンキャプチャをする拡張であって、Androidをエミュレートするものではないでしょ?
対して、InspectはAndroidをリモートデバッグするもので、そりゃ一致しなくて当然という気がするけど。
なんの練習してるか知らないけれど、モバイルのトレースするなら、モバイル側でキャプチャするべきだと思うよ。レスポンスを含まない、ただのトレースの練習なら、まずはPC表示だけで十分だと思うし。

4:ID:RhtGNf · 2020-08-12

レスポンシブサイトを違うウインドウサイズで表示してるとか

5:ID:3as6hg · 2020-08-12

目測でやんなさい。そうしないと目が鍛えられない。ホントはデッサンがいいけどね。デッサンは実は「目を鍛える」作業。初心者の絵が崩れるのは「実物とのズレが見えてない」から。実測してるといつまで経っても「いいバランスを判断する目」が身につかないよ。

6:ID:MkH84g · 2020-08-12

デザインのトレース?コーディングのトレース?
前者なら3さんの言う通りモバイルでキャプチャしたものをPCへ送るか、
自分で用意した規格にキャプチャサイズを拡大縮小で合わせて上から作っていくのでいいと思うし

後者なら実際のサイトで検証ツール使って各要素のサイズ確かめて作ればいいんじゃないでしょうか?

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る