Hello. In this tutorial you will learn how to create a web layout for a e-commerce platform. You can use magento, prestashop, or even e-commerce. I will plan to create a website where you will be able to sell apple products: the new ipod touch, the ipod nano, and of course one of the best phones: iPhone 4. It is very important to keep almost the same feel like apple.com because mac users like well designed websites. You will see bellow my web layout inspired by apple.
For start create a new document with the width of 1200 pixels. With Paint Bucket Tool, i will fill the background layer with the following color. #DADADA
I will create another shape with rectangle Tool, and i will use a dark gradient. Then i will add a image with a iPhone 4. You can use a vector image with an iPhone. If you don’t have one make sure you will visit us soon to download a very detailed vector iPhone illustration.
To the right side i will create a shape with Rounded Rectangle Tool. It doesn’t matter what color you will choose. I have used red because you need to see better what i am doing there.
For this red shape i will use the following layer styles:
This is my result so far. in this box i will place some text with one of the most important features of the iPhone. As you can see i have used an indented layer style for this shape. It is good to save this layer style because this type of pressed layer styles are very used right now.
On the top of the layer i will place another shape.
This is the layer styles i have used.
Over this area i will place some images with the latest apple releases: The new iPod touch, the iPod nano, and the new iPod shuffle
Under each product i will add a shape with Rounded Rectangle Tool.
I will rasterize the shape, and then i will cut the top part of the shape. To cut the shape it is very easy to make a selection on the top of the shape with Rectangular Marquee Tool, then hit the delete key from your keyboard.
As you can see from my previous image you will have there a line. Please add over this gray line another line with the same color
This is how it should look correctly.
On the top right side i will create a shape with Rounded Rectangle Tool. Here i will create the navigation bar.
These are the layer styles i have used to create the indented navigation bar.
After i will place some text buttons my navigation bar will look like this one.
On the left side i will create a simple text logo. I will use the same pressed layer styles.
On the body of the layout i will add a image with iPhone and of course some text.
i will use the following layer styles to create a button on the right side.
This is my result so far.
On the footer i will place another piece of texts, and of course some images. i have used Myriad pro with different sizes. Please click on the following image to see better how this apple inspired layout will look like.