In many cases, they show a beautiful virtual 3D box shot, but somehow neglect the same eye candy on their product screenshots. What I am talking about here is the use of various artefacts such as not properly clipped window borders, weird shadows or the most obvious “dirt” on background.

So it is important to have pixel perfect virtual boxes (which don’t even exist in reality), but the quality of screenshots of products itself doesn’t matter ? Or are there some other obstacles that make producing nice screenshots a hard task ? Lets have a look.

New Windows 7 & Vista Aero theme look

With the arrival of the new Windows Aero theme, new problems related to taking screenshots emerged. The new see-through Aero Glass windows with rounded corners look really cool. But in the moment you capture images of your software with traditional print screen tools, you will also capture everyting you see beneath the glass parts of window. A new term was coined to name this – “a dirty background”. Dirty backgrounds may look weird, out of context and act disturbing. We all know having additional links on shopping cart page may distract customer from the buying act, so why should we tolerate distracting elements on images whose main purpose is to persuade potential customers to buy as well ?

Have a look at this screenshot:

I just grabbed the above screenshot, while writing this article, from the current website of one well-respected ASP member (hope it’s ok Andy ).

Notice the “dirty background”. Also, the corners of the clipped window look tufty. Looking at this real example makes my eyes wander to the dirty background area trying to recognize what was beneath. I think this is distracting, because I should be considering the quality of the help file window and not puzzle dirty backgrounds.

So I made one small improvement:

And, because Perfect TablePlan relates to organizing ceremonial events, I themed the same screenshot on a background with wedding table image plus one reflection effect for the screenshot itself. Have a look:

However, in the last example, the background is back again, which may distract users from the screenshot objective. I think in this case we have a better kind of distraction, because the wedding table image background  relates to the screenshot itself, while the previous window with random dirty background was completely unrelated.  The screenshot in this example can be further improved by putting more focus on the captured window itself, while keeping related background image present.

For this purpose, I made the original background image as half transparent against solid black background producing the following result:

Does it matter ?

Now that we improved Andy’s real-world screenshot, the most important question still persists – does it matter? Would it improve the overall perception or even increase sales? The fact is Andy is successful even with dirty background screenshots. So what, would he need it ?

Looking for an answer I have found following articles:

1. Bob Walsh in his “Why Hammers Sell Better Than Your Software” article wrote “A really good screenshot… this one screenshot sold me on this task management application”, (referring to culturecode .com). Really, this Mac-shot is very clean and the magnifier effects help emphasize the focus even more.
2. Stephen Anderson in his blog post claims that “Eye Candy IS A Critical Business Requirement“. My favorite slide from his presentation shows very nicely that eye-candy is also about trust.
3. Brandon Staggs on his web design service page claims: “Everyone knows the power of a first impression. The first judgment a visitor makes about your web site is how it looks”. So here is a question for Brandon: What influence does have screenshots made with various “artefacts” on the “first impression” factor ?
4. Apple – absolute perfection in design. If you look at any Apple software website, you can clearly see only  artistic crafted screenshots created in 3D space with shadows and reflections. Apple claims “design is function”.

So the conclusion of the above examples is that yes, pretty screenshots matter. The main reasons are:

• It helps to better target customer FOCUS.
• Pretty screenshots build customer TRUST.
• Pretty screenshots (on pretty web page) make a good FIRST IMPRESSION.

How can you do it ?

Lets move on to the technical part – creating a clean and pretty screenshot in the new Windows Aero environment. My main concern here is to explain how to get rid of the “dirty background” problem. There is a myriad of screen capturing tools but only 2 and half of them are able to directly capture clean images of windows in Aero Glass environment (none of that tools is from Microsoft tough).

Note: Besides “dirty backgrounds”, another problem is how to capture gradual surrounding shadow of windows.

Without tools

Essentially, you don’t need any tools to make a clean screenshot in Windows Aero. The trick is to position the window being captured against some solid color surface, then capture it and crop it. Just follow tutorials like this one.

With this approach, to get the solid background, you can do any of these two:

1. Set desktop wallpaper to some solid color and remove icons in some greater area to make space for windows positioning.
2. Open an empty white page in any Internet browser and lay Aero windows against the empty white page.

After the capture, a cropping step is required, because you are capturing either the whole desktop or a greater region with traditional capture tools. Depending on the tool, some may have a built-in cropping function.

There is also the option to turn off Windows Aero theme. This makes windows non-transparent, but it doesn’t solve the problem with rounded corners and window shadows. Finally, you must position the window against a solid background to properly handle rounded corners and shadow.

Last but not least, cropping itself may become an aesthetics problem. In most cases, you will have to do it by hand, which will produce unequal margins on more screenshots. And it may look unprofessional to have multiple screenshots – each with slightly different margin around. Of course, you can crop right around the window border – loosing shadow and possibly producing tufty corners.

The final problem which cannot be solved through this manual method is the fact that the captured images are already combined against its background color. Further adjustments as shown in the  examples above (with wedding backgrounds) are due to the lack of Alpha channel information, almost impossible to do without a professional tools.

With tools

Another approach is to use a tool which captures clean Windows Aero image (possibly with Alpha transparency channel).  There are only a few options here. A total of 2 applications can capture the clean image of Aero windows with Alpha channel and 1 application can capture the clean image, but without Alpha channel in captured window.

As you can see, the lack of tools might explain why many vendors tolerate the lower quality of their screenshots. It’s logical – if it’s tedious or hard to achieve, they simply don’t do it.

The Tools (sorted by price)

1. Window Clippings by Kenny Kerr, price $18

This tool simply does it. Captures clean Windows Aero images with complete Alpha transparency channel and shadows around. You can capture multiple windows at once, add watermark or send resulting image to FTP. Images produced by Window Clippings can be reused in external tools such as Photoshop for creating more sophisticated compositions (eg. themed backgrounds, reflection effects, 3D perspectives etc.)

2. WinSnap by NTWind software, prices starting at $24.90

This tool only does half of the job. It captures clean Windows Aero images, but without the underlying Alpha transparency channel. It simulates the surrounding shadow, which is a consequence of not recording the Alpha channel itself. As a result, images produced with WinSnap cannot be fully reused in Photoshop for more sophisticated compositions, because transparent parts of windows are already combined against white color. WinSnap on the other hand offers built in effects – reflection, contour, rotate, resize and watermark. It also has a sophisticated function for capturing all application windows at once.

3. CrossGL Alpha Screenshot by MicroInvention Ltd., price $29.95

This tool does it too. It captures clean Windows Aero images with complete Alpha channel and shadow around. You can capture multiple windows individually and position them mutually in a built-in Image Composer. Images produced by CrossGL Alpha Screenshot can be fully reused in external tools such as Photoshop. The program has built-in reflection, rotation, resize and 3D perspective tools and can put an arbitrary image on background. Watermarking, FTP and Send by Email are also included.

Use of these tools makes it quick and easy. They also automatically crop Windows Aero screenshots with constant margins, so your screenshots don’t suffer from the crop-by-hand variable margins problem.

Pretty Sells – Does it Relate to Screenshots? is a post from: Association of Software Professionals