In this tutorial i will show you how to create a sleek layout for Presta Shop or Magento. You can use this layout to create any eCommerce shopping cart for any CMS you like.

For start you will need to download the following seamless background texture.

Download seamless background

Open this background texture in Photoshop, and then go to Edit > Define pattern. Choose a name for this pattern, and click on OK. You can close the document, and then create a new document with the following size: 1100 x 1300 pixels.
Grab Paint Bucket Tool and make sure you select the pattern you just create. Click one time inside your document, and your document will look like in the following image.

Select Rounded Rectangle Tool, and create a shape on top of the layout.

For the shape i will add the following layer styles. You can find the gradient in the following set : Download 27.000 layer styles

Please make sure you save this layer style because you will use it several times in this tutorial. Next i will create a search box like in the following image. I will use one more time Rounded Rectangle Tool.

I will add the following layer styles. Please make sure you save also this pressed layer style. To save a new layer style first you need to use the settings from above, and then you can press on the “New Style ” button.

Right now you can click on the ” New Style ” button.

The next step is to add some text, and small icons like in the following image.

I will create a dark navigation bar like in the following image.

For the navigation bar i will use the following layer style. Make sure you save this style as well.

Under the navigation bar i will create another shape, and then i will rasterize it. I will select Eraser tool, and i will delete the top part of the shape, and then i will add the yellow layer style.

Sometimes when you slice your layout, you need some buttons for hoover state. That’s why i will create a button now with another color so you can see my layout with another type of buttons. I have used Rectangle Tool to create the following button, and of course i have applied the yellow layer style.

With Horizontal Type Tool, i will write some text. Please click on the following image to see it better.

Under the navigation bar i will add a image with a MacBook Pro

Then i will add some buttons with Rounded Rectangle Tool.

Under my slide show i will create a white area where i will add later in this tutorial some products.

I will chose some random products and i will align them like in the following image.

With Line tool i will draw some lines in between the products. I will use a light grey for these lines.

On the left side i will add some boxes. The yellow part was made with Rounded Rectangle Tool, and under the yellow shape you will notice some grey shape. I have use rectangle tool to create the grey shape. If you look inside my .PSD file you will see that these grey shapes are actually dark shape, but they have a very low opacity: somewhere around 20%. You can change the opacity value from the top of you layer palette.

With Rounded rectangle tool i will create some buttons, and with Horizontal type tool i will write some text over my buttons.

One of my final steps is to create a simple footer. With Rectangle Tool i will create a big shape on bottom of the layout.

I will create a simple text logo like in the following image, and under the logo i will add also a slogan.

This is my final result. I hope you like this eCommerce layout. Please note that you can use this tutorial to create your own stores for different types of cms like Presta Shop, osCommerce, creLoaded, Magento, etc.

Please note that you can download this . PSD layout if you are already a Premium Member. To register simply go to the following button, and you will be able to register.