Second, note that we are on page 4 of Web Laboratory.cdr. We are using these pages as a sketch pad—each page containing graphic elements, experiments, or just idle doodling.

This image has nice texture, but it is not the color we want—we are looking for a lighter, softer shade of blue. This is a job for a lens:

6.  We activated Snap to Objects with View Ø Snap to Objects and then drew a rectangle directly on top of the image.

7.  We removed the outline of the rectangle and went to Effects Ø Lens to open the Lens docker.

8.  We chose Color Add, found a medium blue tone, and accepted the default rate of 50%. Upon clicking Apply, our image looked much lighter and softer.

9.  We selected both objects and grouped them with Ctrl+G.

10.  We saved.

11.  We exported the image as bg.jpg and immediately went to look at it in the browser. Figure 21.7 shows what we saw.

The bg.jpg file consumes 13KB. That’s not a lot for an element as crucial as our background, but if we could get it smaller, we would in a heartbeat. So we exported the graphic many times, with different compression and smoothing values. Each time we exported, we switched to the browser to have a look. We concluded that a Compression value of 20 did not visibly affect the graphic, yet took the size down to 8KB.

FIGURE 21.7  This small graphic in DRAW is responsible for the background of this Web page.

Finishing the Laboratory

Now that we have chosen the background for our Web site, we can finish the laboratory. If it is going to serve as a place to create graphics for a Web site, we need to know how those graphics will appear against the site’s background.

This used to be a 20-step process, involving careful grid-setting, dragging and duping, powerclipping, and layer management. Now it is six simple steps:

1.  Go to Layout Ø Page Setup.

2.  Click Background from the menu tree at left.

3.  For Background, click Bitmap, and click Browse.

4.  Find the file you have created for your Web site.

5.  Uncheck the Print and Export Background box.

6.  OK the dialog and note that your background image now fills the entire page.

You won’t be able to select or move the background, and anything you draw appears on top of it. That is precisely what you want—it is behaving just like a Web site’s background. Now you can create elements and get an immediate sense of how they would look. In Figure 21.8, we see that the headline stands out nicely and the text is quite readable. However, we think we’d better lose that fountain-filled rectangle...

FIGURE 21.8  By flipping one switch, you now have an electronic tracing pad for your Web graphics.

	NOTE If you want to make printouts with your background, return to the Backgrounds page and check Print and Export Background. Then to export a graphic, make sure to select it and choose Selected Only in the Export dialog. Regardless of the status of the Print and Export Background box, the background will appear when you press F9 to get a Full Screen Preview.

Start Designing

When you begin creating and compiling elements, you can—and should—do everything precisely to size. Your page is showing you the optimum width, your background is in place, and you can get immediate feedback on what looks good and what fits.

Figure 21.9 shows two variations of the altman.com logo being tested. By creating it in our laboratory, we see that it fits within our ideal 610-pixel width, and there is sufficient contrast between the lightest and smallest elements and the background. When it comes time to export, we will do so at the exact size we created these elements.

FIGURE 21.9  Thanks to our laboratory setup, we see that these logos will fit and they will be easily visible.

As we build solid-filled objects, we will make sure to use one of the browser-friendly color palettes, like the one shown in Figure 21.9. These browsers are RGB-based, and contain the 216 colors that are guaranteed to display without dithering on any display using SVGA or better. With fountain fills, texture patterns, and full-color photographs, it’s not as easy to guarantee color accuracy down to SVGA, but you can’t lose sleep over that. There is only so much you can do to cater to the lowest common denominator. Assuring that solid colors display accurately is a reasonable expectation and worth the effort. Limiting all colors in all graphics to the 216...that’s asking too much.

WARNING Before creating Web graphics in DRAW, make sure that you turn color correction off. Go to Tools Ø Options Ø Global Ø Color Management and uncheck Calibrate Colors for Display. Otherwise, DRAW will display all colors based on how it thinks they will print, and the colors you choose for your graphics will display entirely differently in a browser. This is the one time when you don’t want DRAW to correct for printed output. So turn off color correction, and for once, what you see really will be what you’ll get.

Start Exporting

We wish that the process of exporting were as straightforward as the design process, but as we’ll detail in the next chapter, DRAW’s export engine has some fundamental and potentially significant flaws that might require a diversion through PHOTO-PAINT. Stay tuned for this and many other spellbinding topics in our anything-goes concluding chapter on creating Web graphics.