How to create a website template by yourself

As you might remember, some time ago I needed to create a website and decided to customize a template for this purpose. After all I decided to make a research what are other ways to create a template-based website. So there’re a lot of resources that provide free website templates in Internet. One of them – freetemplatesonline.com here you can download plenty of free and premium templates. However, if this is a free (or premium) template, somebody else can also download it, and use it for his website. That’s why I’ve made up my mind to make a tutorial with the detailed description of creating a quality template from the very beginning. I hope it allows you to create your own templates in future, or to make some changes in the existing ones.

So, there’s an idea to create a template in dark shades with vector motifs. It should be of ‘Clean Style’, consist of the header and the main part in the middle of the page, navigation menus in the right and left bars. And these navigation menus will be the main adornment for the website. The footer will go down also in the middle of the page. Like this one:

Let’s start with the background. Let it be gray and with grain a little. Create a new document of 3×3px size, and paint some sectors with the help of Pencil tool as it is shown in the picture. Save it as Pattern and give it “Temp” name.

Create a new document of 766×770px size. Set Foreground color #1e1e1e and fill the background with it. Duplicate the layer and apply Noise filter.

Create a new layer, and fill it with the created Pattern “Temp”.

Pick up the layer where Noise was applied and reduce the opacity to 20%. You can also correct Curves to get rid of white spots.

The background is finished.

Now it’s time to mark the place for the content part. It’s supposed to consist a section with the services list and their description (the top side), the section with the partners list, their description and the title of the subsection (the bottom side). Generally the content part will be in the middle of the canvas, and the background will have another color.

Create a new set. Select an area of 420-439px size in the middle of the canvas, and fill it with #101010 color.

Click Subtract from Selection and deselect the upper half of the content part. Fill it with #151515 color. Deselect.

Type “Multilevel Business Solutions” in the top with the following settings: Use #5e5e5e color for “Multilevel” and #b8b8b8 color for “business solutions”.

A little bit lower place a text with the company’s description. Meanwhile it can be “Lorem Ipsum” text.

Place the partners’ banners below the text. I’ve used the following three gray banners:

Apply Stroke Blending option to one of the layer. After that copy layer style, then paste layer style for the other two layers with banners.

And at last, the descriptions for banners. Place the description text to the right. As the background is lighter in the lower part than in the upper part, so the text should be lighter also.

Now it’s time for logo and slogan. They will be placed above the content side.

Create the new set. Download Custom shape , and draw a white shape with 75×75px size in the upper part of the template, closer to the left edge of the content side.

Use the following Blending Options for the layer with shape.

Now add text “Prime Time” to the right of the logo with the following settings:

Add the following Blending Options for it (Drop Shadow as for the logo):

Under “Prime Time” text type the slogan for the company “take the best corporate deal” with the following settings:

Also add Drop Shadow in Blending Options with the same parameters as for the text layer and the layer with the logo.

Now footer. It’s very simple and placed under the content side. The footer consists of short service information with the sound management.

Create a new set. Type the text under the content side “Your Company.com C 2008 | Privacy Policy | Terms Of Use”. Use “#4c4c4c” color for “YourCompany.Com C 2008″ and “#6a6a6a” color for the rest text.

And place “Sound Control” below.

The main part is ready. Now the navigation menu. It will be in the form of six large color buttons, that are placed in threes on each side of the content side. Each of the squares will contain the menu title, the description, and the logo.

So let’s start. Create the new set. Create the new layer in it. Select the area of 150×150px size in the left upper side of the page. Fill it with #58a013 color.

Now choose the gradient, and draw a line from the top left to the right bottom part. Set Opacity 60% and deselect.

Set Foreground color white. Draw shape in the middle upper side of it using the custom shape that was created before with the 75×77px size. Set opacity 10%.

Add the text “ABOUT US” for the first link under it.

And also add Drop Shadow in Blending Options with the same settings that were applied before for the other layers.

And at last one more text layer for the short description of the link. This case it will be the text “short about us”. Also add Drop Shadow for it with the same settings as in the previous step.

The first navigation menu is ready. To create another one it’s enough to duplicate the set, move it for 155px below. Then Ctrl+Click on the layer with the background and fill it with #88b804 color. Next change the text in the layer with the menu title and description for “SERVICES” and “services overview” appropriately.

Duplicate the layer once more, move for 155px below, change the background color for #a9b803, change text layers for “PRODUCTS”, “quality standards”.

The left menu is ready. Make the right menu the same way. Use the following colors and texts:

The top right: #c6a700, “SOLUTIONS”, “business solutions”.

The middle right: #c77200, “PARTNERS”, “partners planing”.

The bottom right: #ca4400, “CONTACTS”, “contact information”.

The template is ready. All you need to do is to add the banners in the bottom. The banners show how they will look like on the site.

Create the new set. Choose any shapes you like, and draw four items using #3d3d3d color.

In the end I created a professional looking website template that can be used as a website for almost any business. It took me about 6 hours and no cost involved. Quite easy as for me, but I did some research and have read a deal of Photoshop tutorials before I start. So if you don’t want to read tutorials and dig at Photoshop you can go by easy way - purchase a ready professional template here starting at $65 and order template customization from TemplateTuning for affordable price. Or you can buy a ready website, which is already hosted and would be customized for you with lot of other great benefits for as low as $49/month from E-Turnkeys!

No matter which way you choose – now you know how to build a website with your own knowledge. Good luck!

This entry was posted on Wednesday, March 4th, 2009 at 11:30 AM and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.