There’s quick and dirty screenshots to share something transactional and there’s screenshots that you want to be pixel perfect for a presentation.
We believe the native tools are plenty to do both on macOS.
Step 1: Define the area to capture
Entire Screen: CMD+SHIFT+3
Portion of Screen: CMD+SHIFT+3 → Drag area to capture
Window: CMD+SHIFT+3 → SPACEBAR → Select Window
Step 2: Use captured image
In recent versions of macOS the screenshot appears in the bottom right corner, ready for the next action. In quick and dirty scenario’s you’ll likely drag it to the place you need it, use CMD+TAB to switch to the right app if necessary. In using this workflow, your screenshot won’t be saved locally (which in this scenario is desirable).
If you need to point something out in the screenshot, macOS provides an experience for some basics.
Step 1: Open the editor
Clicking the screenshot thumbnail opens a Spotlight with the Markup Toolbar already open. If you have saved a screenshot in the past (or any other image) you can do the same by opening the Markup Toolbar in the Preview app or Spotlight.
Step 2: Make annotations
For quick and dirty, the Draw tool works best.
Step 3: Use annotated image
CMD+C → CMD+S → CMD+V
This is the fastest combo to capture your changes, get rid of the spotlight and use it somewhere.
There's no shortage of Chrome extensions to make screenshots, yet everything you need is build-in if you know where to look. This method is preferred if you are interested in the raw content without any pixels that belong to the window itself. The round corners at the bottom of Chrome for example won't be in the screenshots that are made with this method + you can also easily control the image size.
Step 1: Define size of output
CMD+SHIFT+C
If you want your screenshots to be a specific size, we'll need to open the Chrome DevTools.
By default the DevTools are docked inside of the Window, you'll likely want to undock it to maximize the available space in that viewport. You can do that by clicking on the overflow menu (⋮) and choosing Undock into separate window.
If you drag the bottom right corner, you'll see the size of the viewport appear at the top right but that's a tedious way to do it. It's better to use the Device Toolbar, click on the icon with the 2 devices or use CMD+SHIFT+M. In the dropdown, choose "Responsive" and fill in the exact size of the viewport you want. It might appear smaller on your screen, but that won't affect the screenshot. If you have to make a lot, consider creating a preset by choosing Edit in the dropdown.
Note that you can fill in a bigger size than your screen allows. E.g. capturing a 1920x1080 (HD) screenshot from a 1440x900 laptop. Another way this is helpful is when the "Full-size Screenshot" doesn't yield good results because there's some scroll highjacking going on in the content. The maximum height is 9999px, which should be enough for most websites.
Step 2: Capture screen
CMD+SHIFT+P → Type: "Screenshot" → ENTER
If you already know what type you want, this are fastest way to access once the console is open:
Step 3: Use captured images
Click & Drag from Downloads Toolbar (→ CMD+TAB) → Drop
The quick and dirty method gets you a long way, to take it to the next level you'll want control over the size and window shadow.
Step 1: Define size of output
Check out this snippet to set the size of a window: https://www.labnol.org/software/resize-mac-windows-to-specific-size/28345/
Step 2: Capture screen
If you want consistently sized windows, it's recommended to use the Window method. Important to know is that you can omit the shadow by holding down Option when you click.
