Here are five simple things you can do to make your screen shots look better on-screen. Use these tips when you need to make screen shots for the Web or other types of on-screen presentations.
1.
Save Application Windows as GIF format. Screen shots almost always compress better and look better as GIFs.
There is rarely a reason to save screen shots of application windows as JPEG
files. The only exception is when the image contains continuous tone areas such
as a photo or texture. Don't believe me? Just take a look at these examples:
This example was reduced to 16 colors and saved as a GIF resulting in a
file size of 3,177 bytes.
This example was saved as a JPEG with zero quality and resulted in a file
size of 5,678 bytes. Even using 100% compression, the file size is
still larger than the GIF example, but just look at it... Yuck!
2.
Avoid reducing the pixel dimensions. If possible, avoid reducing the size of your screen shots, particularly
if they've already been saved to a paletted format like GIF. If your image is
already in GIF format, convert the mode to RGB before resizing. Reducing
the size of a screen shot also creates additional colors in the image which
usually results in a larger GIF file. Usually you can get a smaller file size
by using the full size image and reducing the color depth instead of the dimensions.
Cropping out unnecessary elements also helps, especially if they add more colors
to the image.
The original
actual-size screen shot is a 64-color GIF with a file size of 7,613
bytes.
Now take
a look at the two examples of resizing the image to 50%, both with and
without changing the color mode....
This
example was reduced to 50% without converting the color mode to RGB. Since
the image consists of a limited color palette, and because pixels are being
thrown out by reducing, the resized image is not readable at all. This image
is 2,567 bytes.
This
example was reduced to 50% after converting the color mode to RGB. It's
a bit better than the example above, but take a look at the file size...
it shot way up to 11,205 bytes. The resampling also caused the colors
to increase to 256. It's still not very readable, so in this instance resizing
was not even worth the effort.
3.
Avoid interpolation when increasing pixel dimensions. When
increasing the size of the screen shot, in most cases you should not use a resampling
method that results in blending pixels or anti-aliased
edges. Both Bilinear
and Bicubic methods in Photoshop blend pixels, which results in blurry screen
shots that don't compress well. Instead, you should choose Nearest
Neighbor in the resampling menu of the image size dialog to resize without
blending.
Original image
8 colors, 263 bytes.
Resized to 200% using "nearest neighbor" setting.
8 colors, 569 bytes.
Resized to 200% using "bicubic" setting... yuck! 256 colors, 3,238 bytes.
4.
Disable color gradients in Windows title bars. On
Windows systems, the default appearance for title bars includes a gradient color
transition. This increases the number of colors in the image and significantly
increases the file size. When producing screen shots for the Web, be sure to
change the title bar appearance to a solid color, or crop the title bar out
of the image. You can change the appearance by right clicking the desktop and
choosing properties, then going to the Appearance tab. In Windows XP, you can simplify the window appearance by using the "Windows Classic style" rather than the XP style themes.
With gradient: 16-color
GIF, 2,633 bytes
Without gradient:
16-color GIF, 1,562 bytes... which one looks better?
5.
Cursor Tricks
If you want to include a cursor in your screen shot, but you forgot to include
the cursor in your capture, you can save an image of a cursor with a transparent
background and drop it into your screen capture anytime you need one. Better
yet, download these cursors
I've already created for you in transparent PSD and PNG formats.
The saved cursor
is also useful for creating animated screen shots. By changing the location
of the cursor and assembling a series of screen shots into an animated GIF,
you can demonstrate movement. Don't overdo it, though, animated
GIFs can become quite large.
| 