Chapter 21
Creating a Web Graphics Laboratory

Featuring

While some of you turn to DRAW to create complete Web pages, most users have other tools to do that. Most cyber-designers have CorelDRAW in their software arsenal to produce the graphics that will make their way onto a Web site. The following chapter will explore DRAW’s more exotic features; this one focuses on what we consider to be the meat and potatoes of Web graphics creation.

This chapter assumes you read or understand the basics covered in Chapter 20.

Think Pixels

It’s not enough that you know how to export your graphics as GIF or JPEG files. Setting up a good laboratory for Web graphics requires a deeper understanding of the essence of Web sites. You need to understand that:

•  The final output device is a computer monitor, and computer monitors don’t understand the concepts of inches, picas, or points. They only know pixels.

•  You may have the coolest 1200dpi printer in the land, but a computer monitor produces output that is equivalent to only about 100 dots per inch. Ninety-six to be exact.

•  You may know every export flavor in the world and be a whiz at producing scalable .eps files, but every graphic that goes up on a Web site is a bitmap, and as such, it must be created at exactly the right size.

•  When it comes off the press, everybody will see your gorgeous brochure the same way, excepting factors out of your control, like severe myopia or hallucinogenic substance abuse. But everybody will see your Web pages a different way. Your ability to limit that variable will be key to your success.

Setting the Stage for Web Creation

With these points in mind, here is how we think you should set up your laboratory. Follow these steps:

1.  From a blank screen, go to Layout Ø Page Setup.

2.  From this dialog, click Landscape and set the unit of measure to pixels. As soon as you do that, the Resolution list becomes active.

3.  Set the resolution to 96.

4.  Set the width of the page to 610 pixels. Set the height to something similar.

5.  OK the dialog. On the page, click and drag the intersection of the two rulers and move out to the page.

6.  Take this intersection to the top-left corner of the page and release. That sets the 0,0 point of the ruler to the top of the page instead of the bottom.

The PostScript printing language measures a page from the bottom up, which explains why DRAW’s default page measurements are that way. But on the Web, there is no bottom of a page; it could go on forever. Better to measure from the top.

7.  Drag a horizontal guideline down and place it approximately 330 pixels down the page.

So where on Earth do these numbers come from? Resolution of 96...width of 610...a guideline at 330. Here is why we recommend this configuration.

How Many Pixels Fit in an Inch?

As we have already established, there is no sense in exporting Web graphics at high resolution when their intended output device is low resolution. Monitors today render graphics at the equivalent of 96 dots per inch. You can change the resolution of a graphic during export, but setting the page to this same resolution of 96 before you begin makes your life easier. Once you do this, you can create all graphics at precisely the same size as they are to appear on a Web page.

Set the page resolution at 300 and you’ll see what we mean. The Export dialog is no longer very cooperative, and you’ll have to override the resolution and/or the size settings. Establishing agreement between the object resolution and the page resolution is the smart way to go.

How Wide Is Too Wide?

This point gets debated often. Most computer users today use a screen resolution of at least 800 × 600, but there are still plenty who stay at the standard resolution of 640 × 480. (Furthermore, just because you run at 800 × 600 doesn’t mean you open your browser full screen.)

We think there is nothing wrong with scrolling down a Web page, but we don’t like to scroll over. There is no Intellimouse scroll button for that and no keystroke—just a cumbersome scroll bar. Therefore, it’s a courtesy to design Web pages that do not require horizontal scrolling. If you are able to design within that, your visitors will appreciate it, even if they aren’t conscious of the favor you are doing them.

So why 610? Because if a browser is running full screen on a standard display, the program window on the left and the scroll bar on the right consume 30 pixels. The maximum viewing width is 610 pixels.

Over at altman.com, our lead author takes this argument even further. His comments:

Web pages are not as easy to read as a book, and anything that we Webmasters can do to help, we should. By keeping text widths relatively narrow, it improves readability. On our Web site, we design all of our pages with widths of 500 pixels. At first, I thought that was going to be stifling. It’s not. It is a very comfortable constraint; I’ve come to enjoy designing within it.

Figure 21.1 shows a page from altman.com running on our screen, whose resolution is 1152 × 864. We certainly appreciate how small we can keep our browser window and still be able to read everything.