Hello!

This is our first tutorial here on trendyTUTS.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.

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)

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:

Step1 – Creating the navigation and the search bar

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:

Step2 – Creating the navigation

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

Step3 – Creating the content area

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

Step4 – Creating the footer

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

The final step would be to add a copyright text

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

Well that’s all. The layout is finished now. I invite you to bookmark this page or to subscribe to our RssFeed or Twitter, because we will publish regularly web layout tutorials on trendyTUTS.com.com.