If I had to take one graphics application with me, on my laptop, to that fabled desert island, it would probably be Corel Xara. Now, if I were planning to create Web graphics on that fabled desert island, then it would be Corel Xara for sure.
October 20, 1999

Why?

Well for openers, speed. Xara is lean and mean. And it's considerate. It occupies less than 8 MB on your hard drive. And when to comes to creating Web graphics, Xara is in a league by itself.

Xara was one of the first vector drawing applications to offer an antialiased display. A small slider on Xara's context-sensitive Infobar, shown in Figure 1, allows you to work in four view modes, Outline, Simple, Normal and Antialiased. Outline is helpful when working with blended objects, as only the starting and ending blend objects are shown. Simple is Xara's name for wireframe. Normal is non-antialiased as shown in the illustration. Antialiased smooths all text and objects. Xara redraws in real time in any of these four modes with no noticeable sluggishness - even on memory-challenged computers. And finally, Xara can create sophisticated GIF animations. What more could a marooned Web designer ask for?

Note: Antialiasing is a process in which intermediate-colored pixels are created to soften the borders of contrasting objects. The result of this smoothing process is a subtle blending of edges which, contrary to logic, creates the appearance of a sharper edge.

Tip: When Exporting bitmap images, Xara uses whatever display mode is selected. If you want the best quality image, be sure the View Quality slider is all the way to the right. On the other hand, if you want a wireframe image, then Export in Simple or Outline mode.

Related Tip: Want to create an image with a section shown in wireframe? Create a bitmap in Simple view mode, and either crop it to a shape using Combine Shapes > Intersect Shapes, or for an even more dramatic effect, use Xara's Linear (gradient) transparency to create a transition from wireframe to full color.

Pressing the Right Buttons

I created a simple button using two circles, one filled with Xara's 2-color Conical fill and the smaller circle filled with Xara's Linear fill seen in Figure 2. I wanted to use the button over a brown textured background image. The best way to do this is to set the page color to a color that comes close to the textured or colored background. To show you why, I'll export the button and text on the left as a GIF file with a transparent white background. Then I'll change my page color by holding down the Shift key and dragging a similar color from the screen palette onto the page. I'll select just the text and button and once again export the image as a GIF file and check the Transparency option in the Gif Options tab in the Gif Export Bitmap Options dialog. When I place the two GIF files side-by-side in my Web page, the difference is dramatic. Xara has antialiased both images as you can see in Figure 3. The button and text exported over the white background has a white fringe around it and the text is almost impossible to read. The image that was exported over the brown background also has a fringe around it, but in this case the fringe blends in with the background creating a sharp image with readable text.

Tip: If you are creating images with transparent backgrounds that all need to be the same size, let's say a series of buttons, use a rectangle slightly larger than the objects you are exporting with the outline and fill set to none. Xara will create an image to the size of the rectangle and the background will still be transparent.

Note: A solid colored rectangle behind your objects will not be transparent, even if you have selected the Transparent option in the Gif Export dialog. The background will only be transparent if there is no filled rectangle behind the objects.

No Half Pixels

Web images are measured in pixels (picture elements), the smallest element that can be displayed on a computer monitor. If you use inches, picas, centimeters, or any other units of measurement, your exported image most likely will not be in exact pixels. In this case Xara will attempt to antialias the rectangular border around your image creating a visible faint outline. You can avoid this by setting your units to Pixels.

Click on an empty portion of the page with the right mouse button, and select Page Options from the pop up menu. Select the Units tab. Select Pixels from the Page Units drop down list, and check 0-255 for color units as shown in Figure 4. Now click the Grid and Ruler tab and change the Major Spacing setting to 100pix (type it exactly like this with no spaces) and change the number of Subdivisions to 10 as shown in Figure 5. Press OK to close the dialog. This will change your ruler settings and your screen measurement units to pixels. Finally, click the right mouse on the page again and enable Snap to Grid. Any rectangle you draw, with Snap to Grid enabled, will be in exact pixels. You can also verify the size of an object by checking the Height and Width settings on the Infobar.

Tip: If you create a lot of Web graphics, create a blank page with all the settings noted above and save the page as a Template (File > Save Template). Give the template a name such as Web Template and press Save Template. The next time you create a new page, select File > New > and select your template from the list. If you use certain objects, colors, logos, and so forth, save them with the Template as well.

Put Your JPEG Images on a Diet

The JPEG file format is great for photographic images or illustrations with a lot of gradient fills. Because JPEG images can contain up to 16.7 million colors (vs. a mere 256 for GIF images), your images should reproduce perfectly. And even though JPEG images are compressed, you can experiment with different amounts of compression until you find the right mix of file size to quality. As the amount of compression increases, the quality of the image decreases, so you need to preview your image with different amounts of compression to arrive at the right mixture of compression to image quality. When you export an image as a JPEG file, Xara displays a JPEG Quality slider seen in the inset in Figure 6. This can be confusing. Rather than show the amount of compression, Xara displays the JPEG Quality setting, so a quality setting of 80%, represents a compression amount of 20%. The higher the quality percentage, the lower the amount of compression. Likewise, the higher the quality setting, the larger the file size.

There is a Preview button in the JPEG Export dialog that gives you a fair idea of how the image will look. But to get the best idea, along with some useful information, select the Browser Preview tab and then press the Preview in Browser button when you are in the JPEG Export dialog. This launches your Web browser and displays the image as it will actually look on the Web along with the amount of compression, the size of the image in pixels, and the file size. Also shown is a chart of Best Possible Download Times for a variety of modem speeds as you can see in Figure 7. I exported this image with no compression as well as 90%, 80% and 70% compression. The figures were impressive. At 100% image quality, the file size for the image was 85K. Reducing the image quality to 90% reduced the file size to 30K with virtually no loss of quality. 80% resulted in a file size of 20K, while 70% resulted in a file size of 16K. The difference in image quality is not as good at 70% as it is at 90% so I would be inclined to split the difference and go with the 80% setting.

Can't decide whether to use JPEG or GIF for your file format? For images with text, and flat areas of color, use GIF. For images with photographs, use JPEG. For images with gradient fills, try both. For transparent backgrounds, use GIF. (JPEG images cannot have transparent backgrounds).

Over and Under the Rainbow

I created a simple rainbow-filled rectangle, added some text, and Exported the image as a GIF file using a variety of palette options. Figure 8 shows four of the resulting images. The top image was Exported to GIF using the Browser palette, with the Dithering option enabled. The file size was just over 6K. The Browser palette option is the safest option if you are creating images for multiple platforms, and/or for monitors capable of displaying only 256 colors. The second image uses 256 colors and an Optimized palette with no dithering. The file size dropped to 5.6K. Optimized palettes use the best number of specified colors to create the image as opposed to the Browser palette's fixed set of 216 colors. Dithering creates larger file sizes, but when Exporting GIF files with fountain fills, dithering is a must to avoid banding. I also created images with 32 and 16 colors using the dithering option resulting in images that were less than perfect but with smaller files sizes of 4.6K and 3.1K respectively.

The GIF Export Bitmap Options dialog, shown in Figure 9, gives you control over your final image. Pressing the Preview button provides a reasonable approximation of how any changes may affect the final image. The two side-by-side preview windows can be used to compare the results of various options. Transparency can be selected under the GIF Options tab while Image Map options lets you save your image as an image map with linked hotspots. Xara can either place the code for the Image map in the Clipboard, where you can paste it into your HTML editor, or Xara can create an HTML document with the code in place.

The Browser Preview tab gives you four ways to preview your image, Plain Background (white), Document Background (white, or a color or textured background), Bitmap as Background (useful for seeing how a bitmap image will tile on your Web page), and Checkered Background (shows the image with and without transparency).

Note: Dithering is a process of creating patterns of one color on top of another color resulting in the appearance of more colors and is helpful in reproducing blends and fountain fills. Non-dithering colors, also known as Web-safe colors, will display solid on any monitor capable of displaying at least 256 colors.

Repeating Pattern Backgrounds

Xara's Bitmap as Background option for Preview in Browser makes it easy to see how a tiling background image will look on your page. I created a repeating circle star pattern shown in Figure 10. To achieve a staggered pattern, I placed one quarter of the circle star image in each corner and a full image in the center. When the image tiles, each corner of the tile will align with the other tiles and create the entire circle star pattern as you can see.

Choosing the Bitmap as Background in the Preview in Browser tabbed section, opens your browser and shows you exactly how your image will look on the page as shown in Figure 11. I've chosen to use an Optimized palette, non-dithered, 32 colors, producing a small tiling image of 1.6K.

Xara offers another method of Exporting a GIF image with a transparent background that will be viewed over a tiled background. After the tiling image has been created, open the Bitmap Gallery, seen in Figure 12, select the image, and press the Background button. The selected bitmap image now becomes your page background. When an object, or group of objects, is placed over this background, and the Transparent option is selected in Xara's GIF Export dialog, the object or objects are antialiased to the background. You can preview this by selecting the Document Background option in the Preview in Browser tabbed section of the GIF Export dialog as illustrated in Figure 13. Transparency has been applied to the drop shadow under the logo, which was placed over the tiling background in Xara, thus the shadow displays the texture of the background itself adding an additional bit of magic.

Well, that winds up this opening article on creating Web graphics with Corel Xara. In future articles, I will elaborate more on each of these subjects upon which I have only briefly addressed here. If you have any questions or comments, you can e-mail me at themook@slip.net. In the meantime, I'm going to slip quietly away, with my laptop and my favorite drawing application, to that fabled desert island and whip up some awesome Web graphics.

More articles from Gary W. Priester

Creating Image Maps with Corel Xara 2

Creating Tiling Background Images with Corel Xara 2

Creating Animations with Corel Xara 2

And for another view on optimizing graphics for the Web, read Pixel Anatomy 101.

Gary W. Priester is a reformed advertising art director having spent 25 years creating print and TV advertisements to get people to buy products and services they didn't need. For the past decade, Priester has been a principal in The Black Point Group, a Northern California graphic design firm. He is the author of Looking Good in Color, Ventana Press, and co-author of CorelDRAW Studio Techniques, Osborne/Corel Press. In addition, Gary writes for numerous magazines and Web sites. He lives just north of San Francisco with his artist wife, Mary Carter, their six chickens, five cats, four doves, two finches and one extraordinary canary.