Create a modern psd (photoshop) template for Joomla, WordPress or Drupal
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)
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.
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)
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.
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”
Leave a Reply
2 Trackbacks
- March’s Fresh Photoshop Web Layout Tutorials
[...] 23. Create a modern psd (photoshop) template for Joomla, WordPress or Drupal [...]
- [PSD to HTML] How to code the Modern Web Layout « TrendyTuts – Premium Photoshop Tutorials
[...] Hello. In this tutorial I will try to explain how I have coded from PSD to HTML the The Modern PSD Template [...]





























[...] 23. Create a modern psd (photoshop) template for Joomla, WordPress or Drupal [...]
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
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
Nice… now a great follow up would be slicing this up into XHTML & CSS. Please?
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!
Awesome tutorial with nice web layout
thanks for sharing & posting it
i learn a lot
Keep educating us
God Bless you
Awesome.. How can I make template for a blog of blogspot and convert my existing one to it?
Please help.
thanks , this is very good tutorials, i am waiting your next tutorial relating with on how to this PSD in to HTML/CSS
thanks
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
[...] Hello. In this tutorial I will try to explain how I have coded from PSD to HTML the The Modern PSD Template [...]
Really useful tutorial. Thanks