Ecommerce web hosting layout

admin · #1 (**permalink**) 10-22-2007, 08:35 PM

Hello

Today i am going to make Tutorial Number 135 from 500 Tutorial Marathon
I will show you how to create a e-commerce web hosting layout
This is my final result:

All layer styles , and gradients are included in this Package : Talk-Mania big-pack

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

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

Then change the blending mode for this layer to Overlay

press CTRL+D to deselect
This is my result

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

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

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

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

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

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

This PSD file is available only for VIP members