There are a huge number of website templates on the web, but they have one drawback - they are not unique. If the site owner does not want the design of his site to be repeated elsewhere, he can order a template from a professional designer or try to create it on his own.
It is necessary
Adobe Photoshop program
Instructions
Step 1
Creating your own template is not as difficult a task as it might seem at first glance. To work, you need Adobe Photoshop - of course, you need to have at least a basic understanding of working with it. But before you launch the program and start creating, you need to think over the future design in advance. The most convenient way to do this is to first get acquainted with at least a hundred ready-made templates, evaluate their advantages and disadvantages. Pay attention to the successful solutions of certain design elements. This does not mean that you will copy them, but it is quite reasonable to take some beautiful and convenient solutions as a basis.
Step 2
Based on the analysis of other people's templates and your own creativity, you should get an idea of how your site will look like. It is best to do rough sketches of the future design with colored pencils on ordinary A4 sheets. You should start working with Photoshop only after you have a clear idea of what exactly you are going to draw.
Step 3
Start Photoshop, create a new 1200x1600 project, set a transparent background. Turn on the Ruler tool, if it is not already on, to do this, press the key combination Ctrl + R. Turn on snapping: "View" - "Snapping".
Step 4
Now we need to divide the template with guides that will show the borders of its elements - sides, columns, etc. For example, you want to split the template so that there is a narrow column on the left, a wide column on the right to the right of the template, and there is room at the top for a header. This means that you need three vertical lines (the left border of the template, the right and the line between them) and a horizontal one, showing the bottom border of the header. To set a vertical line, move the cursor to the left ruler on the left side, press V and, while holding down the key, drag the line to the desired location. Do the same with the other two vertical lines. Horizontal ones are built in the same way, only the upper ruler is used.
Step 5
Find a background for your template, it should be a small, repeating pattern. Open it in Photoshop, select, copy. Then paste into the template as many times as you need to fill it with the background. Paste is done like this: "Edit" - "Paste", and then drag the background area to the desired location. It is even faster to insert an image using the Ctrl + V command. Add a background for the site header in the same way. You can use various gradient fills to create a background.
Step 6
Using the Pencil tool, draw the borders of the template, focusing on the lines already drawn (that is, on top of them). You have received the basis of the simplest template, now you need to supplement it with the necessary details - navigation buttons, menu lines, various decorating elements, etc. For more information on how to create buttons and other elements, read the respective articles on working with Adobe Photoshop.
Step 7
The template is created, now you need to cut it into pieces to insert them into the html page. Use the Slice Tool to cut. To find it, right-click the Frame tool and choose Cutout from the menu that opens. Now you can nest the template as desired, then save: "File" - "Save for Web". In the window that opens, select the file type: HTML & images, specify the file name: index.htm and save it. You will have an index.htm file and an images folder with sliced images.
