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.

To create this tutorial I have used the following resources:

-Free Vintage Photoshop File (free to download)

My final result:

Let’s start the tutorial:

Step 1

Open Photoshop, create a new document (Ctrl +N) and use the following dimensions 1020 by 1460.

Set the foreground color to #bcb49d, then select Paint Bucket Tool and click one time on your document to change the color, then go to Filter>Texture>Grain. Here use the following settings:

Step 2

Select Rectangle Tool and create this shape on top. As a color I have used #61544a

With Pen Tool create this black shape:

Then go to Filter>Blur>Gaussian Blur and apply a Gaussian blur with a radius of about 6.5px. Proceed in the same way for the right side. You should have something like this now:

Step 3

Select Rectangle Tool and create this shape. For my shape I have used this color: #e5d2ac

Next with Pen Tool I will create this shapes:

Step 4

I will select Rectangle Tool and I will create this shape and I will apply this layer styles:

Because this is a shape (a vector object) to apply the next step I will have to rasterize this shape first. To do that, locate the shape on your layer palette, right click on it and choose Rasterize Layer

Once the layer is rasterized, select Eraser Tool, with a brush of 7px and start erasing each corner of the shape.

We are doing this because we need to create a vintage style for our navigation. After you finish this, with type tool add the links for the navigation bar. Here is my result:

Step 5

On this step we will create featured area. With Rectangle Tool I will create this shape. Color used #e6e0d4:

I will select Ellipse Tool and I will create this black shape

And I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 4px. My result:

With Type Tool I will add some text:

On the right side I will select Pen Tool and I will create this shape.

I will go to Filter>Texture>Grain and I will use this settings:

My result:

Next from Vintage Photoshop (PSD) File I will select business man and I will add it on my document. All you have to do is to open the vintage Photoshop file and to drag and drop the business man on your document. Here is my result:

This  area is finished now. Let’s head up to create the logo.

Step 6

First I will select Ellipse Tool and I will create this circle. As a color I have used #8d7d5d

Next I will use again Ellipse Tool but this time I will create a orange circle, smaller then the first one:

Having Ellipse Tool still selected I will create a white ellipse on the top of the 2 circles.

Once you have created this one, apply a Gaussian Blur for it (Filter>Blur>Gaussian Blur) with a radius of 20px. Set the blending mode to Overlay.
My result:

Next on the top of all this circles I would like to make a circle with dashes. You can easily do this on Illustrator, but Photoshop does not have a special tool to create it, that’s why we will have to improvise. First select Brush Tool (B), then open the brush palette. You can do that by pressing F5 on your keyboard or from Window>Brush. Once you have done this, apply the following settings to your brush palette:

Now select Ellipse Tool, but this time make sure that you select paths, instead of shape layers (please see the screenshots)

Once you have done this, Pres Ctrl+Shift +Alt+N to create a new layer the  you can create another circle. As you can see this one is not filled. Right Click on it and choose Stroke Path. A window will pop-up, select Brush, hit OK,

then push Delete on your keyboard. You should have something like this now:

Next with Type Tool I will write: Pfolio (font used Bauhaus 93) and I will apply this layer styles:

My result:

The logo is finished, let’s move to the content area now…

Step 7

I will select Line Tool and I will create this 2 lines, then with Type Tool I will write “Latest News From Blog” using Neues Bauen font. I have applied the following layer styles for the phrase “Latest News from the blog”:

Next, on the line from the left side of the text, I will add a Layer Mask (directly from Layer Panel), I will select Gradient Tool, I will make sure that the default palette is selected (black & white) and I will draw a line from left to the right.

My result

I will proceed in the same way for the line on the right.
Here is my result:

Next with Pen Tool I will create this 2 triangles

Then I will apply a Gaussian blur (Filter>Blur>Gaussian Blur) of about 10 px. My result:

On the top of this 2 triangle, I will select Rectangle Tool  I will create a shape and I will apply the following layer styles:

Then using a stock image I will add it over my shape. Here is my result:

I will select Rectangle Tool and I will create this shape. On the Layer Palette I will right clock on it’s layer and I will choose Rasterize Layer, then I will select Lasso Tool and I will make a selection on the left and on the right side of the shape. I will hit delete on my keyboard and I will proceed in the same way on the right side, then I will lower the opacity and I will apply this layer styles:

My result

In the same way I will create 5 new thumbnails

Step 8

With Rectangle Tool I will create this shape:

With Pen Tool I will create this shapes:

With Type Tool I will add the text
Here is my result:

And my final result:

The tutorial is finished now. Stay tuned because more tutorials will come pretty soon! In the meanwhile you can download some other cool psd resources from our website PSD-Files.com