Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
    • Choosing Graphics Software
    • Graphics Basics
    • Preparing Photographic Images
    • Controlling JPEG Compression
    • Creating Banners and Buttons
    • Reducing the Number of Colors
    • Interlaced GIFs and Progressive JPEGs
    • Summary
    • Q&A
    • Workshop
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Preparing Photographic Images

To put photos on your Web pages, you need some kind of scanner or digital camera. You'll often need to use the custom software that comes with your scanner or camera to save pictures on your hard drive. Note, however, that you can control any scanner that is compatible with the TWAIN interface standard directly from Paint Shop Pro and most other graphics programs—see the software documentation for details.

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

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. Follow these steps to crop a picture in Paint Shop Pro:

1. Click the rectangular selection tool on the tools palette. (The tools palette is shown on the left in Figure 9.1. You can drag it wherever you want it, so it may be in a different place on your screen.)
   

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

2. Click the top-left corner of the part of the image you want to keep, and hold down the left mouse button while you drag down to the lower-right corner.
3. Select Image, Crop to Selection (see Figure 9.1).

Even after cropping, your image may be larger than it needs to be for a Web page. Generally, a complex photograph should be no more than 300x300 pixels, and a simpler photo can look fine at 100x50 or so.

To change an image's resolution, and therefore its apparent size, use the Image, Resize command. (Notice that in some software, including earlier versions of Paint Shop Pro, this option is called Resample.) You'll get the Resize dialog box shown in Figure 9.2.

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

You'll almost always want Smart Size, Resize All Layers, and Maintain Aspect Ratio Of selected. When you enter in pixels or a percentage of the original the width you'd like the image to be, the height will be calculated automatically to keep the image from squishing out of shape.

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 may be unfamiliar if you're not an old graphics pro. Whenever an image appears too dark or too light, select Colors, Adjust, Gamma Correction. For most images, this works better than Colors, Adjust, Brightness/Contrast, because it doesn't wash out bright or dark areas.

As shown in Figure 9.3, you can move the sliders in the Gamma Correction dialog box to adjust the correction factor until the image looks about right. (Numbers above 1 make the image lighter, and numbers between 1 and 0 make the image darker.) If the color in the image seems a little off, try deselecting the Link check box, which allows you to move the Red, Green, and Blue sliders separately and to adjust the color balance.

Figure 9.3 Gamma correction is the best way to fix images that are too dark or too light.

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

Share This