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 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.
You can see the result of my work - this template. It took me 8 hours to draw this template. You wiil be able to recreate this template in 2 up to 4 hours using my instructions and possessing the basic experience of work in Photoshop.
So, there’s an idea to create a template in dark shades with vector motifs. It should be of ‘Clean Style‘, consists of the header and the main part in the middle of the 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.
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 (Edit>Define 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 (Filter>Noise>Add Noise).
Create a new layer, and fill it (Shift+F5) with the created Pattern “Temp”.
Pick up the layer where Noise was applied and reduce the opacity to 20%. You can also correct Curves (Ctrl+M) 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 (Layer>New>Group). Select an area (M) 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 (Ctrl+D).
Type (T) "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.
Tip: You may visit Lipsum.com to know more about "Lorem Ipsum" text and to copy it from there.
Place the partners’ banners below the text. I’ve used the following three gray banners (free download baners). Just open them in Photoshop and drag do your working PSD file.
Apply Stroke Blending option (Layer>Layer Style>Stroke…) to 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 (Layer> Layer Style>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 (M) in the left upper side of the page. Fill it with #58a013 color.
Now choose the gradient (G), 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. To make things more simple you can just download those banners for free here.
You can see my final result here.
Free download sources: .psd design with slicing, .html code with style.css, images, baners, shape.
0 komentar:
Post a Comment