Hello!

This is our first tutorial here on PSD-Coder.com. I hope you will enjoy all of our tutorials and in the same time I promise that here you will see high-quality tutorial, especially  web layouts (psd template) tutorials, posted regularly on this blog.

Now let’s start the tutorial.
Open Photoshop and create a new document (1020px by 1020px) as a background choose white

Then I will set “Foreground Color” to #c5e0dc and “Background Color” to #ece5ce (background and foreground color can be set up from the Tool Palette)

Next I will select “Gradient Tool”  and from here  I will select the first gradient

Now using the mouse I will drag a line from the top till the bottom (well middle of the page).

Here is my result:

First I will select type tool (T) and using Tahoma font with 24px and this color # 895b41 I will write Stylish, then for Template I will change the color to white. For slogan I have typed “by PSD-Coder.com”  using Tahoma font with 12px in size

Next I will create the search form. That’s why I will select “Rectangle Tool” and I will create a similar shape and I will apply this layer styles:

With type tool I will add some text
Then I will select “Rounded Rectangle Tool” and I will create a similar shape

And I will apply the following layer styles:

With type tool I will add a text.
Here is my final outcome for search bar:

First I will select “Rounded Rectangle Tool” and I will create this shape:

And I will apply this layer styles:

My outcome:

Then  I will select again “Rounded Rectangle Tool” and I will create this shape. This has been create to serve as a hover for the links in navigation

Next apply the following layer styles:

Now I will add some links:

For each link I have used this layer styles:

Next I will create Featured Area
I will select “Rectangle Tool” and I will create this shape (you need to place the layer for this shape, above the layer for navigation)

Then I will apply this layer styles:

Then using some images and some text I will fill up the Featured Area

The only thing which is missing here is an “Call to Action” button. To create it, I will select “Rounded rectangle Tool” and I will create this shape:

Then I will apply this layer styles:

Here is my final outcome for Featured Area

With type tool and some images, you can create it in no more than 5minutes
My output for Content area:

First select “Ellipse Tool” and using this color # c5e0dc create 2 shapes like mine:

The final step would be to add a copyright text

Here is my final result: