Shooting
the Screen

by Rick M. Tew

• Picture this: If you want someone to understand what you're talking about, show them a picture.
• How? It can be simple.
• Size does matter: You have to find a compromise between screen quality and loading time. To focus your reader, you cancrop your screen shots or resample (resize) them.
• Cursor capture option: If the cursor is a key part of understanding your graphic, choose a program or technique that allows you to use a cursor.
• Speed vs. quality: Choose the features and the formats that will give you a balance.
• Screen capture programs: What to look for when choosing a program to capture screen shots. Some programs are free, while others are under $50.

Picture this

I often give seminars on memory and learning. During these lectures, I touch upon one of the most important factors for mental recall and understanding. I call it "Mind Language."

or HOUSE? Mind Language is how the mind best assimilates and communicates in recall. Let us understand that the mind thinks in pictures, thus Mind Language is the creation of visualized mental images designed to help us better associate and give meaning to the information we learn. When we want to communicate best with our minds, we use pictures. Just look at the development of computers. What used to be mostly text-based is now based on pictures. We went from typing in "delete" to dragging the file and dropping it into a trash can.

So, what does all of this mean? Well, it means that if you want people to understand (or have a better understanding) of what you are talking about--show them a picture. For us (those of us teaching or sharing on the Internet), this means taking or capturing screen shots.

A screen shot is simply a snapshot of your computer screen. Then, you can edit the image and create a fast way to communicate effectively.

How?

If you don't have any special screen capture software, the easiest way is to use your Windows capture feature;

• Press the Print Screen key.
• Open Windows Paint (under Start/ Programs/ Accessories and choose Edit/Paste. Paint may ask if you want the bitmap enlarged. If so, answer "yes." The screen shot will appear.
• Tip: If you only want to save the current window (such as a dialog box), press ALT Print Screen.
• Save it. For most screen shots, choosing "GIF" format is best. If the screen shot has a lot of colors or photos, choose JPG. If these options don't appear in your version of Paint, then you won't be able to use it for screen shots. Paint is always able to save in BMP format, but it can't always save to Web formats. Saving it in BMP format will create gigantic files that take forever to load, and many Web browsers won't be able to display them anyway!
• Tip: Word can save your screen shots and BMP files as GIF and JPG files. If you paste your screen shot into Word (or choose Insert/Picture/File using any BMP file), then save the file as an HTML file, Word will convert your graphic into GIF or JPG (it's actually pretty smart about choosing the best format) and place it in a folder with the same name as the file you saved. This is invaluable if you have no other way to save to these Web formats.

If you're going to be taking screen shots more than once in a blue moon, I recommend you check out the various capture programs (both free and commercial) that specialize in this. They make the job faster and easier—and give you more control over your shots.

Size does matter

How big should your screen shots be? Big enough so people can see what they need to see—yet not so big that they take too long to load.

And also—not so big that they make it difficult to build your page. For example, if the body text on your Web page is always 400 pixels wide, you want to keep your screen shots less than 400 pixels wide—otherwise they'd make your text wider (which will make it harder to read).

If your screen shot is larger than you need, you can either crop (trim) it, or "resample" (resize) it.

Cropping

You don't want your site visitors to have to play "Where's Waldo?" with your screen shots. Clarity is key, and if you want people to understand what you are talking about—you need to focus (or draw focus) on exactly what you are talking about. The way to do this is to crop your image so it shows only what's important.

For example: Let's say I wanted you to click the Color button from the NetObjects Text Properties palette, the one shown below.

Well, I could either show you the entire palette as seen to the right, or I could show a close up of which button to click as seen below.

Showing the whole palette is not necessary if your viewer already knows what you are talking about. So, show them something smaller.

Sometimes, just showing the button is not enough. It may even make it harder to see what you are talking about, in which case, you should capture a bit more in your image so it is easier to locate.

The example above shows that the button is for changing the Background color.

The above concept of focus and cropping applies to all of your screen shots. Many Web sites show full pages when in fact they should either be cropped or resampled to a smaller size. If it is important to offer your viewers the option of seeing a high quality image, simply create a link from the smaller image that would open up a new window showing the large image. See below for an example.

Resampling to resize

There are two basic ways to change the size of your images. When you resize, your graphics program just removes pixels, and the results can look ragged, as you can see in the reduced screen shot of the efuse home page.

When you resample, your graphics program interpolates the image to smooth out rough spots by estimating how the "missing" pixels should appear, and filling them with the appropriate color. See how much smoother the resamples image looks?

Most programs require that your screen shot be 16-bit or higher before it will let you resample. So if you've taken a screen shot with only 256 colors, use your graphics program to increase the number of colors (color depth). Then resample to the size you want.

"Resolution" is a confusing term when it comes to the Web. People will tell you that monitors are either 72 dpi (for the Mac) or 96 dpi (for Windows), but in reality, there are various resolutions, and what really matters is how big the image appears, which means, how many pixels wide and tall it is. So look at the number of pixels, rather than the resolution.

When resizing (scaling or resampling) your image, make sure you resize in equal measurements. If you don't keep the width and height proportional, you may end up with an odd-looking image.

Tip:  If your text looks jagged in your resampled screenshot, try applying a "soften" filter before you resample. The screen will look a little blurry, but after you resample it will be clearer--and smoother.

Tip: Screens with "dithered" images or backgrounds will take on a checkerboard effect  when you resize or resample. The way to avoid that is to use the "soften" filter, then resample the image, then use the sharpen filter. The final image may be a little less sharp, but it will actually look better because it's smoother.

Cursor capture option

Because of the way graphic interfaces work, your cursor usually isn't captured in an image. Pressing the Print Screen key will not capture your cursor. But all commercial programs that do captures do have some kind of option to capture the cursor.

But there's a trick—screen capture programs can't really see the cursor, either. So what they must do is add their own special cursor, and because cursors change shape, if you want a special cursor, you need to tell the program what cursor to capture. Each program has its own way to do this.

Not all screen capture programs allow you to capture the cursor. So, if your program doesn't, or you're using the Print Screen key, simply copy and paste one of these arrow graphics when you need a cursor. These images are transparent so you can drop them onto any shot.

These cursors also come in handy if you do a lot of "user defined" capturing (when your screen shot program lets you choose which part of the screen to shoot, by "drawing" a box around it--when you use that method, you are unable to capture the cursor.

Speed vs. quality

Some Web sites are so focused on fast-loading images that they have very compressed graphics that look bad. On the other end of the spectrum, there are Web sites that focus so much on the look of their images that the file sizes are huge. The key is to find even ground for file size and image quality. Most people will not have the patience to wait for large files to load into their browser, and, at the same time, they don't want to be looking at bad graphics. Give them the best of both worlds.

Image loading speed

The bigger your screen shot, the longer it takes for your site visitor to view. So you want the file size to be as small as it can be—and still look good.

There are two things you can do to decrease the file size: 1) crop  or 2) change your file format.

What file format?

There are two basic formats on the Web: JPG and GIF.

• If the screen shot has many colors (or photos), it will probably be smaller in JPG.
• If it has a few colors (such as eFuse.com), then it will probably be smaller (and look better) in GIF.

If you're not sure which format would be better, take a few extra seconds to save it in both formats. Then you can see which one has the best balance between size and quality.

No BMP: Whatever you do, don't ever save to BMP format if you want to use the image on the Web (or even send it in an e-mail). It won't work on the Web, and it will be huge in your e-mail and take ages to send and receive.

For some more great information on the basics of graphics, click here.

Screen capture programs

If you want more control and better results, there are a number of programs specifically designed to create and edit screen shots.

Photo-Paint, PhotoImpact, and PaintShop Pro are the most popular choices that include screen capture features. [Editor's note: I use PaintShopPro. I find it the easiest way both to capture images and do any necessary editing once I've captured them.]

What to look for

When looking for a screen capture program, consider the following:

• Selective capture: You must be able to capture a whole screen, just a window, or a "user defined" area (just the part of the screen you want). Some programs automatically allow you to capture "areas" such as menu bars, button bars, or dialogs. This is helpful because you just mouse the areas and the program recognizes them and crops so it only includes them.
• Hotkeys: You need to be able to specify a key combination that will start the screen capture. This needs to be flexible so the keys you choose don't compete with your program's keyboard shortcuts.
• Capture delay: This gives you time to pull down a menu or get things just the way you want before the software "takes a shot."
• Resampling: This makes your images look better if you need to resize them.
• Cursor Capture: Most capture programs do this, but some do it better than others, allowing you to actually "look inside" the program to find its custom cursors.
• Automatic Numbering: Some programs will automatically number your screen shots. This saves time when you have a lot to take and don't want to give each a filename.

Shooting for free

Capture Express 2000: (Win 95/98/NT) is a Windows screen capture utility. It brings unprecedented ease and functionality to the capturing of areas by allowing you to both stretch and move the area grabber. It also sports virtually unlimited shape captures (diamonds, stars, polygons, etc.) with optional borders and shape masking. Save, Print, and E-Mail captured images.

WinGrab 1.2a - This program captures screen images (selected window or full screen) and stores them as JPG or TIF (Tagged Image File format—this is a format that's popular for desktop publishing, but can't be used on the web. So if you do save it to TIF, you'll have to convert it to GIF or JPG to use it on a web site).

ScreenShooter 1.0 - Creating screen shots has never been this easy! Just point and shoot. No matter what your need for a screen capture, ScreenShooter is the utility for the job. ScreenShooter hides out in the system tray so you can capture the whole screen! A 10-second delay allows ample time to prepare your screen shot.

AnalogX -
AnalogX Capture is a quick, small, and simple screen capture utility for Windows that allows you to capture either the full screen or just the active application, and it can store the capture to either a file or to the clipboard for immediate use. Filenames are automatically generated, so you are limited only by your imagination and hard drive space. Unobtrusive, it sits happily on your taskbar until used.

20/20 2.1 - 20/20 is an image viewer, capture, and annotation application. It is also capable of creating slide shows and generating thumbnails.

Programs Under $50

(Prices are subject to change—hey, that's just the way the web is!)

GrabaScreen 2.0 - $9.95 - GrabaScreen is a system tray utility that allows you to effortlessly grab images of your desktop, active window, or selected area. You can GrabaScreen to the clipboard, file, printer, even as wallpaper! Perfect for saving and using images from the Internet!

ScreenTaker 2.11 - $10 - ScreenTaker is a simple and configurable tool for getting snapshots of your desktop and windows on your desktop. It can be configured to take a snapshot of the entire screen, the top window, the client area of the top window (top window without frame and title bar), an arbitrary rectangle, or a rectangle with a predefined size. You can choose to save images in BMP, JPG, PCX, TGA, or TIF format.

Windows Scanner 1.0 - $17 - Windows Scanner paint program for Windows 95/98/NT is a beautiful paint program for creating quality pictures. With this program, you can save anything on your PC screen, anything at all, and paint your image with professional tools.

WinCopy - $18 - WinCopy is an easy-to-use Windows screen capture program that creates BMP, GIF, TIFF, JPG, etc., files. Various print options.

HardCopy Pro 1.51 - $19 - HardCopy Pro is a professional, easy-to-use screen capture utility. It can capture rectangular screen areas and whole windows, and manipulate, save, print, and copy the captured images. This versatile tool is ideal for developers and graphic designers.

HyperSnap-DX - $25 - This program gives "hotkey" a good name. HyperSnap is a high-quality screen capture utility. With its easy-to-use design and powerful features, this program is for both professional and occasional users. HyperSnap-DX 3.1 comes in Basic or Pro. Oddly enough, the Pro version doesn't cost a cent more than the basic version. If you want a small size and basic features, download the Basic version. If you need extra features and don't mind the added file size, download the Pro version.

InBless PandaShop - $26 - InBless PandaShop is an easy-to-use and professional screen capture utility. With this new version, you can press ''Print Screen'' or click on the tray icon to capture screens.

SnagIt - $39.95 - SnagIt captures anything on the Windows desktop quickly and easily. From one-step capture of scrolling Web pages to video capture and text conversion, SnagIt does it all.

CaptureEze Pro 7.0 - $39.95 - The professional screen capture utility that allows superior processing of all your graphic images.

About the author

Rick Tew is the founder of Tew Ryu the Martial Science. His programs focus on three areas of human development: Mind—personal development seminars; Body—physical energy through martial arts; and Spirit—team travel and adventure.