Hello and welcome back for another tutorial here on trendyTUTS.com. Today I will create a nice and soft website layout. This psd layout can be used for a nature/environment website.

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members

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

To create this template I have used the following resources

• Vector Trees Icons & Weather Vector Icons from our Premium Files (available only to our premium members)
• Basics tools (rectangle tool, ellipse tool, line tool, etc) in Photoshop

Let’s start the tutorial.
Open Photoshop and create a new document (Ctrl + N) and as a foreground color choose: #e6e5e5

Next select Rectangle Tool and create a shape on the top of the document. Dimensions 1020 by 268px, color: #f7f7f7

Step 1 – Creating the top area

Having Rectangle Tool selected, create a similar shape. Color (blue) #3fadbf, dimensions: 340 by 4px.
I will duplicate this shape 2 more times and I will move them to the right. For the second shape I have used this color (green) #a3b76b and for the third one (that pinky one) #bf7678.
On the left side, a little bit down, I will add my logo. Here you should add your own logo. Here is my result:

Now on the right side I will create the navigation. With rectangle tool I will create this shapes and with type tool I will add the links.

For the Home tab I have used this color: #3fadbf, dimensions:  75 by 47px. No layer styles applied
For the rest of the tabs (About Us, Services, Portfolio, Contact) I have applied this layer styles

After you will apply this layer styles you should have something similar with me.
Next I will create a shadow at the bottom of the navigation. To create the shadow you will need to select Ellipse Tool, than create a similar shape.

Then go to Filter>Blur>Gaussian Blur and here choose a radius of 7px.
You should have something like this now

Now select Rectangle Tool and create a similar shape. Color: #ebebeb, dimensions: 546 by 42px. Make sure that you cover a small partition of the navigation tabs. Here is my result:

Step 2 – Creating Featured Area

With Rectangle Tool I will create this shape. Dimensions: 951 by 282px and I will apply this layer styles:

Next I will create another shape, just above the shape created on previous step. Dimensions: 930 by 262px, color: #c2cda6

Now from my stock images, I will add  this image in Photoshop:

As you can see the image it has a white background. In order to make it look good we will need to work a little bit on it. First I will make sure that on my layer palette, the image layer is just above our green shape.

Once you have the image layer above the green shape, right click on the image layer and choose “Create Clipping Mask”

You should have something like this now

As you can see  the image is perfectly integrated in our green shape, but it still does not look right. The image it has a bright white at the background it it does not look really nice on our green shape. That’s why I will apply a layer mask.
To do that, make sure that you have the image layer selected on your layer palette and then go to : Layer>Layer Mask>Hide All.
The image will disappear and a layer mask will be created in our layer palette. Now select Gradient Tool . Make sure that you have the default palette selected (black and white )and with your mouse drag a similar line. From left to the right

You should have something like this

As you can see on the right side we will need to create the same thing in order to have a nice image. To repeat the same step, don’t forget to apply the layer mask. Right click on that black thumbnail and choose “Apply layer mask” Then repeat the same step once again (but this time for the right edge of the image)
Here is my result:

Next on the right side, with Type Tool I will add some text

Then I will select Rectangle Tool and I will create this shape:

I will apply this layer styles:

And with type tool I will add some text.

Now the final step would be to add some buttons for the featured area.
I will select Ellipse Tool and I will create this shape:

And I will apply this layer styles:

My result

With Pen Tool I will create this triangle

When you have a triangle, right click in it (make sure that you still have Pen Tool selected) and choose “Make Selection”
Select Paint Bucket Tool, than on your keyboard click Ctrl + Shift + Alt + N (to create a new layer) and fill your selection with your desired color. Here is my result:

I will apply this layer styles:

I will create another button on the right side also. Here is my result for Featured Area

Step 3 – Creating the middle area

Well, this area it’s really easy to create. First I select Rectangle Tool and I will create 3 shapes. Each shape has the following dimensions: 308 by 221px. Colors: for the first shape (soft blue) #a1b7ba, the second one (soft green) #c1c7b0, the third one (pinky) #c2afaf

Now I will create another layer on my layer palette (to do so, press Ctrl + Shift + Alt + N on your keyboard) , then I will select a soft brush, I’ll make sure that the foreground color is set to white , I will reduce the opacity to 13% and I will increase the brush size to 200%, than I will gently push few times with the brush on each shape.
Here is my result:

Then I will select Ellipse Tool and I will create this shape (the black one, at the bottom of the rectangle)

and I will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 7px. I will make the same thing for the next 2 shapes, and here’s my result:

Next I will select Rectangle Line tool and I will add 2 lines on each shape. This line it will serve as a separator between the content and the title. Each line has this dimensions: 244 by 1px
And here are the colors. For the first one: first shape (the darker one) : #b2bdbf the second one #d3dbdc

The second one : first shape (the darker one) : #abb09f the second one #e0e5d1

The third one : first shape (the darker one) : # b09fa0 the second one # e3d4d5

Next with Type Tool I will add some text and from Premium Files I will use “Weather Vector Icons” and ” Vector Trees Icons” .
Here’s my result

Step 4 – Creating  the content area and the Footer

To create the content area, select first Rectangle Tool and create a similar shape:

Having Rectangle Tool selected create another shape at the bottom of the previous shape. This one it will be used for footer

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

Then I will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 50 px. I will select Rectangular Marque Tool and I will make this selection

I will hit Delete on my keyboard than I will push Ctrl + D (to unload the selection)
Then with Type Tool I will add some text, I will create some buttons in the same way I have do it for the Featured Area, them on the footer I will add some colorful rectangles in the same way like I have do it for Top area.

Here is my result for Content Area and Footer

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

Don’t forget to follow us on twitter if you’d like to know when we post new tutorials on this website! Also if you have some questions about how we have created this weblayout, feel free to ask them!