Hello. In this tutorial i will show you how to create a very detailed web hosting layout. If you have a hosting company you will need a very detailed hosting web template because the the market is over saturated, and you will need to stand out from the crowd.

This is our final result.

For start you will need to create an empty document. I will use a dark color for this background. please note that you can use Paint Bucket Tool to fill your background layer whit whatever color you want.

I will select Brush Tool, and i will make a white drawing on a new layer.

Then i will change the blending mode for the new layer to overlay.

Now it will be good to turn on the grid. ( go to View > Show > Grid ). With Pen tool draw a shape like in the following image.

Under this shape i will draw another one. This shape will be used for our price table. Here we will add the pricing of all our hosting plans.

On the top of the pricing table i will add another shape. You can use pen tool to create this shape. Here will be the name of our web hosting plans.

Bellow you have the layer style i have used to create the header of the table. Please save this layer styles because you will use it later in this tutorial several times. i will name it LayerStyle1

Please note that all gradient used in this tutorial are from our huge pack with over 25,000 Photoshop Gradients

With line tool i will create some vertical lines.

In the middle of the layout i will create a area where i will place later a 3D server. This shape will be changed later with another one. Anyway if you like the layout in this way that’s why i gave you two options.

Bellow you will find the layer styles used for this shape with an indented look. Please save this layer style because you will need later in this tutorial. I will name it LayerStyle2

Here is the new shape i will use it for this tutorial. I have created this shape with Rounded Rectangle Tool then i have applied a noise filter ( Filter > Noise > Add noise )

Next step is to load the selection for this layer. Select the layer in your layer palette, and then go to Select > Load selection. Create a new layer, and with Brush tool add a white area.

Change the blending mode to Overlay for the layer with the white drawing, and your web hosting layout will look like in the following image.

Do not forget to press on CTRL+D to deselect. With Rounded Rectangle Tool create a nice blue button. As you can see it will have a different color than our web hosting layout, because this button will need to attract a lot of attention.

Bellow you will find the layer styles used to create the blue button.

Please note that all gradient used in this tutorial are from our huge pack with over 25,000 Photoshop Gradients

I will create also another shape. here will be our domain name search form. It will allow your users to search and register domain names.

On the right side you will need to create also a button. use the LayerStyle1

With Rounded Rectangle Tool create another shapes. on the left one you can rotate some news. You can create there a news ticker, and on the right side you can use that button for a live chat.

On the price table area i will create another two shapes with rectangle Tool, and i will add also some lines.

Then i will add another buttons. Here i will use the LayerStyle1

And as you can see i will add another shapes around the first ones.

Bellow you have the layer styles used for the shapes from above.

With Ellipse Tool i will create a few circles.

After you add some layer styles your circles will have a nice pressed look. You can use the layer styles from above. If you have saved the layer styles as i have told you now it will be very easy for you to add the layer styles. If you were lazy you can always register for an account with us and download our huge set with over 16,000 Photoshop Gradients

In the middle of the circles i will add some small triangles.

And then the most important step is to add some icons with some black white servers, and also some prices. Please note that the small shopping cart icon is available in our set of 902 pixel icons which is a very useful set of icons.

On the footer of the layout i will create another shapes, and i will fill it with text. On the following three screen shots it is recommended to click on each image to see the hosting result in full size.

On the header of the layout i will add a stock image with a 3D server, and some text.

Then i will add a logo, a simple client login panel, and of course a horizontal menu.

This is the final result for our hosting layout.