How to Design Website Templates by Yourself

 

Template design plays a major impact for the whole of a website. An attractive template will draw users to your website, even if your products or services are not what they are looking for. Vice versa, an ugly template is bad for the eyes and push users away.

The simplest way to have a good and attractive web template is by hiring a professional web designer, but it will cost you some money.  Or you can download ready-made website design template if you want to save money. Beside those two choices, you can always design your own custom website template yourself. It will only take some time and patience.

Website design may be nice or plain, expensive or free, exclusive or template. Nowadays there exists a great variety of website design templates. Ready-made templates may be paid or free, they are able to suit any taste. However, they have an immense weakness – they are not unique. Even if you bought a template, it still may be bought by someone else.

You may and you should try to create your own custom website template for your site. A template is a kind of a draft of page design for your web project. Later you will fill it with necessary content.

Where to Start

1. Think, ponder and make sketch of the future design on the paper. Also, experiment with different variants and only then start working in the graphics editor.

2. Draw the custom website template in a graphic editor. Which editor to choose? It is the matter of personal taste and preferences. The most widespread graphics editors is Adobe Photoshop, therefore we will consider creation of a custom website template by the example of this editor.

3. Distribute the design layout of the site between cells or blocks. The pages of your future site will consist of table cells (if you use table-based website layout) or block (if you prefer div-based web page layout). For that you should divide one solid image into several parts. The number of parts equals the number of cells or blocks.

Adobe Photoshop software provides you with a special tool for slicing large images into smaller pieces – Slice Tool. This tool allows you to slice the image into the required number of pieces as easily as you cut a sheet of paper with scissors. While slicing, you should take into account that being filled in with text some table cells or blocks on the site page may “stretch”. Therefore you should slice the parts of the image for these cells in such a way that they do not make an impression of tiles when they are copied.

4. When the image has been sliced into the required number of parts, you should save them. It is very easy to do it in Adobe Photoshop. You should choose Save for Web&Devices option in the File menu. A dialog box will open. In this dialog box you should choose the file type (HTML&Images), specify the file name (index.htm or index.html; html extension is more preferable) and save this file into the root directory of your future site. If you have done everything correctly, the corresponding file index.html and a directory named images will appear in the root directory. All sliced pieces of the image will be saved into the images directory.

5. Edit the index.html file in such a way that there are no white stripes between the pictures. To avoid this problem you should determine which cells will have a background image, which cells will stretch or merge together. Do not give way to despair if you haven’t managed to slice the required image perfectly from the first time. Maybe you will need several distressful attempts. But as a result your custom website template will meet all your requirements, and the site itself will gladden your eye with its originality and uniqueness.