 |
ISO 9000 | ISO 14000 |
 GMP Consulting |
PART V
|
||||||||||||||||||||||||||||||
| • Web page basics | 442 |
|
| |
| • The flavors of the Web | 445 |
|
| |
| • The GIF format | 446 |
|
| |
| • The JPEG format | 457 |
|
| |
For those of you who are fearful, nervous, or even intimidated about the World Wide Web and what it takes to design for it, we start this chapter with some good news: creating graphics for the Web is easier than creating graphics for traditional output. There are fewer rules to follow, there is less chance of major screw-ups, it is less expensive, and much of the time, it is more fun.
Now, don’t you feel better?
If you’re nervous about Web publishing, it’s probably because you are encountering an entirely new terminology outside the friendly confines of .cdr files, .eps files, standard color separations, and film. You know how to create print files and send them off to your service bureau, but sending .htm files and strangely named graphics to who-knows-where is an altogether different experience, largely devoid of the warm fuzzies that traditional designers get from watching their work go from concept to film to print.
Consider this chapter to be the cyber-equivalent of Bonehead English. This is Web Graphics 1A, where we cover the concepts, terminology, and basic methods for using CorelDRAW to create graphics for the World Wide Web.
|
| |
| NOTE It’s all too easy for authors to bite off more than they can chew when covering the vastness of the Internet, so it is important for us to be clear on what we are not covering, as well as what we are. This chapter assumes that you already have a connection to the Internet—either a permanent one, such as a company network, or a dial-up connection from a provider such as AOL, Earthlink, ATT, or a local or regional provider. This chapter also makes assumptions about your involvement with HTML, the language of the World Wide Web. It assumes that you have a basic understanding of HyperText Markup Language (HTML) files and how they define the look of a Web page, or that you don’t need to know all that because someone else in your organization does, and your job is specifically to create the graphics. |
Web Page Basics
Traditional artwork typically includes a combination of text and graphics, and the same is true of pages that you design for the World Wide Web. Nevertheless, while a CorelDRAW file can contain both types of elements, the ingredients for a Web page are handled differently. The text for a Web page is contained in the HTML files, but the graphics are all external, with pointers in the HTML code that identify them. For instance, here is a sample piece of HTML code from our lead author’s home page. It shows the code for the title of the page, the blue background, Rick’s logo, a headline, and a paragraph, including a hyperlink.
<html> <head> <title>Complete services for the Corel graphics community</title> </head> <body background=”bg.gif”> <img src=”logo.gif”> <h1>June 1999</h1> <b>CorelWORLD News: </b>The first 100 people to register for the conference will receive a Super 10 Pack of professional photos on CD. Over 1,000 royalty-free, high-resolution images. Click <a href=”corelworld.htm”> CONFERENCES</a> for all the details. </body> </html>
The picture (logo.gif) was created in DRAW and exported as a GIF file, one of the two universal formats that the Web understands. Note that the graphic is not contained in the HTML file; it is only referenced in it. Figure 20.1 shows how this code would look in Microsoft Internet Explorer (or Netscape Navigator).
)
FIGURE
20.1 The lines of code above appear as this
simple page when viewed in a Web browser, such as Internet Explorer.
){kind=link}
Note how the hyperlink is coded, with the HREF=“______” syntax. You can also make a graphic be a hyperlink. The Sybex Web site has numerous examples of HTML files with graphics identified both as static images and hyperlinks, and we will be referring to them throughout this chapter and the next two.
As we mentioned earlier, in many important ways, creating graphics for a Web page is easier than for traditional media. Here are a few reasons why.
Color Is Cake
Creating four-color printed material is a very demanding process, involving choosing color models, creating film separations, and enduring an expensive and time-consuming printing process. But creating color graphics for the Web is easy: you just do it. Today, everyone has a color monitor, and if you create a picture in color, your audience will see it in color. End of story.
No Dots to Deal With
The second big headache in traditional printing is determining the resolution of the final output device and how that will affect the graphics and photographs you use. This issue is almost entirely moot with Web pages. There is little point in creating graphics beyond 100dpi when final viewing will take place on a display monitor. There are issues involving the pixel resolution of monitors (640 × 480 vs. 800 × 600, for example) and also the color depth (16, 256, 64000, or 16 million), but these are more easily resolved than traditional print issues.
Instant Feedback
If you wonder how a graphic will look on the Web, you don’t have to go very far to find out. Open your browser and load the graphic. No need for color keys or Iris prints, or conducting a press check. You create it and you view it.
In all three of these points, the common factor is this: the output device is a computer monitor, not a piece of paper. No toner or ink is involved, only rays of red, green, and blue light emanating from a cathode ray tube.
For example, Figure 20.2 represents the annual appearance of our lead author’s two young daughters, Jamie, who turned three in early 1999, and Erica, six and a half by the summer of ‘99. This picture was scanned at high resolution and prepared for printed output. As such, the scanned image required 7.3MB of disk space, and when prepared for color printing, created almost 15MB of print information. We also needed about 30 minutes of test prints to ensure its quality.
)
FIGURE
20.2 Scanning this picture and printing it in
this book required over 7MB of storage space and many tests to make sure
it was prepared properly.
){kind=link}
In stark contrast, preparing this photograph for display on the Web required five minutes and less than one diskette’s worth of data. We could sample the photo all the way down to 600 pixels wide and 100dpi and save it in a Web format with very high compression. Figure 20.3 shows how the photo appears when viewed in a browser. You can download Jamie & Erica.jpg from the Sybex Web site and see for yourself. It is only 26KB in size, but is perfectly adequate for on-screen viewing.
)
FIGURE
20.3 Preparing this picture for Web viewing
requires only 26KB of space, and you can see immediately how it will look.
){kind=link}
The Flavors of the Web
If you were producing traditional artwork with DRAW, you would create a .cdr file and do one of two things with it: you would either print it out, onto paper or film, and be done with it; or you would export it to be incorporated into another drawing or a document created in another program.
Veteran exporters are quite familiar with the standard export formats of EPS, TIFF, and WMF. (These formats are discussed in Chapter 30.) The World Wide Web introduces two entirely different graphic formats: GIF and JPEG. The following sections offer some background and a few of the finer points about both formats, but if you want to cut to the chase, you can’t go wrong if you observe the following:
- • The JPEG format is for displaying photographs
and graphics with fountain fills or other multicolored patterns.
- • The GIF format is for all other graphics.
Granted, we’re painting with a broad brush, but you will find these rules of thumb to hold true most of the time.
At its core, creating Web graphics involves exporting your DRAW artwork (or saving your images from PHOTO-PAINT) in one of these two formats. These are both bitmap formats—the Web doesn’t understand vector graphics yet, although by the time you read this, we might be there, so swift is new development in Web graphic formats.
You should also have a browser up and running—either of the two mainstream browsers (Microsoft Internet Explorer or Netscape Navigator) will do.
| Previous | Table of Contents | Next |
|