We have just launched Budget and needed to do a final review to improve all the content and update all the images, whilst doing so, I discovered a screenshot hack that would have made things go faster.
Before the screenshot hack
In the past I would either screen grab the bit I wanted, or screen grab the entire page and crop the section I wanted in my editor of choice.
Deciding on the focus for the screenshot was always tough. You know what part of the page you want in focus but it’s tough deciding how much extra you need to include in the image to keep it consistent with other images on the page.
Screenshot Hack?
OK, so what is the hack? Well, Chrome.
I was testing the responsive layout on one of my Apps and saw the “Edit” menu item in the “Dimensions” dropdown.
I set up a couple of custom options, 400 * 400 and 390 * 725 and boom! I have a nice frame for screenshots and can decide on the focus as well as ensure all the screenshots are the same size.
Late to the Party
To anyone that is a designer or discovered this “hack” a decade ago, I’m sure this revelation is laughable! However, if you are a developer first like me and need to take consistent screenshots. I’d suggest giving this a go.
I accept that very few people will learn anything from this hack; I’m obviously not adding anything to any developer’s toolkits. However, as much as this doesn’t add anything useful, you might be interested in reading about the project setup I’ve settled on which has been working well for years.