In this tutorial I will teach you how to create a nice theme for an ecommerce website (Magento or Prestashop) using Photoshop. This psd template can be used to create a women clothing shop.

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 the tutorial!

Open Photoshop. Choose background color #8a8383 and create a new document (Ctrl + N).

Step 1 -  Creating the top navigation

On the left side I will add my logo (trendytuts) and on the right side I will add some links using Type Tool (T).
Note: To add the text on this template I have used “Arial” font.

For each link I have applied this layer styles:

Next I will select Rounded Rectangle Tool and I will add this shape over “About Us” link. As a color I have used: #7e7878. This shape will serve as Hover/Selector for our top navigation. For this shape I have applied this layer styles:

My final result for this area:

Step 2 – Creating the main navigation

To create the navigation I will select first Rectangle Tool (U) and I will create this shape. Mine has this dimensions:  941 by 40px

Then I will apply this layer styles:

Here is my result:

Then with Type Tool (T) I will add some links. For each link I have applied this layer styles:

My result:

Now with Rounded Rectangle Tool I will add a shape over the Home link. For this shape I have applied this layer styles:

My result

Next on the right side of the navigation, right there where is My account, My cart, I want to create some separators. To do that I will select Line Tool (U) and I will add this 2 lines (I will demonstrate how to create a separator, then you will need to create 3 more, using the same steps)

For the first one (the darker one) I have used this color: #ba53be then for the second one I will use this color: #c977cc
Here is my final result for navigation

Step 3 – Creating the content area

To create the content area I will select Rectangle Tool and I will create this shape 941 by 710px and I will apply this layer styles:

Then from my Stock Images I will add a nice picture showing a women dressed  with a pink skirt.
I will place this picture on my document.

Here you must be careful. The image layer needs to be placed just above the layer which represents the shape created on the previous step. Please see the screenshot

Once you make sure that the image is placed just above that shape, right click on the image on your Layer Palette and choose Create Clipping Mask

You should have something like this one.

As you can see the image is now perfectly framed, but we will need to work a little bit on it, in order to make it looks perfect.
First I make sure that I select the image on my layer palette, than I will go to :  Layer> Layer Mask>Hide All

When you click on “Hide All” the image will disappear. Make sure that you click with your mouse on the “Layer mask thumbnail” then choose Gradient Tool (make sure that you have the default colors – black and white)

Next while you have Gradient Tool selected, drag with your mouse a similar line

I will lower the opacity for the image to 67%
My result:

Next with Type Tool I will add some text on the right side

Now I will select Ellipse Tool and I will create this shape, then I will apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 9.8px

Next with Rectangular Marque Tool I will make this selection:

Once you have a similar selection, hit Delete to delete the selection and than press Ctrl + D on your keyboard to unload the selection.
Also lower the opacity to 15%

As you can see, we have created a nice shadow. Below the shadow I will add “Featured Products”.  First with Type Tool I will write Featured Products, the using Rectangle Tool I will create this shape: 145 by 105px and I will apply this layer styles:

My result:

Next with rectangle tool I will create another shape 146 by 22px.

For this one I will apply this layer styles:

I will add also an image, and here is my result:

I will duplicate this and I will add 5 more boxes. Here is my result:

Content Area is almost finished. All I have to do is to add a shadow at the bottom. I will select first Ellipse Tool and I will add this shape:

Then I will go to Filter>Blur>Gaussian Blur. Here I will choose 5.9 for Radius

As you can see I have a nice shadow.

Step 4 -  Creating the footer

With Rectangle Tool I will create this shape: 941 by 246px and as a color I will choose #b6a8a8.

Next with type tool I will add some links for the footer. With rectangle tool I will create this shape -  126 by 24px. I have changed the blending mode to Overlay and I have reduced the opacity to 15%

Next with Type Tool (T) I will add the text for the title. I have applied the following layer styles, also:

Using type tool I will add more links…

That pink button is using the same style that I have used for the main navigation. If you’d like to create a similar button, just copy the styles from the main navigation

Next I will create a separator. Do you remember how we have created the separators for the main navigation ? In the same way we will proceed here. With line tool I will create these 2 lines:

For the first one (the darker one) I have used this color: #988d8d and for the second one #cbb7b7
I will add a button with the payment logo and a twitter and a facebook logo. Here is my final result for footer

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

Well the tutorial is finished now. I hope you have had a great read!