Create a colorful wordpress layout using Photoshop in no more than 10 minutes

May 4th, 2010View Comments

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)

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.

My final result:

Trendy Cool and Colorful WordPress Theme Tutorial In Photoshop

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 :P )
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)

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.

Trendy Cool and Colorful WordPress Theme Tutorial In Photoshop

Want to Download the Source File? (CSS/XHTML included)

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.

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

  • http://www.thecommadesign.com Kevin

    That’s an awesome tutorial. Thank you for your hard work! It will be great also if you can share the layout source file :)

  • http://www.thecommadesign.com Kevin

    That’s an awesome tutorial. Thank you for your hard work! It will be great also if you can share the layout source file :)

  • http://www.designeru.com F.Kang

    Man that’s one of the best tutorials that I have read! I have bookmarked this website because I think your tutorials are pretty well explained and I really like each and every layout tutorial posted on this website. By the way…do you have scheduled any tutorials on how to transform this psd in css/xhtml? Thank you so much!

  • http://www.designeru.com F.Kang

    Man that’s one of the best tutorials that I have read! I have bookmarked this website because I think your tutorials are pretty well explained and I really like each and every layout tutorial posted on this website. By the way…do you have scheduled any tutorials on how to transform this psd in css/xhtml? Thank you so much!

  • Amanda

    Great tutorial, I really like the outcome. When we can expect psd to html tutorial?

  • Amanda

    Great tutorial, I really like the outcome. When we can expect psd to html tutorial?

  • admin

    @F.Kang, @ Amanda – Thank you so much for your kind words. Yes we are planning to code each and every tutorial created but first we will focus to increase our inventory, then every web layout will be coded. A tutorial on how to code each psd layout will be posted in this website, of course!

  • admin

    @F.Kang, @ Amanda – Thank you so much for your kind words. Yes we are planning to code each and every tutorial created but first we will focus to increase our inventory, then every web layout will be coded. A tutorial on how to code each psd layout will be posted in this website, of course!

  • http://www.dobox.com/ Bruce

    That’s an awesome tutorial. Thank you for your hard work! It will be great also if you can share the layout source file :)

  • http://www.dobox.com/ Bruce

    That’s an awesome tutorial. Thank you for your hard work! It will be great also if you can share the layout source file :)

  • http://grafisia.com habieb

    you’ve created a cool WordPress layout, I am waiting for the HTML tutorial, thanks for sharing

  • http://grafisia.com habieb

    you’ve created a cool WordPress layout, I am waiting for the HTML tutorial, thanks for sharing

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

    There are a lot of better layouts for me;) but this isn’t bad of course ;) greetings

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

    There are a lot of better layouts for me;) but this isn’t bad of course ;) greetings

  • http://www.clippingimages.com/ clippingimages

    there are a lot of layouts.thanks for the post….

  • http://www.clippingimages.com/ clippingimages

    there are a lot of layouts.thanks for the post….

  • http://www.islamicnet.com islamicnet

    That’s an awesome tutorial. Thank you for your hard work!

  • http://www.islamicnet.com islamicnet

    That’s an awesome tutorial. Thank you for your hard work!

  • http://tutsby.me BlaZe

    Its a fantastic tutorial. I didn’t tried it, but as a learning web designer myself, I can anyone can make this within 10 minutes. Really appreciate your effort ;)
    Nice.

  • http://tutsby.me BlaZe

    Its a fantastic tutorial. I didn’t tried it, but as a learning web designer myself, I can anyone can make this within 10 minutes. Really appreciate your effort ;)
    Nice.

  • http://thechriscoleman.com/ Chris

    Great tutorial! All you lack is cuttin’ it up and coding it. Definitely a great starting point for those that are new. Allows them to take their creativity to the next level.

  • http://thechriscoleman.com/ Chris

    Great tutorial! All you lack is cuttin’ it up and coding it. Definitely a great starting point for those that are new. Allows them to take their creativity to the next level.

  • http://www.freeitsolutions.com/photoshop PhotoshopTuts

    Interesting looking web layout! Great tut!

  • http://www.freeitsolutions.com/photoshop PhotoshopTuts

    Interesting looking web layout! Great tut!

  • Cristian

    Great tutorial. I will try it soon. Please come with more. We want to learn.

  • Cristian

    Great tutorial. I will try it soon. Please come with more. We want to learn.

  • http://www.theblogmaster.net Ana

    Great tutorial!!! I’ll definitely try it out!!!
    Thanks

  • http://www.theblogmaster.net Ana

    Great tutorial!!! I’ll definitely try it out!!!
    Thanks

  • http://www.hawk-designs.net Hawk

    Great tutorial here!

  • http://www.hawk-designs.net Hawk

    Great tutorial here!

  • http://sleepcomfortadjustablebeds.org Cherry Chambell

    Good tutorial. very helpful.

  • http://sleepcomfortadjustablebeds.org Cherry Chambell

    Good tutorial. very helpful.

  • Bab_dolly

    i’ve done it thank u so much

blog comments powered by Disqus