As web designers one of the many functions we simply could not live without is the ability to capture the contents of our screen as a static image. It is useful to capture logos, work on design mock-ups, show clients work that still needs coding, or send images that display problems that need fixing. It’s a very simple task to complete but I’m always surprised by the number of time’s I have to explain to my non-techie friends how to do it.

In the old days (think 2004), capturing a screen could be a clunky and troublesome task that required pressing the ‘prt scr’ button to copy the screen to the system clip board, opening a graphics program, creating a new document of the right dimensions, pasting in your screen capture and saving it in your desired image format. Thankfully things are much easier now, with a host of tools available for achieving this task.

Snipping Tool – Windows Vista & Windows 7

Windows Vista & Windows 7 have a built in Screen Capture tool called Snipping Tool that can be found under
Start Menu >> Programs >> Accessories >> Snipping tool.

If you open this program you will be presented with a simple dialogue box with a dropdown menu to select the type of capture you want.

• Free-form snip enables you to draw a custom shape around the area you want to capture
• Rectangular lets you draw a box around the area you want to capture
• Window snip lets you capture just the contents of an open window (though it doesn’t scroll)
• Full-screen snip lets you capture the full screen (though not dual monitors)

After this your image will open in a new window where you can highlight areas and add notes then save the image as your desired image type (png or jpg is best).

Windows XP (also works in Vista and 7)

Windows XP is lacking a decent built in Screen capture tool but luckily there are a host of free (and pay) tools for Screen Capture. The one I prefer is a simple but powerful tool called ‘Prt Scr’. Not only is it great to use but its free, has an awesome logo and a funky animation when you save an image. Prt Scr can be downloaded from here.

Once installed Prt Scr uses the default windows ‘Prt Scr’ key to activate. You will be presented with a blue overlay on your screen. You can then either press enter to capture the full screen, you can draw a custom shape with your mouse to capture, or hold down ctrl and drag to capture a rectangle.

You will then be presented with a floating animation of your image and a dialogue to choose how to save your image. If you want to highlight parts of your image you can click edit and Prt Scr will open the image in ms paint for basic editing.

Mac OSX

In true apple fashion, capturing a screen shot on a mac is as easy as pressing the right key combinations.

• Command + Shift + 3 captures the entire desktop screen.
• Command +Shift + 4 presents you with a cross cursor that you can click and drag to capture a rectangle selection. When you release the mouse the selected area will be saved as an image on your desktop.
• Command + Shift + 4 Captures a specific application window. Press the spacebar to change the cursor to a camera and then click on an open window to save the window’s contents as an image on your desktop.

Firefox

If you’re not a firefox user (you should be), you may not be aware of firefox’s extensibility and the ability to add applications or add-ons to Firefox to do all sorts of things including screen capture.

Screengrab is an add-on that gives you the ability to capture the contents of your firefox window, either as a selected rectangle, the visible portion or the entire page (including scrolling). To install screengrab visit the screengrab homepage in firefox and hit the big green button that says ‘Add to Firefox’. Once installed firefox will need to restart and a small icon will have appeared in the bottom right of your firefox window. Click this and choose the type of screen capture you want to take.

Still want more?

Lifehacker has put together a great post on the 5 best screen capture tools as voted by their tech-savvy (read computer geek) readers.

Liked this Post? Share it with your friends!

Or read some more from the Client Information Series!

• Writing effective content for your site.
• The importance of relational tree diagrams in planning your website
• What is a content management system or CMS?
• Designing for different screen resolutions
• All about browsers (and why we hate Internet Explorer)
• What is Search Engine Optimisation or SEO and why is it important?
• An introduction to HTML and CSS snd other coding languages.
• How to take a screen capture.