Scott Hanselman

Taking Proper Screenshots in Windows for Blogs or Tutorials

April 07, 2011 Comment on this post [54] Posted in Tools
Sponsored By

What? A blog post on how to take a screenshot? Seriously? Sure, this might seem a silly or superfluous blog post, but I can assure you that I see lousy screenshots on blogs, online tutorials and more (including some of my old posts) at least daily. Perhaps it's my "geek eye" but I (and I assume you, Dear Reader) just know when something is wrong with a screenshot. Just like you are the only one who notices when someone is running a 4:3 image on a 16:9 flat screen at a convention and it looks darned unprofessional, the same is true with screenshots.

"A bad screenshot is equivalent to a misspelled world. It makes both you and the word look unprofessional." - Me, just now.

Sometimes the best way to show you how to do something is to first talk about how not to do something.

Don't save Screenshots as JPEGs

JPEG is lossy. Lossy means "throws stuff away." Always save your screenshots as PNG, which is a lossless (throws nothing away) format.

A badly JPEGed image with hard to read text

Don't do uncomfortable, unnecessary or bad resizing

When resizing, only do it if you have to. Always use the highest quality resize algorithm your paint application supports. I use Paint.NET. It's one of the greatest pieces of software out there that should have shipped with Windows. Try to resize things "evenly," like 50% or 25%. If you resize to 73% or or 431 pixels by something, you are throwing data away and your screenshot will look bad.

A badly resized image with blockiness

Try to avoid small resizes, like taking an image and resizing it to 95%. If you are that close, try reframing or resizing the thing you're shooting, rather than doing such a small resize.

Don't customize your environment to the point it's unrecognizable

Think about Framing Your Screenshot as you would a photograph. I don't care about your toolbars. I don't care about your add-ins or your browser bookmarks. Turn EVERYTHING unnecessary off. That means toolbars, toolboxes, windows, add-ins, bookmark bars - anything that would make your screenshot look like your system and not mine. Keep everything stock and standard if you can.

Too many toolboxes open in Visual Studio so I can't see the code

Don't use tiny fonts and fancy colors.

As you can guess by now, these rules apply to screencasts as well. That means 16pt or better, folks. I use Consolas 16pt, minimum. 20 or 24 for Console Windows. Keep the default colors for your IDE. For Command Windows, use either White Text on a Blue Background or Green Text on a Black Background. Both have been proven to be the highest contrast and easiest to see (by me in totally scientific tests.)

Totally unreadable small text on a black background in Visual Studio

Don't show me what's underneath your transparent Aero Title Bar

Notice how you can almost see stuff underneath the transparent title bars of these last few screenshots? That's lame. There's two ways to fix it. One, open up notepad with its white background and put it behind the application you are shooting so the white is what you see behind the transparency.

Notepad open behind Visual Studio

Then, you can crop around it and get a title bar that doesn't look like crap:

A title bar that doesn't have crap behind its transparancy

Two, use a proper screenshot tool like Window Clippings. More on this later, but it's truly a great tool and worth it if you are taking more than a few screenshots a week. It'll save you time and make you look good. Window Clippings does two things right around transparency. First, it'll programmatically and automatically put a background behind your image while its taking the screenshot, and second, it'll make your transparent regions actually transparent when it makes a PNG.

See this square corner? That's not transparent and looks subtly lame. This was taken with the Window Selection option in the Snipping Tool that came with Windows.

A non-transparent corner with extra pixels 

See this one taken with Window Clippings? It's correctly transparent as a PNG and there's even an option to include a nice drop shadow.

A nice shadow with a transparent rounded corner

Don't use Basic or Classic Theme for Screenshots

Again, I don't know your personal preference, but it doesn't matter. Make your screenshots look like the typical computer, not your computer as you refuse to let Classic Theme go. ¡Viva NT4! Um, no.

A screenshot using the lame basic theme for Windows

Don't use Raster Fonts or Disable ClearType

We're going for aesthetics and standardization, here. Consider these two screenshots. The first has ClearType off. Notice the blocky capital A, for example.

Lousy bitmapped text

Next, the same shot with ClearType on.

Nice antialiased text

Don't Over-Annotate or use wacky Callout Effects

Another great screenshot program is SnagIt from TechSmith. I use their Camtasia product for all my screencasts. As great as SnagIt is, it has the powerful ability to create "callouts" easily. Too easily.

Don't use callouts. May God have mercy on your soul for using them.

Don't get me wrong, SnagIt is an awesome tool. But just don't point it at your face. Avoid callouts, and when you do, stay classy.

A classy and subtle callout

Use ALT text

Try to use ALT text for all your screenshots. There's a blind person (or a hundred) reading your blog. Do them a favor and put in some nice descriptive ALT text on your screenshots. I like to leave them personal messages that you never see. It takes only a second, but it lives in your post forever and helps the visually impaired participate.

Don't forget to squish your PNGs

PNG may be a lossless format but you can often still squeeze 5-30% of the size out of them with tools like PNGOut. This is a must-have tool in your path. I add PNGOut as a post-build step when I make tutorials and you can even hook up Window Clippings to run it for you after a screenshot. It is CPU intensive, but it's worth the effort when publishing your content. Go do it now, get all the PNGs from your blog, run PNGGauntlet on them (it'll take a while) and compare the directories. You'll save tens of megs if you're like me, and your readers will reap the benefits every time they visit your site.


So, rolling all this advice up, here's a good screenshot and a bad one.

Bad Example

Here's a common example that completely bad. This screenshot is:

  • Using the Basic Theme
    • It was likely taken on a Virtual Machine that didn't have Aero turned on.
  • Not Transparent
    • The window corners are curved, but there's a corner pixel.
  • Oddly cropped to fit
    • The right side is missing, but just a bit. Either chop a lot, or none. Don't chop a little.
  • Poorly resized
    • Note the trouble resizing the words "Installed Templates"
      Notice the aspect ratio is ever-so-slightly wrong.
  • JPEG'ed
    • Note the lossy artifacts under the selection in the listbox.
  • Poorly Staged
    • Note the highlight in the listbox is gray? That means the window didn't have focus when the screenshot was taken. It makes it hard to see the point of the screenshot.

Bad Screenshot

Good Example

Good Screenshot

Or, given our self-imposed width limitation of 600 pixels, perhaps:

Better Screenshot

I hope this guide helps you, Dear Reader, if you create screenshots as a part of your job.

Please, care about your screenshots as much as you care about your text.

"If a picture is worth a thousand words, a crappy screenshot is a thousand misspelled words." - Me, Just now. Again.

Enjoy!

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
April 07, 2011 9:09
Some good tips, a few of which I've also discovered during my "screenshotting" career. I wholeheartedly agree about the "stuff underneath the transparent title bar" bit. I usually move stuff over to my second monitor which has a plain black background.

A tool I use often is Greenshot. It's one of the first things I install after a PC rebuild.

Oh, the irony (assuming you've not done it on purpose)...
"A bad screenshot is equivalent to a misspelled world. It makes both you and the word look unprofessional." - Me, just now.
April 07, 2011 9:21
Great post! Instead of installing Window Clippings you can also just use Alt + Print Screen to only capture the active window. Saves you from having to crop out the background.

Keep up the great work!
April 07, 2011 9:28
Greg - Alt+PrintScreen doesn't preserve transparency, adds black dots on the corners, and doesn't include the window shadow. WindowClippings fixes all of those AND can capture not just the active window but also selections.

Daniel - Yep, subtle, eh?
April 07, 2011 10:01
Great post! Well-made screenshots are worth the effort.

Some tips I use for browser shots: (1) close all browser toolbars, leaving perhaps just the address bar, (2) clear the browser history - you don't want to see different colored links, and (3) close all other browser tabs.

I'll also recommend SnagIt - among other things I really like the "timer" mode for delayed screen captures.
April 07, 2011 10:07
Awesome Read. Generally I use the Snipping Tool and Alt + PrintScreen and those are great options for me. I will try out the other PNG optimization options for my blog posts. Thanks for sharing the Tips.
April 07, 2011 10:12
Good to know! I'm pretty lazy, so I'll probably stick with the old fashion method, but I'll keep this bookmarked for if I ever need a professional quality shot ;-)
April 07, 2011 11:03
"A bad screenshot is equivalent to a misspelled world. It makes both you and the word look unprofessional." - Me, just now

Shouldn't that be word? If I am right, then that's amusing that you misspelled a word in a quote about misspelling. If it is deliberate, and I am wrong, then that's also amusing that I was gullable enough to comment.
April 07, 2011 11:04
If you don't want to pay for Windows Clippings or if you don't have it handy a quick tip is to maximise a notepad window (so you get a white background) and then place the windows that you want on top.

Remember the snipping tool built into windows (and it saves png by default). just type 'snip' in the taskbar search.

BTW have any of you tried Win+S (you can configure it to copy to clipboard by default).
April 07, 2011 11:06
Should have read the comments above, Daniel beat me to it. Egg on my face.
April 07, 2011 11:21
If you can't pay for something like Win Clippings, one free alternative is IrfanView - allows you to capture a window or just a selection, to resize the capture, do basic image processing and save it in almost any format..
April 07, 2011 11:29
James - That misspelling was on purpose to make the point. It's a joke. Get it? See my first comment above. ;) Ah, now I see you noticed it. No worries!

Merill - Yes, I mention that Notepad trick and demo it in the post above. Also, Win+S is nice, but is OneNote specific.

Tudor - Good info!
April 07, 2011 11:42
I've gotta to add Faststone capture as an alternative utility; been using it for years and never fail to be impressed.
April 07, 2011 12:38
This is a very useful post :-)
I've just reblogged it here http://maxferrari.posterous.com/reblog-taking-proper-screenshots-in-windows-f

For image resizing you can try XnView, it has many image resizing algorithm (bspline, lanczos, hanning....) and I find it faster for cutting/cropping/resizing than a full-fledged graphics editor like Paint.Net.
April 07, 2011 13:37
> and it looks darned unprofessional, the same is true with screenshots.
> "A bad screenshot is equivalent to a misspelled world. It makes both you and the word look unprofessional." - Me, just now.

Perhaps, but nearly all blogs are personal--ie, non-professional--by design.
April 07, 2011 14:06
This bugs me a lot too but even though a lot of people wouldn't notice I'd like to think we are subliminally enhancing their opinion of our blogs.

If I'm writing a help manual I tend to use a white background like your notepad trick but for blog articles or sharing online (like twitter) I prefer them to have a subtle fancy background to frame them, see bit.ly/gvwsbc for a (small) example.

Unfortunately, when I use Windows Live writer with my wordpress blog it tends to screw up all my hard work and resize/changes them at will. I think I'm going to have to add them manually afterwards to acheive perfection!
April 07, 2011 15:16
This post appeared in Google Reader and I immediately looked at the first screenshot. I was surprised because normally you take good screenshots - glad I stopped to read the text :-)
April 07, 2011 15:24
Great tutorial, thanks!
April 07, 2011 16:05
Love your quotes...of yourself. :)
April 07, 2011 17:03
Love the post, but had a side question.

It appears images aren't loaded until you scroll the page to them.
What do you use for the delayed loading of images on this page?
April 07, 2011 18:02
I'm going to demur on the topic of drop shadows. In the "Good Example" I think the drop shadow is just noise.

Also, I don't see it mentioned, but if you are going to shrink a window in a screenshot in order to fit a width restriction, step one is to attempt to resize the actual Window (as long as you don't squeeze it into ridiculous proportions).

In the case of "New Project" this actually obscures the names of the templates by truncating them. So I actually think here it would be best to resize the window to show the full name of the template we care about and crop out anything that isn't critical. In this case that means cropping the title bar, the window borders and the blue blob along the bottom, at least. I'd crop from the upper-left corner of "Recent Templates" to just below and to the right of "Visual C#" in "ASP.NET Dynamic Data Entiti..."

There is also the option of providing a full-size screen shot on hover or on click of the shrunken one in your layout.
April 07, 2011 18:13
One thing I'd also mention is that adding callouts directly to the original image is not ideal - ideally, they should be proper vector/typographic elements separate from, and superimposed over, the pixellated image graphic. this is a little harder to achieve in a blog, but with increasing support for SVG it's not impossible.

If you're embedding the screenshot in tutorial material in Word or a PDF, embedding the callouts in the image is just tacky.

Doing this will improve the quality feel of the screenshot when printed out, or viewed on a resolution independent viewer (such as Safari on an iPhone, or in a PDF viewer).
April 07, 2011 18:59
On the subject of using IrfanView: if you install the IrfanView plugins, you get the option to use PNGOUT if you choose PNG as the file format.
April 07, 2011 19:09
You should absolutely turn off ClearType if you intend on resizing the image as it will just add color fringing noise that no longer serves any purpose. Either go with grey-scale or if you are scaling to 50% or less just turn it off completely - the type will look smooth anyway as a result of the bi-linear sampling.

Also with a good resampling algorithm 73% should look just fine if the image was quite large to start with.

[)amien
April 07, 2011 19:36
This is quite useful! reading these pages always gives me some insight on what other developers do. Don't think there could be a better learning path.
April 07, 2011 19:42
I like using this combination of stuff to crunch down my PNGs:
https://gist.github.com/343231#file_send_to_png.bat

Works great from the Send To menu in Windows.
April 07, 2011 20:28
Great post Scott. The more people follow these guidelines, the more pleasurable the internet is to browse. I'm guilty of .jpg abuse for sure, but I follow most if not all of these guidelines on newer "I know better, now" shots.

+1 for SnagIt and PNGOut. Quick, simple, and easy to integrate.
April 07, 2011 20:57
I think you missed the biggest tip.

DON'T TAKE SCREENSHOTS OF CODE!

Seriously, it's text. HTML is meant to display text. Put it in the blog post as text and style it appropriately. Then I can zoom, copy-paste, annotate, whatever else I want to do with the code. Screenshots should only be used when demonstrating some feature that can not be expressed as easily in text.
April 07, 2011 21:20
I've found that I actually get better compression with PNGCrush than I do with PNGOut.
April 07, 2011 21:26
Some LCD monitors have BGR rather than RGB pixel order. I actually have an old ViewSonic monitor that falls into that category. So as much as I prefer ClearType, be aware that a small percentage of your viewers may get a miserably blurry image of your text. (As for CRTs, no one uses them anymore, right? )

Ian
April 07, 2011 21:29
Davin - Within a few percent, but good to know.

Ian - I'd guess there are more IE6 users than BGR users, no?

Scott Koon - Yeppers.

Travis - Great batch utility! Thanks for pointing it out!
April 07, 2011 21:48
Great post.

I like the irfanView tool for taking screenshots. You can choose from a list of 6 options as to whether you want full screen, current monitor, client area, etc. As soon as you take the shot it appears in the viewer. To crop a piece of the image, just drag a rectangle and hit ctrl-Y.
April 07, 2011 22:37
Thanks so much for publishing this. I have seen people produce some pretty crappy (there is just no better word for it, sorry) screenshots. I am not one who loves explaining things, so therefore, I will refer them to tips above. Kudos!
April 08, 2011 0:43
Ian - I have to agree. My current Dell LCD shows the "block A" picture better than the cleartype picture.
April 08, 2011 8:27
+1 on Window Clippings, PNGOut, PNGGauntlet, and Paint.NET ... all tools I use myself :)
April 08, 2011 16:09
This is useful Scott. Thansk!
April 08, 2011 16:35
After you have done up your screenshot perfectly, Blogspot messes it up.

Is there a way to prevent blogspot from blowing up the file size 10 times and reducing clarity at the same time?
April 08, 2011 17:15
For screencasts and other training, I suggest everyone check out the samples at http://www.lynda.com. I've been using their training videos for 9 years now and every one of them is top-notch. All videos are consistent, well thought out, and all the screens are at the same resolution and uses defaults so you dont see any customization stuff.

I wish all the other online training companies would spend half as much time on the quality that we get from Lynda.com.

It's so good, I watch their videos from my iPad!
April 08, 2011 18:00
Nice I was looking for some Screenshot Tutorials and found your blog. Gone give this a try, thanks.
April 08, 2011 19:21
Reasonable advise, however your cleartype advice is misleading. It is dangerous to use cleartype in screenshots because cleartype relies on knowing which arrangement of colours in each pixel your LCD monitor has, and this might mean a cleatype image that looks good on one screen will look distorted on another.

Also to stop other windows coming through your aero title bars you can just go to personalisation and disable transparency.
April 08, 2011 21:08
Wonderful and very helpful post....generally we don't think so much while taking a screenshot or posting it in our blogs..but from now on I mean after reading your post I will remember the points while taking a screenshot....so thanks a lot for the post.
April 08, 2011 22:34
Ha, I've being using PNG without knowing it was better thanks to Windows Live Writer =p
I also use notepad as the background, but I'd never paid attention to the corners. I'll take a look at Window Clippings, thanks!
April 09, 2011 1:37
I still don't get all this OpenID thing =S
April 10, 2011 4:12
I don't have any connection to the project other than as a happy user but http://cropper.codeplex.com/ cropper does a good job of doing screen shots for a very low price (zero).

Also regarding resizing. I think Scott meant to mention this because he sort of alludes to it the 'bad example' but if you do resize then use the 'Maintain Aspect Ratio' to stop the resulting image looking strange(r).
April 10, 2011 15:27
I also find (believe it or not) that posting an image into a Word document and then resizing there can be helpful too. It may not be for everyone, but I like to have multiple options available to me when dealing with images.
April 12, 2011 4:04
That bad example callout is hilarious
April 12, 2011 19:02
- and if we could train our users to do this too, when reporting errors !
April 18, 2011 10:20
Oh, one more trick I think may be useful. You mention that one should resize things "evenly," such as to 50%. I often that 50% is usually too small to be legible. I've found that it works great if you resize to 65% and then applying a subtle sharpen. I use this for most of the screenshots I post on my own blog ( http://blog.getpaint.net/ ).

In Paint.NET, use Effects -> Photo -> Sharpen and change the 2 to a 1. For keyboard junkies using the English version, this is even faster with Alt+C, P, S, Enter, 1, Enter.
April 30, 2011 3:06
Scott,

Is it worth mentioning the size of the img tag when embedding the snapshot in the web page?

I mean for slow connection it would avoid the "jumping-around" of the visual elements and if the source of the image is not available or loading of the images is disabled by the user, the layout doesn't drastically change.

Or maybe it's not worth it today?
May 05, 2011 17:55
For screenshots, not only do I use Window Clippings, but I also use Sizer, a freeware utility by Brian Apps (awesome surname for the developer, BTW). This utility allows you to resize any window to an exact, predefined size. Great for maintaining consistency across blog posts, for example. Recommended.
August 14, 2011 20:53
Thank you so much for these best practices in making screenshots and the tools which help to do this job.

I agree that it's better to remove all irrelevant information from the screenshot, but I'd hardly switch my current theme so that the screenshot is with the default colors. Yet the colors usually affect only window decorations, not the colors in window itself.

On the other hand, when I wrote about Windows 7, I used its default theme for all the screenshots. When I wrote something regarding Windows 7 later, I didn't switch the theme: different window colors, or even basic or classic theme, are usually not so essential for the point of the post.
August 29, 2011 21:58
Great post Scott, it has some really helpful tips and utilities I can use for further improving screenshots on my blog posts. Thank you.
August 29, 2011 22:07
I use Shotty and it will actually screenshot just the window if you'd like instead of opening Notepad for a white background... thats too much work.. It handles multiple monitors perfectly... plus its free!

Plus i like how they designed the web site... it looks like a window lol...
August 30, 2011 1:26
Some very wise words!

On my 11" MBA the clear-type version is slightly better to view. Not sure I agree with you about classic & basic themes, does it really matter? Is this more about a personal pet-peeve? Remember some of us run these to improve performance - especially under virtualisation - certainly not because we miss NT4! ;)
September 07, 2011 21:56
Hey Scott! Just today I found out about a couple of (FREE!) tools that make quality screenshots much easier. Since I remember havind read your post, which helped me a lot back then, I decided to let you know about them:
- 7Capture: takes screenshots just like Windows Clippings, but is free.
- Sizer: resizes windows to predefined settings

Thanks for all the great contributions!

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.