Measure Pixel Coordinates in Paint.NET for Web Slicing

Accurate asset slicing for web development requires extracting exact pixel dimensions and placement coordinates from design mockups. Paint.NET provides built-in measurement tools, cursor tracking, and pixel grids that allow developers to determine bounding boxes and coordinate positions without costly software. By mastering Paint.NET's status bar metrics and selection tools, you can extract pixel-perfect dimensions for CSS positioning, sprite maps, and image optimization.

1. Set Units to Pixels and Enable Rulers

Before taking measurements, ensure the workspace is configured to display standard screen pixels rather than inches or centimeters.

  1. Navigate to the top menu and click View.
  2. Select Rulers (or press Ctrl + R) to display measurement scales along the top and left borders.
  3. In the toolbar, locate the measurement units dropdown (typically defaulting to inches or centimeters) and switch it to Pixels.

2. Read Real-Time Cursor Coordinates

Paint.NET provides live cursor coordinates at the bottom of the application window.

  1. Move your mouse pointer over the canvas to the top-left starting corner of the element you want to measure.
  2. Look at the right side of the Status Bar at the bottom of the screen.
  3. The coordinate readout displays the exact cursor location in the format (X, Y). Note this pair as your element’s top-left offset for CSS absolute positioning.

3. Measure Asset Dimensions Using the Rectangle Select Tool

To get both the starting coordinate and the exact width and height of an asset:

  1. Select the Rectangle Select tool from the Tools palette (press S).
  2. Click and drag a box closely surrounding the asset you want to slice.
  3. Check the Status Bar at the bottom:
    • The left side of the coordinate display shows the bounding box origin: Top-left: (X, Y).
    • The right side shows the selection dimensions: Size: W × H (width by height).
  4. For precise CSS background sprites, record X, Y, W, and H.

4. Enable the Pixel Grid for Exact Boundary Alignment

Anti-aliasing and soft edges can make it difficult to determine where an asset starts and ends.

  1. Zoom into the image beyond 200% using Ctrl + Mouse Wheel or the zoom slider in the bottom right.
  2. At 400% zoom and higher, enable the pixel grid by clicking View > Pixel Grid (or press Ctrl + Shift + G).
  3. Individual pixels will be separated by fine grid lines, allowing you to align your selection to exact pixel boundaries.

5. Slice and Export the Measured Area

Once your selection boundaries match the target asset:

  1. Press Ctrl + Shift + X (Crop to Selection) to isolate the asset instantly to its exact measured dimensions.
  2. Verify the final image size in the status bar or under Image > Resize (Ctrl + R).
  3. Save the asset using File > Save As in your target web format (such as PNG or WebP).
  4. Press Ctrl + Z to undo the crop and return to your full mockup to measure the next asset.