Quick links to procedures on this page:

Creating Web Page Backgrounds

Corel Painter lets you create interesting, effective Web page backgrounds.

Designing Backgrounds

One secret to designing good backgrounds for your Web pages is to make them subtle and unobtrusive. This is particularly important if the background is used behind text. You can lighten patterns by using the Edit menu Fade command, to make them more suitable for displaying behind text.

Choose Edit menu Fade to lighten the pattern.

Controlling Background Color

Using a background color closely matched to your background image takes no additional download time and creates a pleasing transition. For example, suppose your page loads a dark green seamless background tile. The tile takes a little time to download. While it’s loading, the browser displays the page, using the page background color (which, if not explicitly defined, is usually gray or white). This can cause a jarring visual transition. Depending upon the text color used, it can even make a page impossible to read until the background image has finished loading.

Using HTML, you can achieve a solid background color for a page, table, or Cascading Style Sheet (CSS) element. Although Corel Painter can’t assist you with actually setting the background color in your HTML code, you can use Corel Painter to determine the hexadecimal format of a color, which is used in HTML.

To display the current color’s RGB values in hexadecimal format

1

In the Colors panel, click Color Options button , and choose Display as RGB.

Using Tiled Backgrounds

When a background image is smaller than the boundaries of the display area for a page, table, or Cascading Style Sheet (CSS) layer, Web browsers automatically repeat the image, effectively creating a tiled pattern. Corel Painter makes it easy to create tiling background images for use in Web pages.

The CSS features in modern browsers let you apply background tiles to more elements than ever before. In the past, you could apply them only to a page itself, or possibly to a table. Now, with CSS, layers or block-level elements — anything you can display on its own line in traditional HTML layout — can have a background image. Since authors are no longer limited to using tiled backgrounds for just pages, possibilities open up for the creative use of tiles behind such elements as borders, call-out boxes, or sidebars.

You can use any image or selection to define a pattern. An image designed for use as part of a pattern is normally created so that it tiles seamlessly. That is, the eye should not be able to distinguish the edges between tile repetitions. Corel Painter has features that can help you create seamless tiles, which you can then use as interesting Web backgrounds. For more information, refer to Creating Seamless Patterns. For information about creating, editing, saving, and filling with patterns, refer to Patterns.

The Glass Distortion effect, the Super Soften effect (with the Wrap Around check box enabled), and most of the Tonal Control effects preserve the seamless quality of the pattern. Some effects, such as Apply Surface Texture, can result in a noticeable seam, so experiment.

Example of using seamless and non-seamless tiles in a pattern

A way to partially avoid seams that occur with effects such as Apply Surface Texture is to apply the effect several times at lower strengths (by reducing the Amount slider). Shift the pattern a little (using Shift-Spacebar) between each application. This tends to “distribute” the seams and make them less noticeable.

Tile dimensions should be as small as practical, but should probably never go below 20 x 20 pixels. If a tile is too small, it actually takes the browser longer to render it over a large area.

When you’ve finished creating your tile, save the image in RIFF format, in case you must work with it later in Corel Painter. Then, save it in either JPEG or GIF format for later use on the Web.

Web backgrounds should, ideally, be saved as GIFs, with as few colors as possible, to reduce file size. You can also use JPEGs, but JPEGs often have larger file sizes. As a rule of thumb, any background tile over 20 KB is probably too large. For more information about saving an image in GIF or JPEG format, refer to Saving and Backing up Files.

Creating Tiles with the Make Fractal Pattern Command

Another easy way to design seamless tiles is to take advantage of the neat effects you can create with the Make Fractal Pattern command. Make Fractal Pattern is a pattern generator that creates organic patterns, which can make interesting background tiles. The patterns it generates can be filled with color and even enhanced with a paper texture.

For more information about the Make Fractal Pattern command, refer to Creating Fractal Patterns.

Color Overlay, the Watercolor brushes, and Cloning are other options you can apply to a pattern. Beautiful, complex effects can also be achieved by applying Glass Distortion to a pattern created with Make Fractal Pattern.

Was this page helpful? Send feedback.

Copyright 2012 Corel Corporation. All rights reserved.