|
|
|
|
||||
|
|
© 1998 by David Karlins. All Rights Reserved.
Many of you are interested in converting your CorelDRAW images to Web graphics. As Web sites multiply exponentially, so does the need to fill sites with attractive graphics, logos, lines, background images, artistic text, etc. And with the explosion of the Web has come a corresponding decline in the quality and tastefulness of Web graphics. Just like too many baseball teams have watered down the talent in the "big leagues," the proliferation of Web sites has flooded the Net with graphics that take hours to download, and that aren't very good. It is time to connect more CorelDRAW 8 artists to the Web!
In this series of articles, I'll give you some tips on transferring those great illustrations you've conjured up in CorelDRAW onto the Internet. Depending on how much fun everyone has, I'll follow up this article with others that explore background tiles, Web logos, transferring text and other challenges. In this first article on Corel to Web graphics, we'll start by converting a CorelDRAW 8 illustration to a GIF file, where it can be made transparent, interlaced (to download faster), and placed on a Web site.
I'll be using CorelDRAW 8, but most of the advice and instructions I share will work in 7 as well. For this series, I'll evade the built-in Web publishing features in CD8. Those tools have gotten mixed reviews. Personally, I kind of like the Publish to Internet Wizard, and I gave it a chapter in Teach Yourself CorelDRAW 8 in 24 Hours. You can read that chapter for free at the book's Web site. But even I will admit that Corel is not the smoothest Web design package. So, in this series we'll stick to exploring what CorelDRAW does best - creating great graphics. And we'll explore everything you need to know to get those images onto the Web.
Despite some adventurous initiatives by Corel, there is no vector based graphic format that can be interpreted by Web browsers. That means that you cannot place your graphic images in CorelDRAW's native CDR format on Web pages. But you can easily convert your CorelDRAW illustrations to formats that do work on the Web.
When you convert your CorelDRAW 8 illustrations to Web graphics, you transform them into 72 dpi bitmap images in one of the two recognized Web graphic formats, GIF or JPEG. The 72 dpi constraint is defined by monitor resolution. And the bitmap format is necessary because there are only two universally recognized Web graphic formats, and they're both bitmap. The two universally recognized Web graphic formats are GIF (pronounced either like the beginning of Jif-fy peanut butter, or as in Kathy Lee Gif-ford), and JPEG (pronounced jay-peg, and sometimes called JPG). JPEG format is usually used for displaying scanned photos on Web pages because it can display more colors, and creates truer color separation. But GIF files are generally faster and more versatile in Web sites. In this article, we'll focus on transforming your CorelDRAW 8 illustrations to GIF files.
GIF files are usually better than JPEG format because they can have transparent backgrounds, and interlacing. The Figure 1 shows an illustration that Paul Mikulecky created for my book Teach Yourself FrontPage 98 in 24 Hours. In this article, I'll walk you through the process of preparing that drawing for a Web page. In the process, you'll explore the process of creating an interlaced, transparent image.
Figure 1 |
The first step in preparing a Web graphic is, of course, to create a nice object in CorelDRAW itself. |
Keep in mind that your wonderfully smooth Bézier curves and your lusciously polished gradient fills are going to get a whole lot grainier when you convert them to Web graphics. For example, the interactive transparent shading over the compass face in Figure 1 is not as gradated as it would be in a high-resolution printer output. There's no way around that -- it is a limitation of the computer screen that you're looking at. But you can still use those tools to design your illustration. Just don't try to include fine detail in your illustration if it is intended for the Web.
Once you create your drawing, you can and should save it as a CorelDRAW 8 file. That way all your original objects will be preserved. (Remember -- you're going to sacrifice some detail when you convert to Web graphics).
With your illustration created and saved, what I like to do is select the objects that will be part of the Web image. Often I create two versions of an illustration: one with more detail to use for printed output, and one with less detail for the Web. I'll usually select only some of my objects to include in the Web version. In the case of Paul's drawing, in Figure 1, I already stripped it down a bit to prepare it for Web conversion. You can see the full version of the drawing if you wish at my Web site.
Once you select all the objects that you want to convert to a (single) Web graphic file, click on the Export button in the CorelDRAW 8 toolbar. Enter a file name in the Export dialog box, and from the Save As Type drop-down list, choose CompuServe Bitmap (GIF). If you followed my advice, and selected some objects from your drawing to convert to a Web graphic, be sure to click on the Selected only check box in the Export dialog box. It won't matter if you select the Suppress Filter Dialog check box. Then click on the Export button in the dialog box.
Just like in the movies, size matters with GIF images. Normally, graphic file size is a product of resolution (density), size and colors. But since resolution is pretty much fixed at 72 dpi for Web graphics, GIF file size is controlled by the size of the image, and the number of colors you use. Increased file size not only takes more Web space, but it also slows down the time it takes for a visitor to see images at your site. The easiest way to reduce image download time is to make your image smaller. The widest appropriate image width is 600 pixels. Anything wider will force a visitor with a VGA monitor to use the vertical scroll bar to view your full image. That might be OK for some things like large maps, but normally it makes viewing and printing your image a big pain for your visitors. Figure 1 (above) is 600 pixels wide. For those of you with super VGA 800 x 600 resolution, that's not bad. For folks with VGA (640 x 480) resolution, I'm pushing the width of your screens only because the quality of the image deteriorated when I tried to make it smaller. In general, you want to make your images as small as possible for Web sites.
The other way to control file size is by reducing colors. Less colors, and smaller images download faster. But less colors often reduces image quality. Unless your image is in black and white, your two real options are 16 colors and Paletted (8 bit). Paletted (8 bit) images have 216 colors, or 256 depending on what method for counting is used (40 colors are reserved for operating systems). You already guessed how many colors you can have with a 16 color graphic. Remember the equation: More colors = higher quality + slower download.
You can control image colors, resolution and image size in the Bitmap Export dialog box. This dialog box appears when you click on the Export button in the Export dialog box. Resolution should be set to 72 dpi (first choose Custom from the drop-down list). With Web graphics, all resolution is normally 72 dpi. File size and colors are defined in their respective areas of the dialog box. Size and color require a bit of trial and error testing.
Editor's Note: I find that 100 dpi is a much better number since resolution is a meaningless number when designing graphics for the Web. Regardless of the number you choose, the graphic itself will be the same.
Figure 2 |
|
Some images work at 16 colors, and some don't. In Figure 2, I tried to reduce page download time by saving the compass illustration as a 16 color GIF. Ouch! The file size for the 16 color GIF is 8 MB, and the download time is about 4 seconds for a visitor using a 28.8 modem. That's fast. But the results, as you see on the right, are pretty bad.
Figure 3 |
|
Figure 3 shows the compass exported to an 8 bit GIF file. The quality has increased from bad to pretty decent. But the file size increased from 8 KB to 30 KB and the download time increased from about 4 seconds to about 16 seconds (ouch again - that's a long time for an image). The decision I have to make is this: will visitors find this image worth waiting 16 seconds for? If not, I'll have to find a less complex graphic for my Web site.
In this case, the quality of the image in 16 colors is just not acceptable. The gradated fill used for the compass cover and the shading outside the compass don't make it in 16 colors. But in other cases, the quality will be fine, and you can save your visitors some download time by reducing colors. In the next section of this article, you'll see how you can speed up download time by adding transparency, and you can make the wait easier to handle with interlacing.
Figure 4 |
|
Interlacing causes a Web image to "fade in" in layers, starting with a blurry image and increasing in resolution until the whole file downloads. All the images on this page are interlaced.
Both transparency and interlacing are defined in the GIF Export dialog box that appears after you OK the Bitmap Export dialog box. The GIF Export dialog box is shown at the right.
Transparency lets the background of a Web page show through an image, and removes the rectangular background from your image. In Figure 4, I've defined the white background behind my image as the transparent color. To do that, I clicked on the Image Color radio button, and then used the Eyedropper tool in the dialog box to click on that white background in the Original frame of the dialog box. The white background is displayed as my transparent color in the rectangle in the lower right quarter of the dialog box.
Figure 5 |
|
The Interlace checkbox in the GIF Export dialog box enables your image to download in phases. To create the image in Figure 5 (on the left), I assigned both transparency and interlacing. You can select those options in the GIF Export dialog box. The result is Figure 5. You won't notice a big change from interlacing, because I applied interlacing to all the images on this page. But you should notice a difference with the transparent background color.
Transparency is nice aesthetically, making your image appear to be more integrated with the Web page. Transparency also reduces file size -- in this case, the compass on the right is about 1/3 smaller (and faster) than the same image without transparency.
Figure 6 |
|
Confession/Tip: Astute readers may have noticed that I actually had to tweak the CorelDRAW 8 image in Figure 5 (above) to get a cleaner transparent image. In my first attempt to save the compass with a transparent background, the gray shadow looked awful against the page background -- as you can see in Figure 6. So I stripped off the shadow, which didn't work well against a transparent background.
The moral of this experience is, once again, Web graphics cannot be as complex, refined and detailed as printed output, and you will have to adjust your illustration as you convert it to a Web graphic format.
Choosing a Web Authoring Tool · Eight Steps to Implementing a Web Site · Step 1: Grabbing a Domain Name · Step 2: Publishing Your Web Content - Finding a Web Server Provider · Step 3: Develop Your Web Strategy · Step 4: Design and Create Your Site · Step 5: Publish and Test Your Site · Step 6: Promoting Your Site · Part I: From CorelDRAW to the Web · Part II: Creating Web Page Background JPEG Files · Part III: Creating a Hover Button in CorelDRAW
Flash 5 Tutorial 3: Using Masking in an Animation ·
Flash 5 Tutorial 2: Creating a Logo with a Shape Transition ·
Flash 5 Tutorial 1: Create a Splash Screen
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
