Chapter
10
Chapter 10
Creating Web Page Images
You don't have to be an artist to put high-impact
graphics and creative type on your Web pages. You don't need to spend hundreds or
thousands of dollars on software, either. This chapter tells you how to create the images
you need to make visually exciting Web pages. It also explains how to make those images
appear as quickly as possible, even for people using slow modems to access them. (Chapter
11, "Making Pages Display Quickly," presents more techniques for speeding up the
display of your graphics, too.)
Time Saver: One of the best ways to save time
creating the graphics and media files is, of course, to avoid creating them altogether.
Any graphic or media clip you see on any site is instantly reusable as soon as the
copyright holder grants (or sells) you the right to copy it. Grabbing a graphic from any
Web page is as simple as clicking it with the right mouse button, and picking Save Image
As in Netscape Navigator or Save Picture As in Microsoft Explorer. Extracting a background
image from a page is just as easy: Right-click the background and choose Save Background
As.
Choosing
Graphics Software
You can use almost any computer graphics program to
create graphics images for your Web pages, from the simple Paintbrush program that comes
free with Microsoft Windows to an expensive professional program such as Adobe Photoshop.
If you have a digital camera or scanner attached to your computer, it probably came with
some graphics software capable of creating Web page graphics.
If you already have some software that you think
might be good for creating Web graphics, try using it to do everything described in this
chapter. If it can't do some of the tasks covered here, it probably won't be a good tool
for Web graphics. To Do: One excellent and inexpensive program that does provide
everything you're likely to need is Paint Shop Pro from JASC, Inc. If you are using a
Windows computer, I highly recommend that you download a free, fully functional evaluation
copy of Paint Shop Pro before reading the rest of this chapter.
(Macintosh users should download BME at http://www.softlogik.com instead, because
Paint Shop Pro is currently available for Windows only.)
- 1. Start your Web browser, and go to http://www.jasc.com/pspdl.asp.
2. Follow the directions to transfer the latest version of Paint Shop Pro onto your
hard drive. (As of this writing, the file you need is called psp41.zip.)
3. You will need a program capable of handling Zip archives in order to install Paint
Shop Pro. If you don't have such a program, go to http://www.winzip.com
and follow the instructions there to download and install WinZip.
4. Use WinZip (or an equivalent program) to remove the Paint Shop Pro installation
programs from the Zip file, and put them in a directory folder of their own.
5. Run the pspsetup.exe program to install Paint Shop Pro.
Just A Minute: The Paint Shop Pro software
you can get online is a fully functional shareware evaluation copy. If you agree with me
that it's essential for working with Web page images, please be prompt about sending the
$69 registration fee to the program's creators at JASC Software. (The address is in the
online help in the software.) I'm confident that you're not going to find any other
graphics software even close to the power and usability of Paint Shop Pro for anywhere
near $69. (In fact, I have all the leading super-expensive commercial graphics programs
from Photoshop on down, and Paint Shop Pro is the best by far for day-to-day work with Web
graphics.)
Almost all the graphics you'll see in this guide were
created with Paint Shop Pro, and this chapter uses Paint Shop Pro to illustrate several
key Web graphics techniques you'll need to know. Of course, there are so many ways to
produce images with Paint Shop Pro, I can't even begin to explain them all. If you'd like
a quick but complete tutorial on using Paint Shop Pro to make high-impact Web page
graphics, pick up a copy of the Que Publishing guide Creating Your Own Web Page Graphics,
by Andy Shafran and Dick Oliver (yep, that's me).
Graphics
Basics
Two forces are always at odds when you post graphics
and multimedia on the Net. 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 can take a long time to transfer,
even over a fast connection.
So 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 height and width
measured in pixels (the individual dots that make up a digital image). Large,
high-resolution images take longer to transfer and display than small, low-resolution
images. Resolution is usually written as the width times the height; a 300x200 image, for
example, is 300 dots wide and 200 dots high.
New Term: Resolution is the number of
individual dots, or pixels, that make up an image.
You might be surprised to find that resolution isn't
the most significant factor determining the storage size (and transfer time) of an image
file. This is because images used on Web pages are always stored and transferred in
compressed form. 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 original appearance of the image can then be
restored by the Web browser program when the image is displayed.
New Term: Image compression is the
mathematical manipulation that images are put through to squeeze out repetitive patterns.
It makes them load and display much faster.
In the rest of this chapter, 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 for the tops of pages
- Snazzy-looking buttons or icons to link between pages
- Background textures or paper to go behind pages
The last of these will be covered in Chapter 13,
"Backgrounds and Color Control." 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'll 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.
Time Saver: If you don't have a scanner or
digital camera, any Kodak film-developing store 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 Kodak
Photo CD files.
Once you have the pictures, you can use Paint Shop
Pro (or a 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 scanned images. Follow
these steps to crop an image in Paint Shop Pro:
- 1. Click on the rectangular selection tool on
the tools palette. (The tools palette is shown on the left in Figure 10.1. You can drag it
wherever you want it, so it may be in a different place on your screen.)
2. Click on the top-left corner of the part of the image you want to keep, and hold
down the mouse button while you drag down to the lower-right corner (see Figure 10.1).
3. Select Image | Crop.
Figure 10.1. Use the rectangular selection tool to
crop images as tightly as possible.
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.
Time Saver: Notice that in Paint Shop Pro the
resolution of the current image is shown at the bottom-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. To see the image at the
size it will appear on a Web page, select View | Normal Viewing (1:1).
Most graphics programs offer two different ways to
change the resolution of an image, and one technique gives much nicer-looking results than
the other. The names of these techniques vary from program to program, but in Paint Shop
Pro you should always use the Image | Resample command (instead of Image | Resize). You'll
get the Resample dialog box, shown in Figure 10.2.
You'll almost always want Custom size and Maintain
aspect ratio selected. When you enter the width (in pixels) which you'd like the image to
be, the height will be calculated automatically to keep the image from squishing out of
shape.
Figure 10.2. To change the size of a photographic
image, always use Image | Resample.
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 the brightness, contrast, and color balance of an image.
Most of these options are pretty intuitive to use,
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 and
Contrast, because it doesn't "wash out" bright or dark areas.
As shown in Figure 10.3, you can click on the small
arrow buttons 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.)
Figure 10.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 10.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-JFIF Compliant file type with Standard Encoding, as
shown in the bottom half of Figure 10.4.
Figure 10.4 also shows the File Preferences 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 level setting between 1 percent (high
quality, large file size) and 99 percent (low quality, small file size).
In Chapter 11 you'll see how various JPEG
compression levels affect the quality of typical images.
Figure 10.4. Paint Shop Pro allows you to trade
reduced file size for image quality when saving JPEG images.
Creating
Banners and Buttons
Graphics that you create from scratch, such as
banners and buttons, involve different considerations 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 noteguide computers and televisions is 640x480 pixels. The resolution of
most desktop computers today is 800x600 pixels, and 1024x768 pixels is the preferred
resolution of most new 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 or icons should be 20 to 100
pixels tall and wide.
Figure 10.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 the size of the image later with Image |
Crop or Image | Enlarge Canvas, so don't worry if you aren't sure exactly how big it needs
to be.
For the Background color, choose White to match the
background that most Web browsers ordinarily use for Web pages. (You'll see how to change
the background color of a page in Chapter 13. When you know you'll be making a page with a
non-white background, you can choose a different background color here, too.)
Figure 10.5. You need to know the approximate size
of an image before you start working on it.
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.
To make the title banner and buttons in Figure 10.6,
for instance, all I did was pick colors from the color palette on the right, click on the
text tool on the left, choose a font and size, and position each word where I thought it
looked nice. I used the Image | Special Effects | Buttonize menu option to automatically
add three-dimensional shading to the edges of the buttons. Other sophisticated effects
like drop shadows, sunburst gradient fills, and textured papers are equally effortless.
Figure 10.6. Many sharp-looking Web page images can
be created with minimal artistic skill or computer graphics experience.
Reducing the
Number of Colors
One of the most effective ways to reduce the
download time for an image is to reduce the number of colors. This can drastically reduce
the visual quality of photographic images, but works great for most banners, buttons, and
other icons.
In Paint Shop Pro, you can do this by selecting
Colors | Reduce Color Depth. (Most other graphics programs have a similar option.) The
software will automatically find the best palette of 16 or 256 colors for approximating
the full range of colors in the image.
Just A Minute: Even if you use only two or
three colors in an image, you should still select Colors | Reduce Color Depth | 16 Colors
before you save it. If you don't, the image file will waste some space leaving room for
lots of colors even though very few are actually in use.
When you reduce the number of colors in an image,
you will see a dialog box with several choices (see Figure 10.7). For Web page images, you
will almost always want to choose an Optimized palette, and Nearest color instead of Error
diffusion or any form of dithering.
Figure 10.7. Reducing the number of colors in an
image can dramatically decrease file size without changing the appearance of the image
much.
Time Saver: Dithering (called error diffusion
in Paint Shop Pro) means using random dots or patterns to intermix palette colors. This
can make images look better in some cases, but usually should be avoided for Web page
graphics. Why? Because it substantially increases the information complexity of an image,
and that almost always results in much larger file sizes and slower downloads. So, listen
to your Great Uncle Oliver and "don't dither!"
There is a special file format for images with a
limited number of colors, called the Graphics Interchange Format (GIF). To save a GIF
image in Paint Shop Pro, select File | Save As and choose GIF-CompuServe as the image
type.
Interlaced
GIFs and Progressive JPEGs
Both the GIF and JPEG image file formats offer a
nifty feature to make images appear faster than they possibly could otherwise. An image
can be stored in such a way that a "rough draft" of the image appears quickly,
and then the details are filled in as the download finishes. This has a profound
psychological effect, because it gives people something "complete" to look at,
instead of drumming their fingers waiting for a large image to pour slowly onto the
screen.
A file stored with this feature is called an
interlaced GIF or progressive JPEG. Despite the two different names, the visual results
are similar with either format.
New Term: An interlaced GIF file is an image
that will appear blocky at first, then more and more detailed as it finishes downloading.
Similarly, a progressive JPEG file appears blurry at first, then gradually comes into
focus.
Most graphics programs that can handle GIF files
enable you to choose whether to save them interlaced or noninterlaced. In Paint Shop Pro,
for example, you can choose the Version 89a-Interlaced Sub type on the Save As dialog box,
just before you save a GIF file (see Figure 10.8).
To save a progressive JPEG file, choose the
JPG-JPEG-JFIF Compliant image type and the Progressive Encoding Sub type.
Figure 10.8. Paint Shop Pro lets you save interlaced
GIF images, which appear to display faster when loading.
Just A Minute: The progressive JPEG standard
is quite new and is supported only by Netscape Navigator version 2.0 or higher and
Microsoft Internet Explorer version 3.0 or higher. Browsers that don't support progressive
JPEG will not display the file as if it were just a regular JPEG--they will display
nothing at all or a message saying the file isn't recognizable. Interlaced GIFs, on the
other hand, will appear correctly even in older browsers that don't support two-stage
display.
Figure 10.9 shows a Web page with a title banner
saved in the interlaced GIF format being downloaded from the Internet. Notice that the
banner appears blocky. If this weren't an interlaced GIF, only the top half of the image
would be showing at this point in the download.
Figure 10.10 shows the same page a few seconds
later, when the download is complete.
Figure 10.9. The banner at the top of this page
looks blocky because the interlaced GIF file isn't done loading yet.
Figure 10.10. The same page as in Figure 10.9, after
all images are done loading.
Just A Minute: Image files smaller than about
3KB will usually load so fast that nobody will ever see the interlacing or progressive
display anyway. In fact, very small images may actually load more slowly when interlaced.
So save these tricks for larger images only.
To Do: Well don't just sit there reading, grab that
mouse and crank up Paint Shop Pro! I can't tell you what graphics best convey the mood and
spirit you'd like for your site. But here are a few pitfalls to avoid and shortcuts to
take as you navigate the uncharted territory of your own Web graphics:
- Stick with a few thematic colors on each page and
throughout all your pages. Beginning "Web artists" tend to get carried away with
the millions of colors your computer can produce.
- To save time, make a simple, unlabelled button or
icon and use it as a starting point for all your links. This will also give your pages a
consistent look.
- Use one font in all titles and buttons. Okay, two
fonts, tops. The "ransom note" look is definitely passé.
- Keep your first graphics direct and to the point.
Remember, you'll learn much more about backgrounds, colors, fonts, and layout tricks in
the chapters to come!
Summary
In this chapter, you learned the basics of preparing
graphics for use on Web pages. You saw how to download and use the popular graphics
program Paint Shop Pro to work with photos, banners, buttons, and other Web page images.
You also found out how to decide between the various graphics file formats used for Web
page graphics, and how to make images that appear in stages for the illusion of speed.
Don't miss Chapter 11, "Making Pages Display
Quickly," for more graphics speed-up tricks.
Q&A
- Q I've heard that I need Photoshop to do Web
graphics well. Is it true?
A Adobe Photoshop is the most popular commercial graphics program for creating Web
page graphics, and it is arguably the most powerful as well. But unless you're an
experienced graphics professional (in which case you already own Photoshop), you'll
probably find it much easier--and a lot less expensive--to learn and use Paint Shop Pro.
Note that Paint Shop Pro does support all Photoshop-compatible plug-ins and add-on
programs, too.
Q Shouldn't I just hire a graphics artist to design my pages for me instead of learning
all this stuff?
A If you have plenty of money and need a visually impressive site--or if you think
that ugly building with chartreuse trim that people are always complaining about actually
looks pretty nice--hiring some professional help might not be a bad idea. But remember
that you probably know what you want more than anyone else does, which often counts more
than artistic skills in producing a good Web page.
Q I've produced graphics for printing on paper. Is making Web page graphics much
different?
A Yes. In fact, many of the rules for print graphics are reversed on the Web. Web page
graphics have to be low-resolution, while print graphics should be as high-resolution as
possible. White washes out black on computer screens, while black bleeds into white on
paper. Also, someone may stop a Web page when only half the graphics are done. So try to
avoid falling into old habits if you've done a lot of print graphics design.
Quiz
Questions
- 1. Suppose you have a scanned picture of a
horse that you need to put on a Web page. How big should you make it, and in what file
format should you save it?
2. Your company logo is a black letter Z with a red circle behind it. What size should
you draw (or scan) it, and what file format should you save it in for use on your Web
page?
3. Should you save a 100x50 pixel button graphic as an interlaced GIF file?
Answers
- 1. Depending on how important the image is to
your page, as small as 100x40 pixels or as large as 300x120 pixels. The JPEG format, with
about 50-percent compression, would be best.
2. About 100x100 pixels is generally good for a logo, but a simple graphic like that
will compress very well so you could make it up to 300x300 pixels if you want. Save it as
a 16-color GIF file.
3. No. A small file like that will load just as fast or faster without interlacing.
Activities
- If you have an archive of company (or personal)
photos, look through it to find a few that might enhance your Web site. Scan them (or send
them out to be scanned) so that you'll have a library of graphics all ready to draw from
as you produce more pages in the future.
- Before you start designing graphics for an important
business site, try spicing up your own personal home page. This will give you a chance to
learn Paint Shop Pro (or your other graphics software) so you'll look like you know what
you're doing when you tackle it at work.
|
Learn HTML
