Graphics Unleashed
Vehicle Templates for Vehicles Wraps CorelDRAW Brushes CorelDRAW Books and Videos
Free Graphics Blog Seamless Textures Vector Clipart for CorelDRAW and Illustrator
CorelDRAW X7 Info | CorelDRAW Unleashed | Seamless Textures Unleashed | Vehicle Templates Unleashed

Creating Web Page Background JPEG files

CorelDRAW X6 Unleashed Multimedia Training DVD

1200+ Artistic Media Brushes for CorelDRAW X3-X6 and Free Video Tutorials

Textures Unleashed - Seamless Bitmap Tiles for CorelDRAW, Corel PHOTO-PAINT, Adobe Illustrator, Adobe Photoshop, Bryce, 3DS Max and more

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.

Figure 1

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.

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.

Figure 3

Figure 4

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.

Figure 5

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.

Figure 6

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.

Figure 7

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:

bg-fade.jpg (868 bytes)

bg-blue.jpg (1450 bytes)

cell.jpg (2025 bytes) cement.jpg (1611 bytes) clouds.jpg (8652 bytes) panel.jpg (2214 bytes) cell2.jpg (2025 bytes) clouds2.jpg (8652 bytes)

Tutorials by David Karlins

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

Complete Idiot's Guide to Flash Tutorials

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

Graphics Unleashed

Last Updated Saturday, February 09, 2013

Our Favorite Products

Roboform for Passwords · GoodSync for Backup · MysticThumbs and ROMCat · Save Money With RingCentral · iolo System Mechanic Pro · ZoneAlarm Security Suite · AfterShot Pro · WeBuilder · SocialOomph · Feedblitz · Paymo

Shop at Corel eStore Shop at Amazon

HDMI Cables · USB Cables · Surge Protectors/USB Wall Plates · Dual USB Car Charger · FM Transmitter for Tablets/Phones

Artwork, Brushes & Add-Ons Free Stuff Training Unleashed Sites

Bonus Content Packs
Clipart Unleashed
1400+ CorelDRAW Brushes
CorelDRAW Stitch Brushes
QR Codes Docker
CNC Software

Vehicle Templates-1000s free
Signs by Design
Clipart deSIGN
Design Base (free)
ROMCat | eCut
CoCut Standard & Pro

Cave Creek Geek
Graphics Unleashed Blog
Free Publications

CorelDRAW X6 Training DVD
X5 DVDs | X4 DVDs
Jeff Harrison's FUNdaMENTALs
CorelDRAW Training | On-Site
Hire the Geek

CorelDRAW Unleashed
Graphics Unleashed Blog
Seamless Textures Unleashed
Vehicle Templates Unleashed
Web Design Solutions Unleashed

Seamless Textures Collections
Volume 1: Wood · Volume 2: Metal · Volume 3: Stone · Volume 4: Terrain · Volume 5: Fire and Ice · Volume 6: Ground and Plants · Volume 7: Floor, Wall and Bricks · Volume 8: Fiber · Volume 9: Tile and Path · Volume 10: Marble · Volume 11: Crystals · Volume 12: Technology · Volume 13: Metal II · Volume 14: Diamond Plate · Volume 15: Circuits · Volume 16: Aliens · Volume 17: Floor & Wall · Volume 18: Tiles · Volume 19: Brick · Volume 20: Wood II · Volume 21: Technology II
Unleashed Productions 21 Year Anniversary
Follow Subscribe to Blog Facebook Twitter Google+ LinkedIn YouTube Amazon Corel Subscribe

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