Search code examples
cssimageimage-processingpaint.net

measure distance in pixels on image

I have an image that I want to convert to an HTML page. The image I have is a PNG that is 1:1 ratio.

I want ,for example, to measure the width, height, padding of element on the image so that I can convert it to CSS.

What's the easiest way to measure the distance in pixel between 2 points on the image? It would be best if I could avoid photoshop for this purpose.

Solution

  • I find it odd that you are working from a .PNG rather than an editable document. It's trivial in that case to select elements and see their dimensions. Instead you'll likely have to open the image up in some sort of image manipulation software, zoom in, and measure using marquees around each element and the padding/spacing in order to get your dimensions.

    You could even do this in Microsoft Paint if you have to. The selection tool gives you pixel dimensions of your selection as you drag it around.