Creating Business Style Template Design

| Sunday, August 10, 2008

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.

Template Final Result

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.

3x3

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).

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.

Cirves

The background is finished.

Background

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.

Content Square

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

Partners Background

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

Multilevel Solutions Settings

Multilevel 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.

Content Settings

Content

Partnership for profit

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.

baner1 baner2 baner3

Apply Stroke Blending option (Layer>Layer Style>Stroke…) to layers with banners.

Stroke Baner

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.

Description settings

Description

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.

Custom Shape

Use the following Blending Options (Layer> Layer Style>Blending Options…) for the layer with shape.

Shape Drop-Shadow

Shape Outer-Glow

Shape Stroke

Shape Blending-Options

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

Prime Time Font

Prime Time

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

Gradient Overlay Text

Stroke Text

Drop Shadow Text

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

Take Deal Settings

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

Take Deal Text

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.

Footer Settings

And place “Sound Control” below.

image 32

Footer

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.

Green Square

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

Gradient

Green Gradient

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%.

Shape

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

About Settings

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

About Us

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.

Short about settings

Short about us

About Global

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.

Services

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

image 44

Left Menu

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".

Right Menu

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.

Shapes

You can see my final result here.

Template Final Result

Free download sources: .psd design with slicing, .html code with style.css, images, baners, shape.




0 komentar:

Disclaimer: Lots of Tutorial in this Blogs is from other site. If you dont like your tutorial in here contact me to delete it.