This tutorial will teach you how to create an clean web hosting layout.

For start you need to open a new document with the following size: 1100 x 1200 pixels. Grab your gradient tool, and then add a blue light gradient to the top of your document. If you want some gradients to test here you can download over 27.000 Photoshop Gradients

Create a new layer ( press on CTRL+SHIFT+ALT+N ) and then with Brush Tool, add a big white spot on the top of your layout. Please try to use a brush with a smooth edge.

With Rounded Rectangle Tool i will create a shape in the middle of the layout.

For this shape i will add a simple layer style. Please try to save this style, because we will use it later in this tutorial.

With Pen Tool i will make a dark shape like in the following image.

Make sure you place the black shape under the white one. This dark shape will be used to create a nice shadow.

Next step is to add a filter to this dark shape. Go to Filter > Blur > Gaussian Blur. Add as much blur as you like.

Then i will go to Edit > Transform > Warp, and i will select the Arch with a value of 10. The shadow will bend a little to the top and it will have a nicer look.

Next step is to create a navigation bar.

I will rasterize the shape and i will cut the shape in two. The left one will have applied a gradient, and the right one will have another gradient.

Here is the layer style i have used for the left navigation bar.

And here is the right side of the navigation bar.

The layer style i have used for the right area.

With rectangle tool i will create a shape like in the following image. This image will be used when you will transform the PSD file to XHTML

I will add the following layer styles

I will add a simple text logo, and in the same time i will create another shape in the middle of the layout.

I will rasterize the previous shape, and with the same technique i have used for navigation bar i will use it also on this shape. I want to make the right side of the shape with another color.

Bellow you can find the layer styles i have used for the right side of the shape.

With Rectangle Tool i will create 4 shapes.

Here you can see the layer styles i have used for each shape.

Next step is to select all 4 layers in your layer palette, and then press on CTRL+E to merge all layers into a single one. Select Eraser Tool, and make sure you have a round smooth brush selected. Delete the right and the left part of the shape.

With Line Tool i will add some lines like in the following image.

I will zoom the image a little so you can see better what i am doing. As you can see i have used two different colors. White and a light blue.

With the same techniques like before i have created also on the right side a similar design.

Next step is o add some icons, text, and stock image. Please click on the following image to see better my result.

Under this area i will create a new shape with Rounded Rectangle Tool, and then i will fill it with text.

I will select Ellipse tool and i will make a dark circle.

I will use one more time Gaussian filter ( i have used 60 px radius )

I will choose Eraser tool and i will delete the top and the bottom area of the dark spot.

Next step is to lower the opacity of the shape. Right now it will be hard for you to see the difference, but in the next step you will see a small difference.

Please click on the following image to see how i placed some vertical lines.

I will create now another areas where i will add some hosting plans. For this you will need to use Rounded Rectangle Tool, and then you will need to create one more time a shadow for each area.

I will add some vector icons related to hosting, and as you can see i will add also some vertical lines.

On the right side i will add also some buttons, and i will try to split the right area into 3 rows. As you can see i have used only Line tool to add some 1 pixel lines.

The same i will do also for the right box: Advanced Plan

On the footer of the layout i will make a big shape, an d then i will fill it with text, and one more time i will use the line tool to add some vertical lines. Please note that these lines are erased at the top and on the bottom. I have used eraser tool after i have rasterized each layer with lines.

On the right side i will add a search box. it will allow your customers to search for a domain name.

The same i will do it on the top. I will add a login box, and a telephone number.

This is my final result. I hope you like it.

If you want to download click on the next button. Create an account and you will be able to download all our resources.