Creating Web Page Background JPEG files

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.

Where Do Backgrounds Come From?

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:

1. An image large enough to fill your entire web page would take too long to download, and
2. Tiled images will fill your entire web page, regardless of how long your page is, or the width in pixels of your visitor’s browser window.

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 don’t require interlacing. And transparency isn’t 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, you’ll generally want to export background tiles from CorelDRAW to JPEG (or JPG) files.

Creating a Tiled Background JPEG Image

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:

1. Draw a small rectangle in CorelDRAW.
2. Select a fill—start with something subtle.
3. Make sure the selected rectangle has no outline assigned (right-click on the X at the top of the Color Palette).
4. Make sure your rectangle (with the fill) is selected, and then click on the Export button in the toolbar, and select JPEG Bitmaps (JPG) from the Save as Type drop-down menu.
5. Enter a file name in the File Name field and click on the Selected Only checkbox, and click on the Export button.
6. In the Bitmap Export dialog box, set the Horizontal and Vertical Resolution at 72 dpi (first choose Custom from the Resolution drop-down menu). Then set the size at something like 100 x 100 pixels. There are other options in this dialog box, but you can experiment with them later. OK the Bitmap Export dialog box.
7. The JPEG Export dialog box allows you to adjust compression and smoothing. Compression decreases file size, and speeds up downloading. The downside is more compression equals lower quality. Smoothing rounds off jagged edges. I suggest sticking with the default settings here unless you have some compelling reason to experiment with them.
8. Finally, OK the JPEG Export dialog box, and apply your background image to your web site. The tile I created in Figure 3 results in a reasonably subtle background image—and looks like Figure 4 when it’s tiled behind a web page.

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.

Creating a gradient-fill background 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, I’m 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. Here’s how:

1. Define page size as 800 pixels wide. From the CorelDRAW menu, you can select Layout, Page Setup and then choose Custom from the Paper drop down list.  Define width at 800 pixels. You do not need to set Pixel resolution here, you'll deal with that when you export your illustration to a JPEG bitmap file.
2. If you want to use this setting again, click on the Save Custom Frame button in Options/Size dialog box, and save this page setup (you can call it something like Web Width). In Figure 6, I’m defining a page layout to use for designing web background images.

Once you’ve 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.

Assigning a Background Image to a Web Page

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:

• Make tiles as small as possible to keep download time short for your web page.
• Use subtle colors, and avoid distinct patterns that will create a tiled look on your page background.
• For page backgrounds that fade from one color to another, use 800 pixel-wide images.
• Always remove outlines from background tile images before saving them as background tiles.
• Export your background image to a JPEG file—if you have kept your tile size small, little or no compression should be necessary.
• Experiment, experiment, experiment.  And have fun designing a creative web page background!
• Feel free to start with any of the JPEG images below, and use them as page backgrounds:

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

Clipart, Fonts & Other Artwork			Training	Add-ons	Textures
Bonus Content Packs Spring Unleashed V1 Summer Unleashed V1 Sports Unleashed V1 Fall Unleashed V1 Halloween Unleashed V1 Thanksgiving Unleashed V1 Winter Unleashed V1 Symbols Unleashed V1 Fruit Unleashed V1 Signs Unleashed V1	US Flags Unleashed V1 Music Unleashed V1 Icons Unleashed V1 Buttons Unleashed V1 Stick People Unleashed V1 Computer Unleashed V1 Sports Unleashed V2 Weather Unleashed V1 People Icons Unleashed V1 World Flags Unleashed V1 Clipart Unleashed	1200+ CorelDRAW Brushes Vehicle Templates for Vehicle Wraps Free Fonts 1000 Seamless Stripes Stick Figure Volume 1 Ult. Flames Mega Pack Ult. Flames Mega Pack 2 Ult. Ornaments Mega Pack 1400 Seamless Textures	CorelDRAW X6 Training DVD CorelDRAW X5 Training DVDs CorelDRAW X4 Training DVDs Click 'n Learn Tutorials CorelDRAW 0-60 Training Jeff Harrison's FUNdaMENTALs CorelDRAW Training Session On-Site Training Session Phone Consultation CorelDRAW Unleashed Magazine	Design Base Automation Tool for CorelDRAW X3-X6 ROMCat Resources Docker QR Codes Docker EZ Metrics Smart Designer CoCut Pro	Wood Metal Stone Terrain Fire & Ice Ground & Plants Floor, Wall & Bricks Fiber Tile & Path Marble Crystals

Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.