Get a Free Quote

Let's start : Create a new document - width 1020px and height 1500px and for background use a GREY color. I have used : #eaeaea.For logo - grab rectangle tool (U) and create a shape on the top. As you can see in my preview the top has an darker color (#1c1c1c), you will need to create the same thing. After that grab the type too (T) and write your desired text. Use the following layer styles:

Outer Glow

Gradient Overlay

I will move now to the header and to the top navigation. To recreate a similar thing you will need to follow me step by step.
Grab rounded rectangle tool - make sure you have a radios of 15px and create a new shape (name this layer Header) below the logo - mine has width - 934px and height 357px. To follow me exactly I suggest you to use a fixed size.

Here's a preview now:

Next I will color this shape with a blue color -# 1a8aca. Somehow we have created the header and now we will need to move to the navigation. If you will look again at my preview you will see that the navigation it's stand out. It's more visible and has a nice shadow. To obtain a similar effect you will need to follow those steps:

1<> Select the Header layer, right click on it and select Rasterize Layer

2.Duplicate the Header layer, and rename it to Header1 (turn off the visibility - we will get back to this step soon)

3.Select Rectangular Marquee Tool

4. Make sure you have the Header layer selected and with Rectangular Marquee make a selection, like I did

5.Now select again rounded rectangle tool, with a radius of 15. I recommend you to use this fixed sizes: width: 937, height 80 and name this layer Navigation.

6. Make sure you have selected the Navigation layer, right click on it and then select Rasterize Layer. (see step 1)

7.Select Rectangular Marquee Tool (see step 2)

8. Make sure you have the Navigation layer selected and with Rectangular Marquee make a selection, like I did

9. Applying the following layer style to the Navigation header:
Drop Shadow

You should have something like this:

Next add some text to the navigation. If you will look again on the final preview you will see that I have created some effects for selected menu and for hover area. I have choose Our Products to be the selected area and Client Area a hover zone.
To create the selected area, choose Pencil Tool (B), choose white as a color (make sure you have created a new layer and your brush is 1px) and then draw a straight line. Than with rectangle tool create a shape using this color : # 18778e
You should have something like this now:

For the hover area, choose pen tool and draw a rectangle.

Slide show area - Here you will need to follow me step by step again

1.Select the rectangle tool a draw a similar shape (width 1025px, height 253px)

2.Using rounded rectangle tool draw another shape (width: 1026px, height: 166px )

3.Select ellipse tool and draw a similar shape.

Here's my result

With this shadow move it downward to create a shadow effect for our slideshow are. I have added some text and few images to make it looks good. Here's my result so far

Now let's get back to the header. Do you remember that layer called Hader1? Turn it on, select it hit Ctrl+T (for transformation) and than using Shift+Alt+mouse (drag) make it a little bit bigger and move it downwards. Also don't forget to choose white as a color. Here's my result:

The header is almost done. We will need to add some text and some images to the right (to present our products). The text in header is quite easy to add, as well as images. To make that perspective view for images I have used Skew function (Edit>Transform>Skew). The demo button is from our Web 2.0 Photoshop Buttons

Let's move to the content are now! First we will need to add a foreground, select Rectangle tool , draw a shape(select white as a color) with the following dimensions width :962px, height: 876px and then apply the following layer styles:

If you will look at the preview you will see that I have dived the content are in 3 columns. On the left column I have added some articles, on the middle one I have used to spotlight some info's such as "About Us", "Testimonials" and "Why to choose us" To create a similar box to display this articles you will need to follow these steps:

1.Select Rectangle tool, and draw a shape, mine is 311px wide and 220px high.

2.Now select Ellipse tool and draw a shape like this one

3. Make sure you have selected the layer Shadow Box and then apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 15px. You should obtain something like this:

Let's move now to our last column. On this one I have created a quick contact form and I have added some social media icons and a twitter update.The quick contact was created using the Rectangle Tool (U) basically I have added few shapes and then I have applied the following layer styles:
Inner Shadow

Footer

Here grab again Rectangle Tool and draw a shape. Mine has the following dimensions - width: 1026px and height 60px and then apply this layer styles:
Drop Shadow

At the top of this shape place your logo, I have add a text - PSDTemplate.comThe last thing that I will need to do is to create a menu in footer. Grab the Rounded Rectangle Tool and create a shape with a radios of 6px using the following dimensions - width: 327px, height: 41px and then add the following layer styles:
Drop Shadow

With this layer selected, please move it upwards to hide its top rounded corners.
Here's my result:

Ttutorial is finished now. You shold have something similar with my preview now. I hope you enjoyed watching this tutorial and on the same time I hope that you have learned something new!

To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.

Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....

Here is the final result:

Comments (7)

...

Wow... this is awesome !

Mike , April 21, 2009

• 
• +9
• 
• 

...

nice !!!!

;]]] , April 22, 2009

• 
• +1
• 
• 

...

a really professional design

photo retouching , May 02, 2009 | url

• 
• +0
• 
• 

..

Very nice tutorial.I'm just confused with the header. When creating a new rounded shape with fixed sizes: width: 937, height 80.I have a very large rounded shape for the header.I don't understand properly why its so large. any ideas?

sebastien , May 10, 2009 | url

• 
• +1
• 
• 

evden eve nakliyat

super thankss

evden eve nakliyat , August 28, 2009 | url

• 
• +0
• 
• 

evden eve nakliyat

nice !!!!
thenkss

evden eve nakliyat , September 15, 2009 | url

• 
• -1
• 
• 

kraloyun

thanks admin very good

kraloyun , December 11, 2009 | url

• 
• -3
• 
• 

Write comment

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

Add Comment Preview