How to create a trendy/colorful wordpress layout in Photoshop

Jul 4th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a trendy and colorful wordpress layout in Photoshop. If you’re thinking to redesign your blog, you can follow this tutorial. I will try to explain step by step how you can create a similar wordpress layout in Photoshop.

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)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

WordPress Layout Tutorial In Photoshop

To create this tutorial I have used:

Let’s start the tutorial. Open phootshop and create a new document. Dimensions: 1020 x 1710px

Select paint Bucket Tool and fill your document with #d9cb9e.

Step1 – Creating the top area

Select rectangle tool create this 2 rectangles.  For the rectangle on the back I have used this color: #d9b94c and for the top one I have used this color: #fed95d, then with Type Tool I will write “trendyTUTS” and I will apply this layer styles:

Here’s my result for logo:

Next on the right side I will create the search bar.  Select Rectangle Tool and create 2 similar shapes.  Dimensions 324x24px. For the back one I have used this color: #455352 and for the top one, this color: #738483.

Having Rectangle Tool selected I will create again 2 more shapes . Dimensions: 51x34px. For the back shape I have used this color: #962418 and for the top one, this color: #dc3522. With type tool I will add some text, and here is my result for the search bar:

Step 2 – Creating the navigation

First I select Rectangle Tool and I will create this 2 shapes. Dimensions: 949x54px. For the back shape I have used this color: #738483 and for the top one: #374140. For the top one I will apply this layer styles:

My result so far:

Next I will select Rectangle Tool and I will create this red shape: #dc3522

Then I will select Pen Tool and I will create this triangle (in order to create a nice 3d effect for our red shape). Color use for this triangle: #962418

With type tool I will add the links for navigation. Here is my final result:

Step 3 -  Creating the featured area

First I will select Rectangle Tool and I will create this 2 shapes. The first one (the bluish one) it will be used for Featured Area and the second one (white one) will be used later for the content area.

Next on the top of our bluish shape I will create another one. Dimensions 925×328, color: #567989, I will apply this layer styles, also:


You should have something like this:

Next on the left side I will add an image and with Ellipse Tool I will create 3 circles at the bottom. Basically we will integrate a jquery slideshow when we will code this template in XHTML. I remember you that you can download this template and you will be able to acces the PSD to XHTML tutorial only if you will become a premium member.

Because this will be a wordpress blog, we will need to create a sidebar also. We will create them as usual, on the right side. Select Rectangle Tool and create a similar shape. Dimensions: 275x400px, color: # b1ac2a, then apply this layer styles:

My result so far:

Next with Pen Tool I will create a triangle to have a nice 3d look. I have used this color: # 726f1b

I will select Rectangle Tool and I will create a yellow rectangle. Color: # fed95d

And again with Pen Tool I will make a triangle to create a nice 3d look. Color used: # 9d873e

With Type Tool I will add the text and some banner ads (because this area is for advertisment)
My final result for featured area:

Step 4 – Creating the content area

First I will select Rectangle Tool and I will create this shape. Dimensions: 925X417px, color: # ece9df

With Rectangle Tool I will create this red shape. Dimensions: 606x45px, color: #dc3522

As usual, I will select Pen Tool and I will create again a nice 3d look. Color used for this shape: # 9a291c, then with Type Tool I will add the title:

Wit Rectangle Tool I will create another one rectangle over the red shape. Dimension: 178x39px, color: # 374140

Then I will add an image and with type tool I will add some text

At the bottom of the article with Rectangle Tool I will create a shape and with Pen Tool I will create again a nice 3d look. Over this button with Type Tool I will write “See more”

On the right side I will create a sidebar again. I will use the same steps used to create the sidebar on featured area. I will use again Rectangle Tool (to create the horizontal and vertical rectangles) and with Pen Tool I will create again a nice 3d look.

With some image and Type Tool I will add the content for the sidebar.

In the same way I will create another post on our wordpress layout and at the bottom I will create a pagination
Here is my final result for the content area:

Step 4 – Creating the footer

Well to create the footer it’s quite easy. First I will add the logo (I have duplicated it) then on the right side, using Rectangle Tool I will create 2 shapes and using some icons from the free pack I will add a twitter and an rss icon.
Here is my final result for Footer

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

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

WordPress Layout Tutorial In Photoshop

Want to Download the Source File?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

If you’d like to know when we update this blog with new tutorials, you can follow us on twitter. If you have any questions, please don’t hesitate to ask them in your comments.

  • http://poliman.pl Strony Internetowe Kraków

    juicy :) great as usual

  • http://poliman.pl Strony Internetowe Kraków

    juicy :) great as usual

  • http://www.destinationgraphix.com/ Michael Davis

    Thanks for sharing this, looks good. Simple but great and has a good color combination too.

  • http://www.destinationgraphix.com/ Michael Davis

    Thanks for sharing this, looks good. Simple but great and has a good color combination too.

  • Tirath

    Excellent tutorial with excellent color combination
    you are genus
    your all tutorials are one of the best tutorials on net
    keep up good work
    god bless you :-)

  • Tirath

    Excellent tutorial with excellent color combination
    you are genus
    your all tutorials are one of the best tutorials on net
    keep up good work
    god bless you :-)

  • http://ifranzi.com iFranzi

    Bravo! great design and tutorial!

  • http://ifranzi.com iFranzi

    Bravo! great design and tutorial!

  • Mxl

    I just stumbled upon your website and it looks really good and seriously considering joining premium, I was wondering if you could code this or the other 3dish layout (business one), just wanna see one of these come to life.

    Cheers

  • Mxl

    I just stumbled upon your website and it looks really good and seriously considering joining premium, I was wondering if you could code this or the other 3dish layout (business one), just wanna see one of these come to life.

    Cheers

  • Aleon909

    Is there a tutorial to convert the psd of this layout into html? I clicked on the psd to html tuts link and i didnt see it anywhere. I would love to join premium, But I need to know I asked is available first.

    Thanks!

  • http://trendytuts.com admin

    Hello,

    We have converted this template in CSS/HTML but the PSD to HTML tutorial is not yet published. We will publish them in the upcoming weeks.

blog comments powered by Disqus