How to make a custom website template yourself


Source: Website templates yourself
Source: Website templates yourself
If you have no money to order web design in a professional web studio, and you don't want to buy or download ready-made website design template you can try to create a custom website template yourself. All you need is 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 designtemplatesReady-made templatesmay be paid or free, they are able to suit any taste. However, they have a tremendous disadvantage – they are not unique. Even if you bought a template, it still may be bought by someone else.
What should you do if you want to have your own site but you don't have enough money to order website design in a professional web design studio? 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.
So where to start? The first step is thorough premeditation of the futuredesign of your site. This step may seem useless, especially if you want the inspiration to lead you. But this uselessness is only seeming. It is better to make the sketch of the future design on the paper, experiment with different variants and only then start working in the graphics editor.
The next step, as you may already have guessed, is drawing the custom website template in a graphics 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.
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). So the next step in the development of a custom website template is to distribute the design layout of the site between these cells or blocks. 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.
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.
What next? All you have to do is 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 anduniqueness.
Previous
Next Post »
Thanks for your comment