Easily Make Full Page Screenshots with webkit2png

As a web developer and designer, I am always taking screenshots of web pages. Sometimes I do this to show a client
something, other times I just need a shot for my portfolio. But there’s a problem…

One of the most annoying things about using OSX’s built in screenshot tool is that there is no easy way to grab content from a webpage that goes beyond ‘the fold’; the area you have to scroll to see in your browser. The only way to do this is to take two or more screenshots, stich them together in Photoshop, and then save the result. That’s a time consuming process that is anything but efficient!

Enter webkit2png. This is a command line tool that allows you grab full page screenshots without the labor of stitching. I know its command-line based, but don’t let that scare you; it’s really easy to use. You just download one file from the developer’s website and then run the following line of code:

python /path/to/webkit2png.txt.sh http://thedomainyouwanttocapture.com

That’s it. webkit2png will connect to the site, figure out its dimensions, and generate a png for you. It also by default will generate a thumbnail image (very useful for portfolio galleries) and a clipped thumbnail (useful if you want all your thumbnails in a portfolio to have the same dimensions).

This is a simple solution for an all-to-common problem. Thank you very much, Paul Hammond, for this awesome tool!

Read More