Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

Web Tutorials: Templates

Using pre-made web templates can be a great time and money saving approach to building a website. In case you are unfamiliair with them, web templates are essentually pre-designed websites where all you need to do is add your own content. All of the HTML and CSS coding has already been done.

There are galleries of free and Premium Web Templates on the Internet that you can download and use on your own websites. I recommend DreamTemplate - Web Templates because they offer a subscription service that provides for unlimited downloads of their professional website template collection for a full year for one low price.

The major short coming with any pre-designed web template is that no matter which template you choose for your website, there can be hundreds if not thousands of other websites that will look just like yours.

Rather than expound on the merits of using one of these templates as is, I thought it would be more helpful to provide some ideas on how to spend a minimal amount of time to customize the template. The overall layout won't be touched but with a number of cosmetic changes your website design can be uniquely yours, even if you use one of the more popular free website templates.

Website Template Images

Examine the source code of both the .html and .css files and find all of the images that were used.

Open each one of them in your graphics program and start looking at which ones are used for borders, backgrounds and headings. You're going to want to group them so that you make consistant changes to each group.

Images for Background

The trick to making this all work with a minimum of fuss is to save your edited images using the same file structure and names. Make a backup copy of the template for reference as well as to ensure any mistakes can be easily corrected. sample background

Let's start with the CSS Background Code. Find the image file that is being used which will be the best place to begin our template customization. I'll use the image shown above to show how easy it is to make dramatic changes with very little effort.

You don't have to have an expensive graphics program to make some dramatic changes to a web template background image. The changes below represent what can be done using Irfan View, a free graphics program.

One Click, Fast Background Image Changes

web template background image negative sample

Negative Images

One of the easiest ways to dramatically change a background image is to simply convert the image to it's negative. (If you are using Irfan, go to the Image Menu and look for Negative.)

The background image we have chosen for our example did dramatically change. However, changing an image to it's negative will be more dramatic on images that have more areas of light and dark colors like the sample below.

web template background image negative sample  web template background image negative sample

Grayscale Images

Let's try the next easiest way to completely change the look of the template background image - convert to grayscale. This too can easily be done with Irfan and will make your website template very different, very fast.

web template background image grayscale sample

Changing Colors

There are a variety of ways to completely change the color of a background image. There are tints, color washes, gradients, color replace and color enhancement. Keeping this simple, we'll stick with Irfan and use their color enhancement tool.

web template background image red sample  web template background image blue sample  web template background image green sample

The images above were changed simply by adding more red, blue or green. The most important aspect of changing the colors with the enhancement tool and change the color balance or other similar technique is to keep track of the color values.

By keeping track of the amount of red you added to your background image, you'll know how much red to add to the images used for headings and borders to create coordinating images.

To edit the color of a background image in Irfan View, simply go to the Image menu and select Enhance Colors. We used the Color Balance tool and changed the R (red), G (green) and B (blue) values. In our case, we added a single color in the amount of 106 to get each of our three new background images.

You can use this technique to create virtually any color simply by using a combination of colors, brightness, contrast, gamma correction and saturation.

If you need some help determining where and how background images are included in CSS Background Code we have a tutorial for that as well.

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming or MySpace related tutorials you would like to see.