Hi and welcome again to our website.
In this tutorial I will create a modern template in Photoshop which can be coded then for Joomla, WordPress or Drupal.

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)

Let’s start it!
Open Photoshop and create a new document (Ctrl + C).

The color used for background is this one #fcf8bc

Step 1 – Creating the logo and navigation

First I will select Rectangle Tool and I will add a shape at the top of the document

Then I will select Type Tool and I will write PSD – Coder.com along with a slogan. (please note that the color is not important now). For “PSD” I have used Ariapenciroman font and for Coder.com and slogan I have used tahoma font.

Next I will select Rectangle Tool and I will add this shape (in the back of “PSD” text). Again the color is not important now – I have used red.

Now if you have a similar result with mine, please apply the following layer styles:
For the shape created on previous step apply this styles:

My outcome

Now for PSD text, apply this layer styles:

For Coder.com I will apply this layer styles:

For the slogan, I will change the color to # 0b8c8f
Here is my final outcome for logo

Next we will need to create the navigation.
With type tool I will add this links

For “Home” I will apply this layer styles:

For the rest of the links I will use this layer styles:

Step 2 – Creating the Featured Area

First I will select Rectangle Tool and I will add this shape (dimensions for my shape: 950px by 332px). As a color I have used: # cacf43

Then I will apply this layer styles:

Next I will select an image from my previous tutorials and I will add it on my document. Using free transform (Ctrl + T) I will resize the image

Then I will select Rectangular MarqueeTool and I will delete a small part from the image

Now I select Ellipse Tool and I will create this shape (on the back of the image)

And I will apply a Gaussian blur (Filter>Blur>Gaussian Blur)
With a radius of 30.8 px

I will select again Rectangular Marquee Tool and I will make this selection

Next I will hit “Delete” on my keyboard to delete the selection. The result will serve as a shadow for my image

Next with type tool I will add some text

Then I will apply this layer styles:

Here is my result

Using again type tool I will add more text
Here is my result

On this area I would like to have a slideshow, to showcase all of my products, that’s why we will need some arrows to switch between slides.
To create this arrows, I will select first Ellipse Tool and I will create this shape

And I will apply this layer styles:

Then I will select type tool and I will create this shape:

I will apply this layer styles

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

Next I will select Rectangle Tool and I will create this shape. I have used this color: # 0b8c8f

Then I will apply this layer styles:

Now I will select Ellipse Tool and I will create 2 white shapes (please see the screenshot)
For each of this shape I will apply a Gaussian blur  (Filter>Blur>Gaussian Blur) with a radius of 78px. I have done this to create some smooth and nice gradients over my rectangular shape.

With type tool I will add some text

Now pay attention because I will apply again some layer styles.
For title “Why to choose us” I have applied this layer styles:

My result:

And for the white text I have applied this styles:

My result:

Next using rectangle tool I will add 2 more shapes (white rectangles)

For each of this rectangle apply this layer styles:

My result

Now I will select Vertical Type Tool and I will add some text on our rectangles

I will add more text using type tool and I will apply the same layer styles
Here is my result

Next I will prepare to create the content area. For that I will select again rectangle tool and I will create this shape (yes a white shape)

Now here is the final step for Featured Area
To give a nice 3D touch to our Featured Area
With pen tool selected create a similar shape. I have used this color: # 146a6c

I will create a similar shape on the right side.
My final result for Featured Area

Step3 Creating the content area

This one is quite easy to create. With type tool and some text  and I will insert some images

I will select Rectangle Tool and I will add 2 shapes:

For each shape I will apply this layer styles:

Here is my result for content area:

Step 4 – Creating the footer

I will select Rectangle Tool and I will create this shape (color used: #2b2825)

Next with pen tool create a similar shape, first on the left side:

I will create another one on the right side. Here is my result:

The final step would be to add some text and to create a “Newsletter Form”. Here is my final result for footer:

To create that yellow button I have used Rectangle Tool to create the shape, then I have applied this layer styles:

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

Well, the tutorial is finished now, and it was a really tough job!  Anyway I hope you will find it useful. Now from this psd template, we have few more steps to complete in order to have a functional website.  First we will need to code this PSD in to HTML/CSS (we have already done that and the CSS/HTML version is available for our premium members)

Next then if you’d like to have a functional template for Joomla, WordPress or Drupal, you will need to take the HTML/CSS files and to integrate them with our preferred CMS.

9 Responses to “Create a modern psd (photoshop) template for Joomla, WordPress or Drupal”

1. March’s Fresh Photoshop Web Layout Tutorials says:

   April 1, 2010 at 10:13 pm

   [...] 23. Create a modern psd (photoshop) template for Joomla, WordPress or Drupal [...]
2. DragolinDesign says:

   April 5, 2010 at 1:19 pm

   I’d like to see more about converting your psd to a template for Drupal, because that’s the most difficult/intransparant part for me thx
3. admin says:

   April 5, 2010 at 5:36 pm

   DragolinDesign, the first step required to create a Drupal template it will be to have a good coded file from PSD to HTML and then using some instructions provided on the drupal forum or any other ebooks (there are plenty of them, not only for Drupal but as well for Joomla, WordPress, etc) you will be able to integrate your template with Drupal or any other CMS.

   Here on this website (as the domain it says) we will code each and every psd created on this website to CSS/HTML. You will learn the basics (and this is the most important thing), and then you will be able to integrate your design with any other CMS platform.

   Thanks for passing by and for your comment
4. Tom says:

   April 6, 2010 at 4:29 pm

   Nice… now a great follow up would be slicing this up into XHTML & CSS. Please?
5. admin says:

   April 8, 2010 at 6:21 am

   Tom, I will slice and code it in XHTML & CSS each tutorial posted on this website. Currently I’m planning to create few more photoshop templates (psd templates) and than I will code them up. Thanks for passing by and for your comment!
6. tirath says:

   April 8, 2010 at 9:11 am

   Awesome tutorial with nice web layout
   thanks for sharing & posting it
   i learn a lot
   Keep educating us
   God Bless you
7. ID says:

   May 7, 2010 at 10:38 am

   Awesome.. How can I make template for a blog of blogspot and convert my existing one to it?

   Please help.
8. steve says:

   May 9, 2010 at 3:31 am

   thanks , this is very good tutorials, i am waiting your next tutorial relating with on how to this PSD in to HTML/CSS

   thanks
9. Mick says:

   May 13, 2010 at 2:53 am

   thanks but when will you post on how to take the design and hook it all up with HTML/CSS for Joomla……

   I am hanging for this and I cannot find how to do it…….please get onto it…..in the nicest possible way of course
10. [PSD to HTML] How to code the Modern Web Layout « TrendyTuts – Premium Photoshop Tutorials says:

    July 12, 2010 at 6:28 pm

    [...] Hello. In this tutorial I will try to explain how I have coded from PSD to HTML the The Modern PSD Template [...]
11. PSD to XHTML says:

    July 31, 2010 at 8:03 am

    Really useful tutorial. Thanks