Now let's start (don't forget to start your stopwatch also):
To achieve the same effect like I have in this tutorial please create a new canvas: width: 960px, height:900px using a white background.

At the top of your canvas create a rectangle about 961px width and 95px height, having a darker color (I used #303123)

After that add a logo and create the navigation. For the logo I have used a special font Bauhaus93 but this is a commercial one and I don't have the right to distribute it. Anyway you can find some really nice free fonts on this website: DaFont.

For navigation use a Grey color for the text and for the hover effect I have created a shape (using rounded rectangle tool) and I have applied the following blending options:

Color Overlay:

Outer Glow:

You should obtain something like this:

Let's go to the header now:
With rectangle tool create a new shape with the following dimensions: Width: 960, Height: 234 and use the following blending options:

Inner Glow:

Gradient Overlay:

For gradient overlay I have used those 2 colors: #fc6200 and #ff9e40

Note: To create a shape with a fixed size you will need to select the rectangle tool and once is selected on the top bar select rectangle options and here choose Fixed Size.

Rectangle options:

Here is my result:

Now add a presentation image, some text and some auroras effects (might be vectors or brushes). You can find some really nice brushes or vectors on this websites: VectorMix.com - free vectors or BrushMix.com - free brushes for illustrator, photoshop or gimp.

Here is my result for header:

Now let's move to the main area of the template. (where we will add the main content).Create a new shape (using rectangle tool) with the following dimensions: width:9600px, height 530px, and apply this blending options:

Gradient overlay:

Detailed Gradient overlay:

After that please add an welcome message with 2 paragraphs and at the bottom 3 columns with text. On our final step we will need to add the footer. Here create a new shape (as color choose #303123) using rectangle tool with this dimensions: width:960px, height:46px. To populate the footer I have added the logo and I have typed a copy write information.

Full preview for this psd template:

Now stop the timer and see if you have created a similar layout in less than 10 minutes. If the answer is yes, you can prepare for another and more complex tutorial....to see which would be the next one, please take a look on our Free PSd Templates Section.

And the the next tutorial will be Wordpress PSD Template Portofolio
On this tutorial I have used more advanced techniques that I will share with you soon! Stay tuned...

Comments (15)

Write comment

< Prev