InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Creating Banners and Buttons

Graphics that you create from scratch, such as banners and buttons, involve considerations different than photographs.

The first decision you need to make when you produce a banner or button is how big it should be. Almost everyone accessing the Web now (or in the foreseeable future) has a computer with one of three screen sizes. The most common resolution for palm-sized computers and televisions is 640x480 pixels. The resolution of most laptop computers today is 800x600 pixels, and 1,024x768 pixels is the preferred resolution of most new desktop computers and future laptops. You should generally plan your graphics so that they will always fit in the smallest of these screens, with room to spare for scrollbars and margins.

This means that full-sized banners and title graphics should be no more than 600 pixels wide. Photos and large artwork should be from 100 to 300 pixels in each dimension, and smaller buttons and icons should be 20 to 100 pixels tall and wide.

Figure 9.5 shows the dialog box you get when you select File, New to start a new image. You should always begin with 16.7 million colors (24-bit) as the image type. You can always change its size later with Image, Crop or Image, Enlarge Canvas; don't worry if you aren't sure exactly how big it needs to be.

Figure 9.5 You need to decide on the approximate size of an image before you start working on it.

For the background color, you should usually choose white to match the background that most Web browsers use for Web pages. (You'll see how to change a page's background color in Hour 11.) When you know you'll be making a page with a background other than white, you can choose a different background color, as shown in Figure 9.5.

When you enter the width and height of the image in pixels and click OK, you are faced with a blank canvas—an intimidating sight if you're as art-phobic as most of us! Fortunately, computer graphics programs such as Paint Shop Pro make it amazingly easy to produce professional-looking graphics for most Web page applications.

Often, you will want to incorporate some fancy lettering into your Web page graphics. For example, you might want to put a title banner at the top of your page that uses a decorative font with a drop-shadow or other special effects. To accomplish this in Paint Shop Pro, perform the following steps:

Choose the color you want the lettering to be from the color palette on the right edge of the Paint Shop Pro window. (Press the letter C to make the color palette appear if you don't see it.)
Click the A tool on the toolbar, and then click anywhere on the image. The Add Text dialog box shown in Figure 9.6 appears.

Figure 9.6 Use Paint Shop Pro's text tool to create elegant lettering in a graphics image.
Choose a font and point size for the lettering, and make sure Floating and Antialias are selected under Create As. (This smoothes the edges of the text.) Click OK.
Click anywhere in the image, and then grab and drag the text with the mouse to position it where you want it (usually in the center of the image).

When you first put the text onto the image, it shimmers with a moving dotted outline. This means that it is selected and that any special effects you choose from the menu will apply to the shape of the letters you just made. For example, you might select Image, Effects, Chisel to add a chiseled outline around the text. Figure 9.7 shows the dialog box that would appear.

Figure 9.7 Like most menu choices in Paint Shop Pro, the Image, Effects, Chisel command gives you an easy-to-use preview.

Notice that you can adjust the chisel effect and see the results in a small preview window before you actually apply them to the image. This makes it very easy to learn what various effects do simply by experimenting with them. Using only the text tool and the four choices on the Image, Effects submenu (Buttonize, Chisel, Cutout, and Drop Shadow), you can create quite a variety of useful and attractive Web graphics.

You may also want to deform, blur, sharpen, or otherwise play around with your text after you've applied an effect to it. To do so, simply select Image, Deformations, Deformation Browser (to warp the shape of the letters) or Image, Filter Browser (to apply an image-processing filter). You get a dialog box like the one shown in Figure 9.8, which lets you pick from a list of effects and preview each one.

Figure 9.8 Select Image, Filter Browser to play with all the image-processing filters available, and then choose the one you want.

In Figure 9.8, I chose the Edge Enhance filter from the Filter Browser, which adds a sparkly effect to the chiseled lettering. You can have a lot of fun playing around with all the different options in the filter and deformation browsers!

Reducing the Number of Colors | Next Section

Previous Section