Capture
Screenshots of an element, an area or the page, with measurements and bug-report details.
What you can capture#
Capture makes a screenshot that carries its measurements with it. Click Capture on the bar and choose:
- Element: the selected element, at your screen's full resolution. Tall elements are stitched together, with fixed and sticky parts shown once.
- Area: drag a rectangle. Esc cancels.
- Visible page: what is on screen now.
- Full page: the whole page from top to bottom, at the window's width. Nitpique scrolls through it and stitches the shots, with fixed and sticky parts shown once. A very long page is cut where a browser's canvas ends (about 32,000 device pixels), and the confirmation says so.
The shortcut#
Press S with an element selected to capture it, or with nothing selected to capture the visible page.
Options#
| Option | Choices |
|---|---|
| Then | Download a PNG (the default), or Annotate: open it in the Annotator first. To mark up the page itself before capturing, use Annotate the page |
| Transparent | Only what is drawn: an element on its own, or for an area or the page, everything but the page's own background. Rounded corners, shadows and translucent fills keep their real transparency |
| Measurements | Include Nitpique's overlays in the image, or not. Off in a transparent capture |
| Padding | 0, 16 or 50px around an element |
| Bug report | Also copy Markdown with the selector, size, URL, browser and viewport to the clipboard |
Your choices are remembered. Nitpique's own bar and panels never appear in the image.
Annotate and redact#
With Then set to Annotate, a capture opens in the Annotator, in a new tab beside the page: arrows, shapes, text, highlights, blur and redaction, then Copy or Download. Everything it does is in the Annotator.
A transparent background#
- Select the element.
- Open Capture and turn on Transparent. It works for an area and the page too, taking away only the page's own background.
- Capture the element.
A bug report with it#
- Turn on Bug report in the capture options.
- Capture. The image is saved, or opens in the Annotator, as usual.
- The Markdown details (selector, size, URL, browser and viewport) are copied to the clipboard, ready to paste into an issue beside the image.
A layout grid or breakpoint lines you have turned on are left out of the image.
Questions
Can I capture an element with a transparent background?
Yes. Turn on Transparent in the capture options. Rounded corners, shadows and translucent fills keep their real transparency.
Do Nitpique's bar and panels show in the image?
No. They never appear, and a layout grid or breakpoint lines are left out too.
What goes into a bug report?
Markdown with the selector, size, URL, browser and viewport, copied with the image.