Hello folks! For today I have prepared another tutorial, but this time I will create a different type of tutorial. If until now I have created only tutorials for websites, today I will create a tutorial which can be used for your blog. This psd template has been designed to be used with WordPress but I think it can be used pretty well with other CMS platforms such as Drupal , Joomla, Blogger or any other blog platform
Here is my final result:

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)

My final result:

If you will follow all of my instructions step by step you can create a similar psd layout in maximum 10 minutes. I need to admit, that I have worked more than that to create this layout, because first I create a sketch on paper using a pencil, than I try to find the perfect color combination and next to blend everything together, but if I will skip all of these steps, the real time would be 10 minutes. So before to start working on this template, start your stopwatch!
Let’s start (the tutorial and our stopwatches )
Open Photoshop and create a new document (Ctrl + N)
On the left side I will add our logo (TrendyTuts) and on the right side with rectangle tool I will create this shape (527px by 43px). As a color I have used #f58c3e

I will divide this shape in two parts and on the top of this I will create a blue shape (#46afe0), using rectangle tool.
Using some vector icons from our free pack, I will add an RSS feed and a Twitter icon.
Here is my result:

Next with Rounded Rectangle Tool – with a radius of 10px

I will create a shape 937 by 1127px and as a color I have used #a7aa9d

Then I will apply this layer styles:

Next on the top of this shape I will create another one using Rounded Rectangle Tool – with a radius of 10px. Dimensions: 922px by 1108px and as a color I have used #cbd0bc

On the next step I will make sure that I have Rounded Rectangle Tool selected and I will create these shapes.

Next I will create the navigation
I will select Rounded Rectangle Tool and I will make this shape

Then using type tool I will create this drawing (first on the top left corner of the shape)

I will hit on my keyboard Ctrl+Alt+Shift+N (to create a new layer), than I will right click on the area created with Pen Tool and I will choose make selection

I will select Paint Bucket Tool and I will fill my selection with red

I will make the same thing on the right side

Now on my layer palette I will select the navigation bar and the shapes created with pen tool (push Ctrl and with your mouse select these shapes)
Once you have them selected, right click and choose Convert To Smart Object (to group them together)

Then apply this layer styles:

My result:

Next with type tool I will add the links for navigation:

Then I will select Line Tool and I will create this shape, used for navigation

With rectangle tool I will add this shape (it will be used for search) and I will apply this layer styles

I will use also the magnifier icon from our Freebies Section
My result:

The navigation is almost finished, but I will need to teach you another trick to make the navigation looks better.
Select Ellipse Tool and create this shape beyond the navigation (to do that you will need to make sure that the circle layer is underneath the navigation bar on your layer palette)
I will create the first shape on the left side – that black shape

Then I will apply this layer styles:

Here is my result:

I will proceed in the same way for the right side. Here is my final result for navigation:

Next I will create the content area, which is quite easy to create. First with Rectangle Tool I will create this shape, as a color I have used: #488eae

Then with rectangle Tool I will create a small shape on the left side, as a color I have used #5eb3d9

Now with Pen Tool I will make the same thing as I have done with navigation (I will create some rounded corners)

Then using Ellipse Tool I will create this shape beyond the blue shape (to do that you will need to make sure that the circle is underneath the blue shape on the layer palette). As a color I have used # 3a6a80

And using type tool I will add some images and some text.

Next I will create in the same way the sidebar, but instead of text I have used some banner ads for “Advertisement Area” and some images for Flickr Group.

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

Now stop your stopwatch and see if it took for you more than 10 minutes to create this layout.