Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Clean Hosting Layout

Create a Clean Hosting Layout


Create a new document with the following size: 960x900 pixels. I will use the following color for the background: #2a1f14Img

Now with Rounded Rectangle Tool I will create a big shape in the middle of the layout.

I will add the following layer style

Img

Img

I will hold down the CTRL key and with my left mouse button I will click on the vector mask thumbnail ( inside your layer palette )
You will see a selection around the big white shape

Img

Create a new layer ( press on CTRL+SHIFT+ALT+N ) in the same time and with Paint Bucket Tool fill the selection with the following color: #ababab

Img

Select Eraser Tool ,and with a big round smooth brush delete the middle of the grey shape

Img

Press on CTRL+D to deselect ,and then create another green shape on top of the layout

Img

With Pen Tool create a small triangle and place it like in the following image

Img

On the bottom of the hosting layout I will create 4 shapes with Rounded Rectangle Tool

Img

For all these shapes I will add the same layer styles

Img

Img

Img

This is my result so far.

Img

On the right side of the body I will create another 2 shapes. I will use the same layer styles

Img

Next step is to add some text with Horizontal Type Tool. Please click on the following image to see the full size layout.

Img

Now I will add also some images with 3D servers

Img

One of the last step is to add some 1 pixel lines between some parts of the text. Here is the example.

Img

To create this line you need to select Line Tool, and then create this two thin lines. Right click on each layer inside you layer palette, and choose Rasterize layer. With Eraser Tool ( and with a smooth round brush ) delete the extremities of each line.
Now I will use Rounded Rectangle Tool to create another shape. This round shape will be used as a form to search domain names.

Img

This is my final hosting layout.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: