The Least You Need to Know About Graphics

Two forces are always at odds when you post graphics and multimedia on the Internet. Your eyes and ears want everything to be as detailed and accurate as possible, but your clock and wallet want files to be as small as possible. Intricate, colorful graphics mean big file sizes, which increase the transfer time even over a fast connection. How do you maximize the quality of your presentation while minimizing file size ? To make these choices, you need to understand how color and resolution work together to create a subjective sense of quality.

The resolution of an image is the number of individual dots, or pixels (the individual dots that make up a digital image), that make up an image. Large, high-resolution images generally take longer to transfer and display than small, low-resolution images. Resolution is usually specified as the width times the height of the image, in pixels; a 300x200 image, for example, is 300 pixels wide and 200 pixels high.

You might be surprised to find that resolution isn't the most significant factor determining an image file's storage size (and transfer time). This is because images used on web pages are always stored and transferred in compressed form. Image compression is the mathematical manipulation that images are put through to squeeze out repetitive patterns. The mathematics of image compression is complex, but the basic idea is that repeating patterns or large areas of the same color can be squeezed out when the image is stored on a disk. This makes the image file much smaller and allows it to be transferred faster over the Internet. The web browser then restores the original appearance of the image when the image is displayed.

In the rest of this hour , you'll learn exactly how to create graphics with big visual impact and small file sizes. The techniques you'll use to accomplish this depend on the contents and purpose of each image. There are as many uses for web page graphics as there are web pages, but four types of graphics are by far the most common:

Photos of people, products, or places
Graphical banners and logos
Snazzy-looking buttons or icons to link between pages
Background textures or wallpaper to go behind pages

The last of these is covered in Hour 9, "Custom Backgrounds and Colors," but you can learn to create the other three kinds of graphics right now.

Preparing Photographic Images

To put photos on your web pages, you need some kind of scanner or digital camera, even if it's a digital camera that is built into your mobile phone. You'll often need to use the custom software that comes with your scanner or camera to save pictures onto your hard drive. Note, however, that you can control just about any scanner directly from Paint Shop Pro and most other graphics programssee the software documentation for details.

Did you Know?

If you don't have a scanner or digital camera, most film-developing stores can transfer photos from 35mm film to a CD-ROM for a modest fee. You can then use Paint Shop Pro to open and modify the image files directly from the CD-ROM; actually, you'll want to copy the files from the CD-ROM to your hard drive before modifying them because the CD-ROM is probably read-only.

After you have the pictures on your computer, you can use Paint Shop Pro (or another similar graphics program) to get them ready for the Web.

Cropping an Image

You want web page graphics to be as compact as possible, so you'll usually need to crop or reduce the size of your digital photos. In Paint Shop Pro, the Learning Center window on the left edge of the screen provides easy access to lots of common image-editing tasks , including image cropping. Follow these steps to crop a picture in Paint Shop Pro:

Click Adjust in the Learning Center window, followed by Crop. (The Learning Center is shown in the left in Figure 7.1.)

Figure 7.1. Use the rectangular selection tool to crop images as tightly as possible.

Click the upper-left corner of the portion of the image you want to keep, and hold down the left mouse button while you drag down to the lower-right corner.

Did you Know?

To retain the original aspect ratio while cropping an image, hold down the Shift key before clicking and dragging the mouse.

Click the Apply button (green checkmark) on the tool palette near the top of the application window.

{% if main.adsdop %}{% include 'adsenceinline.tpl' %}{% endif %}

Even after your image has been cropped, it may be larger than it needs to be for a web page. Depending on the design of a specific web page, you may want to limit large images to no more than 800x600 or maybe even 640x480 pixels or smaller. And in some cases you may want to also provide a thumbnail version of the image that links to a larger version, in which case you'll probably stick closer to 100 pixels in the larger dimension for the thumbnail.

Did you Know?

Notice that in Paint Shop Pro the resolution of the current image is shown in the lower-right corner of the window. The image may look larger or smaller than it really is because Paint Shop Pro automatically adjusts the image to fit in the window while you're working on it. (The current magnification ratio is shown above each image, in the title bar.) To see the image at the size it will appear on a web page, select View, Zoom to 100% on the main menu.

Resizing an Image

To change an image's resolution, and therefore its apparent size, use the Image, Resize command. You can also select Adjust again in the Learning Center window, followed by Resize. You'll get the Resize dialog box shown in Figure 7.2.

Figure 7.2. To change the size of an image, select Image, Resize to get this dialog box.

You'll almost always want Resample Using: Smart Size, Lock Aspect Ratio, and Resize All Layers selected (near the bottom of the dialog box). If you opt to maintain the aspect ratio, when you enter the width you'd like the image to be, the height will be calculated automatically to keep the image from squishing out of shape. It also works the same way if you specify the height and allow Paint Shop Pro to alter the width automatically. Also notice that I opted to change the image size based on pixel dimensions as opposed to percentages because I wanted the size of the resulting image to be close to 640x480.

Tweaking Image Colors

Many photographs will require some color correction to look their best on a computer screen. Like most photo-editing programs, Paint Shop Pro offers many options for adjusting an image's brightness, contrast, and color balance.

Most of these options are pretty intuitive, but the most important and powerful one is surprisingly the easiest one to use. Select Adjust, One Step Photo Fix from the main menu, or click One-Step Photo Fix in the Adjust section of the Learning Center. The brightness, contrast, and colors of the image are automatically adjusted, and in many cases the automatic results will work just fine.

Another option is to take a bit more control of the image correction process, which you do by selecting Adjust, Smart Photo Fix (also available in the Adjust section of the Learning Center). As shown in Figure 7.3, you can move the various sliders in the Smart Photo FixSmarS dialog box to adjust the brightness, saturation, and focus (sharpness) until the image looks about right; the default values are often sufficient, which you can restore by clicking the Suggest Settings button.

Figure 7.3. The Smart Photo Fix feature gives you an opportunity to fine-tune the photo-correction process based on suggested fixes.

Most of the other image-editing tools in Paint Shop Pro offer small preview windows like the one shown in Figure 7.3, so a little playful experimentation is the best way to find out what each of them does.

Controlling JPEG Compression

Photographic images look best when saved in the JPEG file format. When you're finished adjusting the size and appearance of your photo, select File, Save As and choose the JPG JPEG file type with Standard Encoding.

Figure 7.4 shows the Save Options dialog box you'll see when you click the Options button. You can control the compression ratio for saving JPEG files by adjusting the Compression Factor setting between 1% (high quality, large file size) and 99% (low quality, small file size).

Figure 7.4. Paint Shop Pro allows you to trade reduced file size for image quality when saving JPEG images.

You may want to experiment a bit to see how various JPEG compression levels affect the quality of your images, but 25% compression is generally a good compromise between speed and quality for most photographic images.

Buy on amazon.com >>

Oliver D., Morrison M

<< Previous page

Table of contents

Next page >>