How the the pornographer of Web 2.0 does what he does.

I wrote a post awhile ago about why I screenshot. I had intended to follow up with a post on how I screenshot, but I never did... until now (thanks to prodding from Patti Roll and folks on Flickr (like Mathew H) and mentions on ReadWriteWeb).

Why I screenshot

My motivations for screenshotting are pretty simple really. I'm like any other photographer, except I rarely have to worry about my subject's light, given that all pixels are more or less illuminated the same. I aim to document, and I aim to teach, and I enjoy sharing my experience as captured in the context of my operating system and on the wide open web.

What I screenshot

Most commonly I screenshot anything that catches my digital fancy. These can be clever interfaces, novel interaction models, compelling color arrangements, inspiring homepages, funny or sarcastic quotes or tweets... or the modern equivalent of software packaging known as Disk Images. I also document errors, mistakes, typos or historic occasions that can only be understood in the context of a complete digital copy of a webpage, rather than remnants from a bygone moment in time.

How I screenshot

I screenshot a lot -- all day long on most days. The process used to be painful and slow; I would use Command-Shift-4 to record parts of my screen, which would save sequentially numbered images on my desktop named Picture 1, Picture 2 and so on. Later, I would come back and rename these images (if I could remember the source) and then use the Flickr Uploadr to post them to my Flickr account.

All that changed with Skitch, made by Plasq.

I don't know when I first talked to Cris Pearson about Skitch, but it was probably sometime in the fall of 2006 and he told me about an application that he thought I'd really like. Indeed I did -- and it revolutionized my workflow. Whenever the inspiration hits me, I simply hit Command-Shift-5 (or add shift as a modifier to do a timed snap), pick my upload service of choice (I only use three right now: Skitch, Mento and Flickr) and hit Upload. If I've uploaded to Flickr, the next step takes me to Flickr's description and tagging interface. I fill out the description with a URL for the source and tags to describe the pattern and whatnot, hit enter and I'm done. It usually only takes a couple seconds (though definitely could be optimized if I could do the tagging/description on the client side and upload "silently").

Tagging and organizing

I admit that I've not done a great job using Flickr's Sets and Collections to their full potential. Even though I was excited when they first arrived, I just haven't found an efficient way to make use of them, and haven't become part of my flow (though support in Skitch would likely change that, since I love organizing things otherwise).

I currently use some pretty regular tag conventions though, and proposed a standard set of machine tags for dealing with interface patterns, though there's been little (if any) pickup of the concept so far.

I try to tag my snaps based on the primary element that I think is illustrated, rather than trying to tag each and every feature in a screenshot. That works out sometimes, but not always.

I will also use machine tags -- primarily for Tweets and application screenshots -- using the twitter and iusethis namespaces.

I'll use the prefix "needs" to indicate sites or applications that need certain features, like "needsopenid" or "needsoauth".

It could also just be me, but I find that doing tag look ups on my Flickr account is extremely slow. You're better off doing a plain search to get decent results.

Tools

Just like any photographer worth his salt, I use a ready assemblage of tools that have improved over time. They are:

• Skitch: I use Skitch on a daily, if not hourly basis. It forms the foundation for my screenshotting arsenal. When I'm on computers without Skitch, it's like not having any eyes. Yeah, it's that bad. What really makes Skitch so compelling (apart from its simple and cute editing tools) is its integration with Flickr. Other screenshotting tools have come along, but none integrate with Flickr. Their loss. That's where my audience is; that's where my screenshots go.
• Little Snapper: I've come to find Little Snapper an invaluable tool for taking a large volume of full-page screenshots and collecting them in an iPhoto-like application that allows me to tag, rate and organize them. It's still only 1.0 and doesn't do everything the way I'd like, but it's certainly a cut above the rest, especially the ability to grab a section of a page, as you do with the Web Clipper in Safari.
• Web Snapper: I used to use Paparazzi for full-page screen grabs, but at some point (I think after Leopard) it just stopped working. Web Snapper is its able successor, though it's not free or open source. It integrates directly with WebKit/Safari and has a nice queuing feature (handy when going through signup flows).
• Flickr: Almost forgot to mention this, but Flickr wins for storing my screenshots hands down -- for its design, its organizing tools (namely, tags, though sets are handy too), its community features and its web services. It also helps that it's managed to scale after all these years of uploading full-res, full-color PNGs and embedding them in blog posts, forum entries and Basecamp threads.  
• Flickr Uploadr: Web Snapper unfortunately doesn't upload directly to Flickr so I've got to resort to secondary measures. When I've downloaded just one full page snap, I'll use Skitch; when I've downloaded many full page shots, I'll switch to the Flickr's batch uploader, mostly because I don't trust the in-browser version not to crash.
• Quicksilver: It's an old classic, but if Skitch is my eyes, Quicksilver is my hands. I use Quicksilver to quickly launch different apps -- or to access my Screenshots folder, where I keep Web Snapper's output. 

Addenda

A couple sites and tools have popped up that aim to address the burgeoning screenshotting community. So far I've discovered:

Sites

• CommandShift3
• PatternTap
• Scrnshots
• Konigi
• guspim's Design Solutions
• Snappy apps for Mac

Tools

• Skitch
• Little Snapper (full length webpages)
• Web Snapper (full length webpages)
• Paparazzi! (full length webpages)
• Snipplr
• Sharpshooter
• Screencasting software
  • Screenflow
  • iShowU
  • Screenium
• Hybrid
  • Jing!