| |
Now, how wide should this yellow rectangle be? To prevent the red border
from repeating itself, how much white space do you need? Would 1024 pixels
be sufficient? What if some of your readers run at 1280 × 1024? What
about the one or two percent of users who are at 1600 × 1280?
It costs you so little to cover all contingencies, you might as well
set the rectangle so that the entire graphic spans 1600 pixels.
- 6. Stretch the yellow rectangle so that it reaches
the 1600-pixel mark. You’ll need to scroll quite a bit to get out
that far (and DRAW should do that for you).
- 7. Select both rectangles and note their combined
sizes, which should be at least 1600 × 50 pixels.
- 8. Export the graphic as bg.gif.
- 9. When you reach the Bitmap Export dialog, select
Paletted for the color depth to allow DRAW to find the optimum palette
size (which should be just three—red, the second color you chose,
and white, which is included in all palettes).
- 10. Verify that anti-aliasing and dithering are
both unchecked.
- 11. Verify that Resolution is set to 96.
- 12. Check to make sure that the size fields are
the same as the values you noted in step 7. With the page set to the
same resolution of 96, and 1 to 1 chosen from the Size drop-down list,
DRAW should automatically pick up the size of the objects. If not, then
choose Custom for the size and enter the values manually.
- 13. OK this dialog and at the next screen, click
Image Color under Transparency.
- 14. Choose the second color as the transparent one,
either using the Eyedropper or by clicking on the color in the palette.
- 15. OK this dialog to create the file. Here is how
it would look in a browser (after editing the HTML file to reference
bg.gif instead of bg.jpg).
Do you see the role that the yellow rectangle plays? It simply consumes
space—all the way out to the 1600-pixel mark if necessary, thereby
preventing the red strip from showing up again. You didn’t have to
make it yellow. You could have filled it white in the first place and
then not had to have applied transparency. But we have found that working
with invisible objects in DRAW is a leading cause of early retirement.
Of course, if you want a colored background, or even a patterned one,
you would use a color or pattern for the wide rectangle and not apply
transparency.
|
The Cost of Being Fastidious
You may think that creating a 1600-pixel-wide graphic is overkill,
but it costs you virtually nothing to be so fastidious. If you want
hard numbers, the 1600 × 50 pixel graphic you created for your
background consumes a grand total of 781 bytes. Creating it with
a width of only 1024 pixels would probably suffice for 95 percent
of your viewing audience, maybe more. That graphic consumes 659
pixels. So it costs only an extra 122 bytes to make your background
effective for all users.
These numbers might seem like they come from a different universe,
after spending 300MB or so to install CorelDRAW. But consider this:
- • You are rendering for the screen, so
the graphic only needs to be 100dpi at most.
- • There are only two colors, so DRAW
creates a very small palette when you choose Paletted for color
depth.
- • The graphic is very short, only 50
pixels high. The height is inconsequential because your browser
is going to tile it to the bottom of the screen. The truth is,
the only reason to give the graphic any height at all is so you
can select it in DRAW.
These are the factors that work in your favor when creating backgrounds
and other Web graphics. The more you take advantage of them, the
happier you will make visitors to your site.
|
Step by Step:
A New Background for Altman.com
Our lead author’s semi-annual Web site redesign will be publicly
aired in these pages before being unveiled to the general Web populace
(so if you don’t like it, send your hate mail to webmaster@altman.com).
And as always, the first step is the background. Here are the steps we
took:
- 1. First, we inserted Corel’s CD No. 3, where
all the photos are stored, and went to Tools Ø
Scrapbook Ø Photos.
- 2. We navigated to Webart, then Backgrds, and then
Design.
- 3. As each thumbnail image displayed, we took a
liking to bluewall.jpg.
- 4. We dragged it from Scrapbook onto the page and
then closed the Scrapbook docker.
The native image is 240 pixels square, which is needlessly large. Also,
we prefer to have the surface contours and textures be smaller.
- 5. So we went to Bitmaps Ø
Resample, and reduced the image by 50%.
There are a few things to point out about this graphic. First, note its
size of 120 pixels square, a result of the Resample command. Resample
is the responsible way to size a bitmap image when pixels are involved.
Sizing a bitmap with its handles has inherent risks of image degradation,
and you are asking a pixel to do something it inherently doesn’t
know how to do: change its size. Resample is a more sophisticated process
whereby pixels are actually adjusted.
|
|
)
)
){kind=small}
)
