Hello and welcome to another tutorial here on PSD-Files.com. Starting from today we will publish at least one tutorial per week and the source file of the tutorial it will be made available for free. What we ask you in return is to share our website on your Facebook wall, Twitter, Google + or any other social bookmarking site you like. By promoting us you will help we grew. As more as we grow, as more tutorials and resourcehttp://psd-files.com/wp-admin/post-new.phps we will made available for free.

Besides our tutorials we have countless of PSD files made available for free on our PSD files gallery. You can download each and every file without registering, just browse, download and enjoy!

If you have some nice PSD files and you will like to share them with our growing community, you can do this anytime by sending them using the sending page on our website. Just fill all the forms as they are and if it passes our editorial review we will publish your file in no time.

Here is a preview of my final result:

The resource used on this tutorial are the following (free to download)

PSD Logo Pack
PSD Web Icons
Carbon Fiber Pattern

Step1 – Creating the top area – Logo & Navigation

Open Photoshop and create a new document, I have created mine of about 1020 x 1530px.
Grab Rectangle Tool and create a shape like this on the top of your document:

Select Rounded Rectangle Tool with a radius of about 5px and create this shapes:

Next, for the first shape (the smaller one) I will apply this layer styles:

For the next shapes I will apply this layer styles:

My result

Next, download these nice patterns, load them on Photoshop. On the layer pallet, on the bottom click on the buttons shown on the screenshot below, load them on Photoshop and apply them only for the area on created on the top. Here is my result:

With type tool (T) I will add some text for logo and navigation

For the logo I will use a nice shape that will enhance this area, from our PSD files gallery I will choose this file: PSD Logo
Here is my final result for this area:
 

Step 2 – Creating the navigation

To create the navigation, I will select first Rectangle Tool, I will make a large rectangle and I will apply this layer styles:

I will select ellipse tool and I will make this shape at the bottom of the slideshow

Next I will apply a Gaussian blur of about 2-3px to the shape I’ve just created. To apply a Gaussian Blur go to Filter>Blur>Gaussian Blur. You can drop the opacity a little bit as well.
To finish up this area, with Ellipse tool I will create 2 circles on the left and on the right side of the shape and I will add an image.
Here is my result:
 

Step 3 – Creating the content area

To make this area I will make use of Type Tool

For the yellow buttons on the middle I have used these blending options

As you can see, for this area, some icons are a must, that’s why I will use again some nice icons from our PSD files gallery. I will just use that big search bar and I will look for some nice icons.

For this layout I have used this nice set of WEB PSD Icons (free to download, of course). To use them on this layout, I download them, unzip the archive and I open the PSD file. All I have to do is to drag and drop them on my document.
Here is my result after I have added the icons:

I think the icons are making a difference between a nice and well-crafted web layout.

Step 4 – Creating the footer

To make the footer is really easy. To make the background we will use the same method we have used to create the top area, then I will use the same logo, with type tool I will add a phone number and using rectangle tool I will create newsletter forms
Here is my result for footer:

Here is a preview of the final web psd layout

Well the tutorial is finished now. If you like our create, don’t forget to, retweet add it on your Facebook wall and share it on your Google+ friends. It will help us a lot and in the same time it will motivate us to share other tutorials and PSD source files.

If you have some nice PSD files (icons, web layouts, web elements, etc.) don’t forget to share them with us. You can send them anytime, by using our sending page located here.
If you have any questions regarding this tutorial, you can ask them using the comment form below.