Here is the final result:

 

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

And here's my result so far

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

.
Then hit the delete button on your keyboard .
Here's my result:

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.

I have used a red color just to show exactly what I have done. After you can see 50 percent of the Navigation layer is hidden (it's under Header layer). On the step 6 we will need to erase that hidden area.

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

right click on the selected area and choose Select Inverse (additional you can use this shortcut Ctrl+Shift+I) and then hit Delete button on your keyboard to erase the hidden portition of the shape now.

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

Gradient Overlay

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.

than right click on it, choose Make Selection, a little window will pop-up asking you if do you want to change the Feather Radius - leave it at 0px and hit OK. The selection is now defined, all you have to do is to hit the Delete button on your keyboard. And here's my result.
With this step the Navigation is finished now. Let's move now to the Slide Show Area

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)

and then apply the following layer styles : Gradient Overlay

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

and apply the following layer styles
Drop Shadow:

Gradient Overlay

3.Select ellipse tool and draw a similar shape.

and then apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 5.5px. This will serve as a background shadow.

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

and name this layer Shadow Box

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:

, all you have to do is to move it upwards to create a nice shadow effect for our box. Next you will need to populate it with some text Here's a preview

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

Stroke

For social media I have used an rss and a twitter icon from the web.

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

Gradient Overlay:

At the top of this shape place your logo, I have add a text - PSDTemplate.com The 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

Gradient Overlay


My Result

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

Comments (7)

Write comment

< Prev		Next >