Get a Free Quote

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:

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:

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)

...

I really like this tutorial and I look forward to see the next one....

john , March 02, 2009

• 
• +18
• 
• 

Looks good

I like this tutorial and I can't wait to see the next ones. You have some really nice psd templates over here..Keep up the good work!

kevin , March 03, 2009

• 
• +8
• 
• 

It's a good tutorial

It's a good one, you should list the fonts you use in the end result as well.

PSDesignZone , March 05, 2009 | url

• 
• +12
• 
• 

Cool Design...

I was digging for a tutorial like this. Thank you for your time and for making available for free the psd source.

emilie , March 07, 2009 | url

• 
• +4
• 
• 

Nice colors

I really like the color combination. Good work!

danny , March 07, 2009 | url

• 
• +0
• 
• 

...

Oooh, very nice.

I really like the orange.

Simple and elegant.

Murray , March 12, 2009 | url

• 
• +1
• 
• 

Nice done

Verry slim design gratz. Could you give me the name of the font that you used for "your title goes here" plz?

djeeez , March 19, 2009

• 
• +4
• 
• 

Nice :)

Love the tutorial deffiantly learnt from it thanks :)

Adam , March 20, 2009 | url

• 
• +3
• 
• 

...

Nice work! The orange color works really well too! The design is sleek and simple. Thanks for sharing this tutorial!

Brochure Printing , April 01, 2009 | url

• 
• +2
• 
• 

Amazing

Amazing work man, one of the few tutorials with real professional designs. I learned alot, thanks!

Dinges , April 26, 2009

• 
• +1
• 
• 

I LIKED THE WEBDESIGN LAYOUTS OF PHOTOSHOP HONESTLY.

i am really very impressed with the Photoshop layouts really.I am also making my personal website layouts all on my own this is the best tool photoshop for weblayouts really.
i have made one and now seeing how the others are made.
B.P.S.SEKHON
tech expert.

BPSSEKHON , May 04, 2009 | url

• 
• +7
• 
• 

Very useful

Wow super cool, i like the webdesign solutions used in this tutorial. Thanks and keep the good work

DanM , June 11, 2009 | url

• 
• -1
• 
• 

Thanks for breaking the Rut

I got a bit of designers block and your tutorial sent me in the right direction. thanks for the help.

Eric Miller , June 12, 2009 | url

• 
• +1
• 
• 

Very nice tutorial !!

Thank you very much for this nice tutorial. You are helping us to make our designs a little bit better every time.

Nik , July 23, 2009 | url

• 
• +1
• 
• 

thanc

good tutorial i think

web tasarim , January 28, 2010 | url

• 
• +5
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

Add Comment Preview