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.

blog comments powered by Disqus