TinkerShot

Guides

How to make screenshots look clean in GitHub pull requests

A screenshot in a pull request shows reviewers what changed. A tight crop, even margins and sharp text make it quicker to read.

The quick way, with macOS alone

macOS can copy a capture straight to the clipboard instead of saving a file (⌃⇧⌘4, then drag over an area). Click in the GitHub comment box and paste; GitHub uploads the image and adds it to your comment. This works, but the image has no margin, so it runs into the edges of the comment and is hard to tell apart from GitHub’s own interface.

With TinkerShot

  1. Capture only what changed. Choose Capture Region from the TinkerShot menu bar icon (⇧⌘2) and drag over the part of the UI the pull request touches. For a whole window, choose Capture Window.
  2. Choose a quiet background. Auto-match builds a background from the colours already in your screenshot, so it doesn’t fight with the content. A soft gradient or a solid colour works too.
  3. Even out the margins. Keep Padding moderate so the screenshot stays large in the comment. Add a little Radius and Shadow so it reads as a separate image. If your crop is lopsided, turn on Balance.
  4. Optional: a Mac window frame. For a desktop app, the Mac window frame adds a title bar. It picks light or dark from the edge colour of your screenshot.
  5. Keep the size on Auto. At Auto size TinkerShot copies your screenshot’s pixels 1:1, without resampling, so code and small text stay sharp.
  6. Copy and paste. Click Copy in the editor toolbar (⌘C), then paste into the pull request description or comment.
A plain pull request screenshot: no margin, no background.
Before: the plain capture.
The same pull request screenshot on an Auto-match background with even padding, rounded corners and a shadow.
After: Auto-match, padding, radius and shadow at Auto size. Real TinkerShot output; the sample content is made up.

Before and after shots that match

If your pull request shows a before and an after, style both the same way. Set up the look once, save it with Save as New… in the preset menu, and apply that preset to the second capture. Both images then have the same background, padding and size.

Good to know

  • TinkerShot itself makes no network connections. Pasting into GitHub uploads the image to GitHub, as with any image you paste there.
  • Check a screenshot for tokens, emails and other private details before you paste it into a public repository. TinkerShot does not detect or hide them.
  • The free version adds a small “Made with TinkerShot” mark to exports. The Lifetime Unlock, $4.99 once, removes it.

See also: How to add a background to a screenshot on a Mac.