Hello and welcome to another tutorial here on trendyTUTS.com
For today I will show you how to design a psd layout using Photoshop. This template can be used for a personal website, for a business one or for anything else

If it’s the first time when you came on trendyTUTS, I would like to let you know that we have dozens of other cool website layout tutorials on our Website Layout Tutorials section. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!

Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion.

If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.

As a premium member you will be able to download all our Web Layouts (PSD and CSS/HTML version for each tutorial), all Premium Files and unlimited access to our PSD to CSS/XHTML Tutorials.

Click Here To See The Live Preview (CSS/HTML)

My final result:

To create this tutorial I have used:

• Origami Vector Pack
• Office Vector Pack

this files are from our Premium Files, available to our Premium Members.

Open Photoshop and create a new document (Ctrl +N).

Set the Foreground Color to #f6f6f6, then select Paint Bucket Tool and click one time on your document:

Next I will select Rectangle Tool and I will create this shape, somewhere on the middle of my document. As a color I have used: #af9f73. I will apply this layer styles also:

Next I will select Rectangular Marque Tool and from the Style (on the top) I will choose Fixed Size, I will add this dimensions 1020 by 14px and I will create this selection

Now download this pattern and add it on Photoshop. To add a pattern in Photoshop, go to Paint Bucket Tool, then from the top select Pattern. Next click on the thumbnail from the top, then click on that small arrow and here choose Load Patterns.

Once you have added the pattern in Photoshop, press Ctrl+Alt+Shift+N (to create a new layer) click one time on selected area with Paint Bucket Tool then press Ctrl+D to unload the selection. Proceed in the same way for the bottom of the shape. You should have something like this:

Step1 – Creating the logo and the navigation

First from our Premium Files available to our Premium Members I will use Logo Vector Pack and I will add a logo then with Type Tool I will write “my website”.

Next I will create the navigation. I will select Rounded Rectangle Tool with a radius of 5px, I will create this shape and I will apply this layer styles and with Type Tool I will add the links for navigation:

My result:

Step2- Creating Featured Area

To create the featured area, I will add an origami bird from Origami Vector Pack. This pack along with all files from our Premium Files are available to our Premium Members.

Using Type Tool I will add some text on the left side

To finish this area with Rounded Rectangle Tool, with a radius of 30px I will create this 2 buttons. For the first one (grey one) I have applied this layer styles:

And for the second one, the orange one, I have applied this layer styles:

Here is my result:

Step3- Creating the middle area

This area has been created at the beginning of the tutorial. All I have to do now, is to create some content for it. I will use again Origami Vector Pack, from our Premium Files, available to our Premium Members. and I will add some origami birds and with Type Tool I will add some text

Step4 – Creating the content area

To create the content area is really easy. I’ll use Type Tool to add the text, Rectangle Tool to create the testimonial area, some vector icons (Office Vector Icon Pack) from our Premium Files and Rounded Rectangle Tool to create the forms, from the contact form.
Here is my final result for this area:

Later Edit – I realized that I can enhance a little bit the navigation if I will add a shadow on the right and on the left side of the navigation.
To compare the results please look at the screenshots below:
1. Before

2. After

To create a similar shadow, you will need first to select Pen Tool and to create a similar shape:

Next we will need to apply a Gaussian Blur to that shape. Go to Filter>Blur>Gaussian Blur and apply a Gaussian Blur with a radius of 4.5px

Follow the same steps for the left shadow.
Here is my final result for this layout:

My final result:

Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTS.com.