Preparing Photographic Images | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

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.

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.