Learn how to create an ecommerce theme for Magento or Prestashop using Photoshop
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
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:
Then with Type Tool (T) I will add some links. For each link I have applied this layer styles:
Now with Rounded Rectangle Tool I will add a shape over the Home link. For this shape I have applied this layer styles:
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)
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:
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%
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:
Next with rectangle tool I will create another shape 146 by 22px.
For this one I will apply this layer styles:
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:
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
Want to Download the Source File? (CSS/XHTML files 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. I hope you have had a great read!blog comments powered by Disqus