Design overlay

Lay a design over the page to check the build against it: a picture of the design, placed in the page's own coordinates so it scrolls with the page.

1. Open the Design tab. Design overlay is the first card.
2. Drop a PNG, JPEG or WebP on it, paste one, or click it to choose a file. It lands at the top left corner of the page in view, half transparent.
3. Choose Onion skin to see both at the opacity you set, or Difference: where the build matches the design it turns black, and only what differs stays bright.

Line it up#

• Move lets you drag the design on the page, or nudge it with the arrow keys, 10 pixels at a time with Shift. Press it again, or Esc, to stop, so clicks reach the page again.
• Align to selection puts the design's top left corner on the selected element's: the way to check one component.
• Align to page captures the window without the design and moves the design to where its shapes match the page best, within 64 pixels of where it is.
• 1x, 2x and 3x set the pixel density the design was exported at: a 2x export of a 1440 pixel wide page is 2880 pixels wide. Nitpique guesses it from the width.

Remembered per width#

One design is remembered for each site and window width, in this browser, with where it sits and how it is blended. Make the window another width and the design kept for that width takes its place, if there is one. A picture too large for the browser's storage is shown but not kept, and the card says so. Remove forgets it. Nothing is uploaded.