Learn how to create an ecommerce theme for Magento or Prestashop using Photoshop

May 16th, 2010View Comments

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)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.


Prestashop/Magento Theme Tutorial In Photoshop

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)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.


Prestashop/Magento Theme Tutorial In Photoshop

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!

  • http://xitrumpsd.com Nhật Bụi

    Kute^^. Thank a lot.

  • http://xitrumpsd.com Nhật Bụi

    Kute^^. Thank a lot.

  • jasmine

    Your tutorials really fantastic and trendy.
    Thanks for sharing.

  • jasmine

    Your tutorials really fantastic and trendy.
    Thanks for sharing.

  • tirath

    Awesome tutorial with nice web layout
    Thanks so much for posting it
    keep up good work
    god bless you :-)

  • tirath

    Awesome tutorial with nice web layout
    Thanks so much for posting it
    keep up good work
    god bless you :-)

  • http://fusecurity.com/ sunjester

    Very nice layout, however I do not see what it has to do with either CMS that is mentioned in the title.

  • http://fusecurity.com/ sunjester

    Very nice layout, however I do not see what it has to do with either CMS that is mentioned in the title.

  • admin

    Well, this is an e commerce web layout designed to work with Prestashop or Magento ;)

  • admin

    Well, this is an e commerce web layout designed to work with Prestashop or Magento ;)

  • http://screencastworld.com Magento

    Fantastic tutorial. Really well explained. You’ve given me the head-start I needed to start developing my own themes and templates for Magento Commerce. Converting PSD/Images in to a working theme is fairly straight forward. Using an existing theme as a basis, the Modern Theme for example, makes the process much quicker.

  • http://screencastworld.com Magento

    Fantastic tutorial. Really well explained. You’ve given me the head-start I needed to start developing my own themes and templates for Magento Commerce. Converting PSD/Images in to a working theme is fairly straight forward. Using an existing theme as a basis, the Modern Theme for example, makes the process much quicker.

  • Alex

    Nice tutorial. but now i have my html code and what?? what i must do with him? it is hard to integrate in a smarty template. i will wait for your tutorial.. tnx

  • Alex

    Nice tutorial. but now i have my html code and what?? what i must do with him? it is hard to integrate in a smarty template. i will wait for your tutorial.. tnx

  • http://www.prestashop-themes.org/ PrestaShop fan

    Thank you for helpful tips. The final result looks great! Frankly speaking I’m tired of the PrestaShop designs that look like they’ve been created for about 20 years ago, so your tutorial is really inspiring

  • http://www.prestashop-themes.org/ PrestaShop fan

    Thank you for helpful tips. The final result looks great! Frankly speaking I’m tired of the PrestaShop designs that look like they’ve been created for about 20 years ago, so your tutorial is really inspiring

  • http://beborednomore.com Paul

    Hi ,

    It is to bad that it doesn’t tell you how to make it into a magento theme.
    You got a nice photoshop file after this tutorial but that is it…

    This is no magento tutorial at all .
    Even after slicing it into working XHTML and CSS you still haven’t got a magento theme.

    I would like to see how to do the step of integrating your XHTML and CSS into a working Magento Theme.

    PSD tutorials and slicing tutorials are all over the web.
    If you want unique content post a magento theme tutorial that actually makes a theme for magento.

  • http://beborednomore.com Paul

    Hi ,

    It is to bad that it doesn’t tell you how to make it into a magento theme.
    You got a nice photoshop file after this tutorial but that is it…

    This is no magento tutorial at all .
    Even after slicing it into working XHTML and CSS you still haven’t got a magento theme.

    I would like to see how to do the step of integrating your XHTML and CSS into a working Magento Theme.

    PSD tutorials and slicing tutorials are all over the web.
    If you want unique content post a magento theme tutorial that actually makes a theme for magento.

  • Knikky224

    I am agree with Paul! Once you’ll post a tutorial how to integrate your page into a Magento Theme, I will become a member of your site! :D

  • Knikky224

    I am agree with Paul! Once you’ll post a tutorial how to integrate your page into a Magento Theme, I will become a member of your site! :D

  • http://prestadesigner.com Prestashop Themes

    Really great tutorial to create prestashop themes!

  • http://prestadesigner.com Prestashop Themes

    Really great tutorial to create prestashop themes!

  • http://prestadesigner.com Prestashop Themes

    Really great tutorial to create prestashop themes!

blog comments powered by Disqus