by Gary W. Priester

Tiling Web site backgrounds can add a unique and distinct signature to your Web site. Creating these tiling background images in Xara is a piece of cake. When added to your HTML statement, browsers automatically repeat the background pattern filling the entire page. Text and images are automatically placed over the background. Although the backgrounds in this article have been prepared in Corel Xara 2, you should be able to create most of these effects in any vector or pixel editing application.
January 14, 2000

Getting Ready

Images created for the Web should be in even number of pixels - the unit of measurement used by browsers. If an image is not in even pixels, often an undesirable outline can be the result. Right click on a blank area of the screen and select Page Options from the pop up menu. Click the Units tab, change the Units to Pixels and the Color Units to 0-255. Now click the Grid and Ruler tab. Change the Major Spacing to 100pix (type it exactly like this) and the Number of Subdivisions to 10. This changes the ruler's units to pixels and creates a minimum snap to grid amount of 10 x 10 pixels.

Tip: I like to create a blank page, make the modifications noted above, enable Snap To Grid, (Window > Snap to Grid) and save the page as a Template (File > Save Template). I named my template Pixels. To use the Template, select File > New and select the name of the template from the fly out list. All the settings are in place when the template is opened.

Creating A Simple Grid Pattern

Figure 1

Square grids add a high tech appearance to a Web page as seen in Figure 1. This pattern uses a simple 40 by 40 pixel square with two 2 by 40 pixel rectangles. When the grid pattern is displayed, the results is a 40 by 40 pixel grid. Here's the entire process.

Click on an empty portion of the page with the right mouse button and select Snap To Grid.

Select the Rectangle Tool and draw a 40 by 40 pixel square. Apply a 20% black fill to the square.

Make a duplicate square (Ctrl K). Disable Lock Aspect Ratio (click the padlock icon, on the Infobar, so it is in the raised position). Change the Width size to 2 pixels and press Enter. Change the fill color to 10% black.

With the new rectangle selected, press Ctrl K to make another duplicate. In the Angle of Selection text entry window (to the right of the padlock icon on the Infobar), enter 90 and press Enter. You should now have a tile that looks like the one top left in Figure 1.

Previewing and Exporting the Grid Tile

Using the Selector Tool (the arrow), drag a box around all three elements to marquee select them. From the File drop down menu, select Export. Select CompuServe Gif from the Save as Type drop down list of file types. Name your tile and press Save.

The Gif Export Dialog will open (export_1.jpg). Select Browser from the Palette Options section, and set the Dithering to Error Diffusion.

Click the Browser Preview tab (export_2.jpg). Select Bitmap as Background from the Background Options section. Press the Browser Preview button (not the Preview button). Xara will automatically launch your default browser (assuming you have a browser installed) and will display the tile pattern as shown here. (export_3.jpg) In addition, Xara displays an Image Information box detailing the image size, color depth, dithering, and file size. Also displayed are estimated display times for a range of modem speeds for the image. Press Export A and that's all there is to it.

Note: Xara gives you two preview windows so you can visually compare two different settings. To activate the other preview window, click inside it. This way you can experiment with different color depths, palette options, and so forth. Click in the window that contains your choice, then click Export. The button will say Export A or Export B depending upon the window you select.

Variations on a Theme

Figure 2

The great thing about an application such as Xara, or any other vector drawing application, is the ability to create a range of alternative designs. Changing the background to 80% black and the thin rectangles to 60% black creates a stealthy dark and rich grid as shown in Figure 2. Notice that the text has been changed to white. The two fonts that I have used for all the sample text are Verdana and Georgia. Both are available from Microsoft and are installed with most Microsoft applications, so if you specify one of these fonts, chances are good your visitor will see the font as you specified it.

Note: You can never be too subtle with background patterns. An effective background pattern should add texture to your page without competing with the text and graphics. The closer the colors are in value (light and dark properties) the better your background will be. Design your background pattern so that the text is easy to read. Nothing will send a visitor packing quicker than text that is hard to read.

Raised Circles

Figure 3

Recycling our 40 by 40 pixel square, we can add two circles and create the appearance of a pattern of raised circles. Two circles have been created with the Ellipse Tool, one 30 pixels wide and the other 27 pixels wide. A Conical Fill has been applied to the larger circle and the dark color changed to 60% black. The smaller circle is filled to match the square. When the three are centered, the result appears to be a raised circle as shown in Figure 3.

Recessed Circles

Figure 4

Pressing the Flop Horizontally and Flop Vertically buttons on the Infobar with the raised circle tile pattern selected produces what? A recessed circle. Look at Figure 4 if you don't believe me. If you have an application that can create image rollover effects, the raised and recessed circles make excellent buttons. I've made most of these patterns large so you can see the detail of the pattern. You can make the patterns smaller simply by reducing the size of the tile. Remember to use even number pixel sizes, however.

Offset Patterns

Figure 5

Until now, all the patterns we have seen look as though they were placed upon a grid. Sometimes it's nice to have the rows or column appear offset. In Figure 5, I borrowed the recessed circle from Figure 3 and centered it inside a 60 by 60 pixel square. I grouped the larger and smaller circles, made four duplicates (Ctrl D), and centered each of the duplicates over one of the four corners. I grouped the five circles (Ctrl G) and then made a duplicate of the square causing the duplicate square to now be on top of the five circles. Selecting the top square and grouped circles, I selected Combine Shapes > Intersect Shapes from the Arrange menu. This trims off all the portions of the circles that extend outside the square. The remaining square was filled 20% black. Each of the fractional circles contains a ¼ section of the circle. When the pattern tiles, the four individual sections of the circle align creating the offset pattern.

Tip: You can use this concept to create textured patterns as well. For example, imagine a pattern consisting of small rectangles arranged in a variety of angles. To make the pattern seamless, extend some of the units over the edge of the square tile. Make sure that if a portion of the pattern goes off the right side of the tile that the remaining portion comes into the tile on the left. Same thing with the top and bottom. This way when then pattern tiles, the portions of the pattern extending off the edge of the tile will appear continuous. Use Combine Shapes > Intersect Shapes to trim the excess.

Your Logo Here. And Here. And…

Figure 6

If you have a simple logo, you can use it as an elegant repeating background pattern as shown in Figure 6. The quail logo is in reality the letter Q set in Adobe's Critter font. A diagonal line extends from the top left to the lower right creating a continuous series of diagonal lines that fill the entire screen. This effect can also be combined with the technique from Figure 5 to create an offset logo pattern.

Page Filling Tiles

Figure 7

A little can go a long way when it comes to repeating patterns. To see what I mean, have a look at Figure 7. This pattern is only 20 pixels tall but extends beyond the width of most monitors. A series of alternating 2 pixel wide rectangles on the left create a section over which navigational buttons can be placed. On the right side of the page a single horizontal line extends off the page. The result of the repeating tile can be seen on the bottom portion of Figure 7. Because the number of colors is few and we've only used solid, Web safe colors, the image can be exported without the Error Diffusion export option resulting in a very small file size. You can also create vertical tiles using this technique.

Bigger is Better?

Figure 8

Patterns don't have to be ditzy. In fact they can be quite large. The pattern shown in Figure 8 is an ornament from Image Club Graphics' font, Rennie Macintosh Ornaments. The font used for the text is also Rennie Macintosh, named after the Scottish architect who was popular in the Arts and Crafts movement. A .5 point outline has been applied to the ornament and text and the fill has been set to none. An image like this can be scaled to full page and beyond without creating a file size that is too large. Often, using an Optimized 4-bit palette of 8 colors will create a sharp image while reducing the file size even more.

Dots Even Better!

Figure 9

If you want to create a large, subtle pattern tile, and you want to also work with the limited palette of 216 Web safe browser colors, here's a trick with which I've had excellent results. Apply a light gray fill to the image and place the image over a white background. Convert the image to a bitmap (Arrange > Make Bitmap Copy). Use the 24-bit palette option. From the Plug-ins menu select Bitmap Effects > Color Depth. (In versions prior to version 2 this is in the Utilities menu). Select To Mono (Diffusion) and press OK. This converts the solid gray to a series of tiny dots as shown in Figure 9.

Even though the image is now black and white, you can make it any two colors you want. With the 1-bit bitmap image selected, click a color on the screen palette with the left mouse button to change the background color, and select a color with the right mouse button to change the image color.

Tip: You can use this technique as well with any full-color, or grayscale, bitmap image to create a duo-tone effect.

The three rectangles on the left side of Figure 9, illustrate the dithering process. The left most rectangle contains a black to white linear fill which has been converted to a 24-bit bitmap. The middle rectangle has been modified to 1-bit, Mono (Diffusion). I used this to demonstrate how the diffusion process works. The third rectangle has been modified using the left mouse button to alter the background color and the right mouse button to set the fill color.

So now that you know how to create background tiles, what are you waiting for? Crank up Xara and crank out some cool background tiles. Being able to preview the tiles is fun and you can do this even if you don't have a Web site.

Final Tip: You can also see your pattern without having to open your Web browser. Import the tile image into Xara. Open the Bitmap Gallery (on the Infobar) select the pattern, then click Background. Tip Within a Tip: You can also use this technique for creating elements with invisible backgrounds for your Web site. Xara will anti-alias your images to the selected background.

More articles from Gary W. Priester

Creating Image Maps with Corel Xara 2

Optimizing Images for the Web with Corel Xara 2

Creating Animations with Corel Xara 2