Better Screen Shots For Documentation And Blogging

in General on Paint.net, Pngout, Screen shots, Window clippings

There are three tools that I use for creating and managing screen shots for documentation and posting here on my blog:

Now I can’t claim that I discovered these tools myself and they’ve been covered elsewhere probably more eloquently, but I think they’re worth pointing out again. Of course, what works for me might not work for you, but I use these tools daily and would have a hard time getting by without them.

Taking Screen Shots with Window Clippings

If you’re still using the Print Screen button or the Snipping tool in Windows Vista, I recommend taking a look at Window Clippings instead. There’s a lot to like about Window Clippings:

  • It comes as a single executable (32-bit and 64-bit), no installation required
  • It captures the window shadow in Windows Vista for better looking screen shots
  • It has a simple intuitive interface
  • It’s integrated nicely with Windows Vista (uses the correct fonts, UI paradigms etc)
  • It works well with OneNote and Paint.NET
  • It’s licensed to you, not for each machine you want to run it on

Window Clippings gives me great screen shots like this:

I could also capture multiple windows, parent windows, or even menus. I loved it so much I even bought a license, which I think brings the number of software products I own licenses for to three.

Editing Screen Shots with Paint.NET

I use Paint.NET to make edits to any of my images. Since Windows Clippings can output directly to Paint.NET, I can take a screen shot and immediately start editing it in Paint.NET. I also use this tool for creating the icons I place in some posts. So whilst it’s not the most full featured graphic editing tool, it does everything I need.

There’s a lot to like about Paint.NET too:

  • It’s completely free, although you are encouraged to donate to help development
  • It’s actively developed and has a small footprint
  • It’s integrated nicely with Windows Vista (uses the correct fonts, dialog boxes, UI paradigms etc)
  • It has all the features required for editing screen shots (and more) without resorting to pirating Photoshop
  • It has an active forum with many people writing plug-ins for it

Here’s Paint.NET editing the previous screen shot:

Given that Paint.NET is maintained by a bunch of Microsoft devs, it would be great to see this or a derivative in Windows 7.

Optimising Screen Shots with PNGOUT

PNG is my file type of choice for screen shots because it looks great and still manages to keep files sizes small. But as Jeff Atwood points out, you can use PNGOUT to squeeze the file sizes down further. In the screen shot below you can see the size difference between the before and after optimisation on the Computer screen shot above.

The file has been reduce to 77% of the original size. Great for reducing my bandwidth requirements, but also excellent for keep my documents smaller too. You can read more about using PNGOUT here.

Although PNGOUT is a command line tool, you can make life easier by adding a shortcut to your Send To menu or using a GUI wrapper like PNGGauntlet.

Wrapping Up

So that’s what I use and you can’t argue with great results - don’t settle for second rate screen shots. I’ll leave you with a few more pointers:

  • Please spare us (or maybe just me) from that awful shadow Windows Live Writer adds to images. It’s just plain ugly.
  • Always use the default Windows themes when creating screen shots for documentation. There’s a good chance your audience may not recognise that custom theme as anything close to what they’re seeing on their own machine.
  • Apparently you should disable ClearType when taking screen shots for documentation. I haven’t found this to be an issue yet, but then I don’t write for a magazine.