Taking Screenshots Like a Boss

Today I’d like to share a few tips and resources for taking and managing screenshots on Macs. We’ll start with the basics and move on to the more advanced tactics.

Take a screenshot of your entire screen


Take a screenshot of a portion of your screen

Command-Shift-4 then highlight the area you want to capture

Take a screenshot of a specific window

Command-Shift-4 then press space then click on a window

Change the directory where your screenshots are saved

By default they’re saved to the desktop, but you can change the destination.

Take a screenshot of an entire webpage, part 1

For this I highly recommend the Blipshot Chrome extension by Automattician Davide ‘Fol’ Casali. It will automatically scroll down the page, take a screenshot of each section, and piece them together into a single screenshot that you can save to your computer.

Take a screenshot of an entire webpage, part 2

If you find yourself taking a lot of screenshots and are interested in a way to organize them, check out the Ember Mac app.

When you use its Chrome extension to take a screenshot, you can specify a category which will group those screenshots together:

Screen Shot 2015-12-07 at 1.41.45 PM.png

You can then browse your collections in the Ember Mac app.

The major downside to Ember though is the way it takes screenshots. Unlike Blipshot which will take a screenshot of the page as it currently stands, Ember seems to reload the page internally and then take a screenshot of that freshly reloaded page. So if you’re working with a JavaScript-heavy site, Ember’s screenshots won’t reflect any of the changes that have taken place since you loaded the page. Also, Ember doesn’t work with Flash websites.

My hacky workflow for managing screenshots is to use a combination of Ember and Blipshot. For capturing simple websites that I want to organize (where a screenshot of a freshly loaded page will do and it doesn’t use Flash) I use Ember. For sites where I want the screenshot to reflect the current state of the front-end or sites that use Flash, I take a screenshot with Blipshot, then drag it into the appropriate collection in the Ember app.

One question for you all

One thing that’s frustrating is taking screenshots on a Retina displays because all of the screenshots wind up 2x the size that they appear on the screen. Is there a simple way to take a screenshot on a Retina display and have not be 2x? When it’s important that the screenshot not be 2x, I load it in Pixelmator and shrink it to 50% of its original size. Kind of a pain though.

Nothing beats Dash for quickly checking dev documentation

Dash is an incredibly useful Mac app that I’d highly recommend all developers check out. It lets you instantly search developer documentation (devdocs) straight from your computer:


You can configure it to check only the devdocs you use on a regular basis. For example, I have Dash configured to search the devdocs for SaaS, Rails 4, jQuery, HTML, jQuery UI, PHP, MySQL, CSS, JavaScript, Ruby, WordPress, Node.js, Lo-Dash, R, and D3.js. It supports over 150+ sets of documentation and also lets you generate your own. Dash also keeps the documentation automatically up to date as it changes.

If you want to constrain your search to a specific set of devdocs, you can prefix your search such as ruby:gsub and it will only check the Ruby docs.

I also set Cmd+Shift+D to load Dash so that I can pull it up while I’m coding, perform a search, and Alt+Tab back to Sublime without ever touching the mouse.

It’s free to try and $24.99 to buy. Give it a shot and rejoice that you’ll never again have to Google for documentation.

Check out LICEcap to make GIF screencasts

LICEcap is a slick cross-platform app that lets you create GIF screencasts.

When you load it, you’re presented with a resizable frame that you can adjust to fit the portion of your screen that you’re interested in recording:

Screen Shot 2015-11-28 at 12.49.55 PM.png

Hitting the Record button gives you a few options:

Screen Shot 2015-11-28 at 12.52.58 PM.png

Once you hit Save, it begins recording. When you’re done, you simply hit Stop (or Pause) and you have yourself a GIF:

WordPress.com GIF.gif

Hat tip Sandy McFadden and Adam Weeks for the suggesting it.