Screenshoting for blog – creating guidelines

Previous part of series – edit and compress .

Blogs are perceived as personalized form of site. They have recognizable designs and recognizable writing styles. It is reasonable to make screenshots consistent and recognizable as well.

Why bother

Two simple reasons:

  1. Being consistent looks good and professional.
  2. The more details are pre-defined the less work each time.


Blog design limits width of images that can be used. It is also worth remembering that theme might change in the future and trying to fit hundred of posts with wide images into new design with thin column is no fun at all.

Widths to be defined:

  • fits in column without anything around;
  • fits with text flowing around;
  • fits inside list item;
  • thumbnail that links to full image.

As for height it is more flexible. You may define some and stick with it but changing that as needed is easy.


Purpose of screenshot can be quite different:

  • show overall looks of program;
  • show part of interface;
  • show resulting output;
  • stick in some loosely related eye-candy to make it more visual.



Photo by oskay

Aside from eye-candy part it’s important that reader can easily grasp how it would look at his desktop. This can be achieved by keeping screenshot 1:1 (without resizing) or including parts of windows interface that have standard size. For program windows title bar is mostly enough, for more original or smaller stuff Start button and part of taskbar will do nicely.

Depending on purpose of screenshot choice of background can be different as well:

  • none or neutral for self-sufficient programs;
  • other windows (possibly your wallpaper) for small widgets or customizable interfaces that are supposed to blend with surroundings.

Preparing windows

When you have your dimensions decided you might discover that it is hard to make windows fit those dimensions. Windows graphical interface wasn’t exactly created with pixel-precision in mind.

Sizer is tiny freeware app that allows you to easily resize windows to specified sizes. Not portable but works without installation .



Home&download http://www.brianapps.net/sizer.html

Privacy and easter eggs

Don’t let personal information (yours or from anyone else) get into your screenshots. Ever. That’s just bad, evil and recipe for disaster. Paint.NET (image editor I recommended in previous part of series) allows to easily erase or edit such information. Note that using blur is not advisable because with right tools (and brain) blurred texts can be recovered.

One of underused aspects of screenshot is planting easter eggs in them. A lot of blogs simply show screenshot right after install (and probably right before uninstall at the same time). Lots of programs are meant to be used with some data or interact with other programs. Subtly showing such interactions may be used to:

  • non-intrusively watermark screenshot, who would steal pic with your logo in it?
  • let readers see glimpse of your other interests;
  • display that you have [no] taste in choosing wallpapers.


Creating guideline for screenshoting is doing part of work once instead of doing it daily . Decide what should be static while fitting your blog best and stick to it.

Related Posts