Pictures speak a thousand words, and this is very true when writing documentation. People have a tendency to get lost in walls of text, especially when they're in a hurry to solve a problem or when English is not their first language. By including screenshots throughout our documentation, it's easier to find the sections that map to a piece of the product they're currently seeking help on, or to get a better sense of the product as a whole.
Taking quality screenshots requires a good eye and the right tools. For every screenshot, we require two files:
screenshot.png )[email protected] )The rendered documentation on the website will select the appropriate screenshot for the display. The standard screenshot loads first, and then transitions to the Retina version.
Because of this, it's important that the screenshots are pixel-aligned. This means being able to take a screenshot in standard resolution and then immediately take a screenshot of the exact same location in a 2x Retina resolution.
Macs are a good target for this, though other computers may also be suitable for this task. This guide will focus on Mac software.
There are two tools that will make this process much easier on a Mac: