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.
