Ecommerce Web Hosting Layout

I will show you how to create a e-commerce web hosting layout

This is my final result:

Click to enlarge

Let's start with a new document

size : 760 x 770 pixels
background color : #333333

With Rounded rectangle tool create some shape and place it like me.

I will use different colors. In this way you can see better where i am placing the shapes

Then for the top white shape please add the following layer styles

This is my result

Now for the orange shape please add the following layer styles

This is my result

Now for the other white shapes please add the following layer styles

This is my result

Now we need to create a new pattern. for this pattern please create a new document

Size 10 x 10 pixels with transparent background

Zoom this document to 1600 %

Grab Pencil Tool ( set the brush size to 1 pixel ) , then create the following drawing

Now go to Edit > Define pattern

Chose a name for this pattern and press ok.

You can close this small document. now let's return to our layout

We will add some layer styles for the big red shape

But before that please change the color of this shape from red to black ( # 242424 )

Then add the following layer styles

This is my result

Click to enlarge

Now please go to www.free-photoshop.com and download the Brush #18 - Grunge Brushes

Load this set of nice brushes into photoshop, then load the selection for the orange shape. To load the selection please click on the layer thumbnail while you are holding down the Ctrl key

This is the result. you will see a selection around your shape

Create a new layer ( press Ctrl+Shift+Alt+N ), Then with brush tool create some random drawings with those brushes downloaded from Free-Photoshop.com

Click to enlarge

Then change the blending mode for this layer to Overlay

press Ctrl+D to deselect

This is my result

Click to enlarge

Over this orange shape please add some details: text an a 3D laptop

Click to enlarge

Then with Rounded rectangle tool add some boxes.

Then create a white shape , with rounded rectangle tool, and place it under the text : " Now with more features then ever before "

Then add the following layer styles

This is my result

Now load one more time the selection for the orange shape

Then create a new layer right above the shape layer. ( press Ctrl+Shift+Alt+N )

Then Grab Paint Bucket tool, and use the following settings:

Then click on time inside your selection

This is what i have

Click to enlarge

Now press Ctrl+D to deselect , then press on Add layer mask button

Select gradient tool

And draw a small line over the top of the shape

Then for this layer please change the blending option to Overlay

This is my result

Click to enlarge

Do the same for the blue shape. You have to apply the same technique as above

Click to enlarge

Now it is time to create a shape with pen tool

For this shape add the following layer styles

This is my result

Duplicate this shape ( be sure you have the layer selected then press Ctrl+J )

Place the shape on the other part of the website

Then select polygon tool, use the following settings

And create a star.

Rasterize this layer ( right click on the layer then select Rasterize layer )

Load the selection for the blue shape

Then press Ctrl+Shift+I ( select inverse ) , be sure you have the star layer selected and hit delete key on your keyboard

Press Ctrl+D. You will have the following result

Duplicate this star one time ( Ctrl+J ) then place it on the other side of the website. In the same time i will add also some text

Click to enlarge

Now you can add alone some text on your layout and i think you are ready

Click to enlarge