Grafpedia

In this tutorial i will create a spare parts ecommerce layout. It can be used for magento, oscommerce, or any e-commerce cms you want.

Preview

Let’s start with a new document with the following size: 960×900 pixels. In the last 3 days i have received over 10 common questions from grafpedia members with the same issue: How do i find the colors when i am creating a web layout.

The answer is simple:

Download our huge pack of 27.000 phtoshop gradients and you will find there color combination for any taste. When you create websites try to use only 3-4 colors. This is the secret when you want to create web 2.0 websites. I will show you today how i will use a few gradients from this set, and i will turn any shape into a nice design.

I will select Gradient Tool, then i will choose a random gradient from this huge set of photoshop gradients. With Gradient Tool i will draw a vertical line from the bottom to the top

I will set my foreground color to #e9eaeb, and i will create a big rounded shape with Rounded Rectangle Tool.

I will place this shape like in the following image

With Ellipse Tool i will create a circle. I will use the same color. I know already what i am going to place in that area. That’s why i am placing the circle in that area

With Rounded Rectangle Tool i will create another shapes with different colors

For the top shape ( the navigation bar ) i will add a simple layer style. Now you can see how powerful are gradients

this is my result

My next step is to load the selection for the next shape

NOTE: to load the selection you need to rasterize the shape ( right click on the layer, and choose Rasterize ) , then go to Select > Load selection. I will create a new layer by pressing on CTRL+SHIFT+ALT+N in the same time. I will grab Brush Tool, and i will choose a big smooth brush ( the size should be bigger than 600 pixels )

Then i will click one time inside the selection. I will try to add this brush drawing exactly in the middle

You can press on CTRL+D to deselect. I will do the same for the bottom part of my layout. You can see the full screen image if you click on the following image

If your design looks similar with mine i will be glad. Now i will try to add some other details. I will load one more time the selection, and i will go to Edit > Stroke

This is my result. it will be very hard to see this thin white line

I will add a image with a car. I will use a Audi.

I will use Pen Tool to create a small arrow

With Rounded Rectangle Tool i will create a new shape

I will select both layers in my layer palette ( the arrow and the last shape ) and when my layers are selected i will press on CTRL+E ( merge both layers into a single one )
On this new layer i will add a simple layer style

this is my speech bubble

With the same method i will create another ones

With Horizontal Type Tool i will write down some text

In the middle of my ecommerce layout i will create another shapes

Then i will add another images ( i will use some real spare parts products )

Now i will create a shadow under my car. I will use this method instead of using a simple drop shadow settings. Duplicate the layer with the car.

To duplicate a layer first you need to select it, then press on CTRL+J.
Drag the copy of the layer under the original one in your layer palette

Select Move Tool, and if you press a few times on the down arrow key from your keyboard the second copy of the car will go down like in the following image

Please desaturate this image, or turn to black and white. If you are interested we have a set of nice photoshop action which will convert your layer to black and white

My result

Now go to Filter > Blur > Gaussian Blur and use the following settings

Now you have a nice shadow under your car

This is my final ecommerce layout for magento.

Want to download the PSD layout for each tutorial ? Please join our VIP membership. For 9.95 $ you can download all our PSD layouts + our entire collection of premium downloads.