Background images play a powerful, if subliminal role in creating the atmosphere at your web site. An airy background of light blue clouds invites visitors to take a deep breath, relax, and stay a while. A dark, noisy background combined with flashy images and a bright font color can produce a shock effect—where that is appropriate. Background images can also create margins—for example in Figure 1 I've created a left margin on a web page and used a fading blue to white background to highlight that margin.
CorelDRAW is one of the most versatile, powerful and easy to use tools available for creating backgrounds for web sites. The basic routine is that you create a cool image, and then export it to a JPEG file. And assign it as the background for your web page. That's the quick explanation, now for the details.
Any JPEG or GIF image can be used as a background tile for your web pages. Background images are tiled —that is placed side by side—for two reasons:
In general, background images should be subtle. There are exceptions to every rule, but busy, noisy, distracting background images detract from the message on your web page. On the other hand, attractive and unique backgrounds distinguish your page, and play a major part in creating a distinctive environment for your site.
In the first article in this series, I explained how to transform CorelDRAW illustrations into web-compatible GIF bitmap files. In that article, I emphasized that the GIF file format has the advantage of supporting interlacing and transparency.
For background images, interlacing and transparency are not normally appropriate. Background images should be small enough so that they download right away, and dont require interlacing. And transparency isnt useful for a background image - against which transparent images can be displayed. Also, JPEG files tend to handle color gradation better. Gradient fills and other fills tend to translate better to JPEG files. For all these reasons, youll generally want to export background tiles from CorelDRAW to JPEG (or JPG) files.
An easy way to create background tiles is to create a rectangle about 100 pixels square, and experiment with different fills from the Pattern Fill and Texture Fill dialog boxes. The possibilities are endless, as are the potential hours you can spend refining just the right background image for your web site.
You can disregard my advice to keep your background images subtle - like I did in Figure 2.
For this rather overpowering background image, I filled a tile with the Cell texture fill, and then exported that object as a JPEG file. Once I got that out of my system, I created a less offensive background fill using the Cement texture fill - as you will see in Figure 3.
Here are the basic steps for creating a background JPEG tile:
Tip: Many of the fills available from the Texture Fill dialog box make good background tiles if you increase the Brightness setting in the dialog box. Look for smooth, nebulous fills like clouds or rock surfaces. Avoid patterns with distinct images. The goal is to create a seamless-looking background like the one in Figure 4. You generally want to avoid making it obvious to visitors that your background is a tiled image.
Background tile images can be made to fill the entire width of a web page. These background tiles only tile vertically. In Figure 5, Im using a tile that is wide enough to fill the entire page. The result is a page background that fades from a yellow left margin to a white background for most of the page.
The fill tile in Figure 5 is 800 pixels wide - so that it fills an SVGA screen. To create tiles that fill an entire screen, I find it easiest to define page size as 800 pixels wide, and then create my image. Heres how:
Once youve defined an 800 pixel-wide page, you can create a CorelDRAW illustration to use as a background tile. In Figure 7, I created the background from a rectangle with a gradient fill. First I drew a rectangle across the 800 pixel width of the page. Then I used the interactive fill tool to fade from yellow to white, with the yellow confined to the left 15% or so of the page. I made sure no outline was applied to this rectangle.
After I selected my gradient-filled rectangle, I used the Export button and then the Export dialog box to save selected only (use the checkbox) as JPEG Bitmaps (JPG). In the Size drop-down menu, I selected 800 pixels wide, so the image would fill the whole width of a screen. The height of the exported rectangle can actually be anything - I used 6 pixels which is plenty, and keeps my file size (and download time) small. I also accepted the default setting of 16 fountain steps, which should pretty much preserve the smooth look of my gradient fill.
You can use the two techniques I described in this article to design web page background tiles: Either create a small rectangle that will tile vertically and horizontally to fill your page, or create an 800 pixel wide rectangle that will tile vertically. All that remains is to assign your JPEG file as a background image on your web page.
If you are coding your web page with HTML, use the ...
background = " "
.. HTML tag to assign an image to your page background. For example, to use the file Cement.jpg as a background image, the HTML syntax would be:
< body background=" Cement.jpg " >
If you're using FrontPage—my own favorite WYSIWYG web page design tool—just right click on a web page, and select Page Properties from the context menu. In the Background tab of the Page Properties dialog box, select the Background Image checkbox and use the Browse button to assign your background image file.
You never really know if your background pattern will look good until you assign it to your web page and see how it looks. But remember these tips as you go:
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
|Artwork and Brushes||Free Stuff||Training||Add-ons||Textures|
Copyright © 1995–2014 Unleashed Productions, Inc., All Rights Reserved.