Create a new document with the dimensions 850×1030 pixels. Double click your background layer then press ok on the box that pops up, your background layer should now be “unlocked” double click your background layer once more and add this gradient overlay.

Select the rectangle tool and create a rectangle at the top of your canvas.

Add these layer styles to your rectangle so it looks the same as the image above.



Now add some content onto your top rectangle, il use this area for a login form, the icons on the image below were from the custom shapes libary within photoshop.
![]()
Select the rounded rectangle tool and draw out two rectangles about 140 pixels wide and about 60 pixels high “big button size”. Place them underneath your top rectangle.

Right-click your top rectangle layer and goto copy layer styles, then right click your two buttons you made in the step above and goto paste layer styles. You buttons should be transformed to look like the image above. Add some text to your buttons and maybe some icons from the custom shapes libary.

Find an image of some sort of server and place it somewhere in the middle underneath your buttons.

Duplicate your server image onto a new layer, press “ctrl + T” to free transform it, hold the shift key and make it alittle bit smaller than the orginal. Holding the shift key while re-scaling will keep its orginal aspect ratio. Move your duplicated server image across a little bit so it looks like its behind the 1st one. With the 2nd server image layer selected goto “filter > blur guassian blur” blur it by about 2 pixels.

Repeat the steps above and 2nd time only this time make the image abit smaller than the 2nd one and blur it by 3 pixels instead of 2. You should have something like this.

Duplicate each server image, and drag the layers underneath there orginal layers. Goto “edit > transfrom > distort”. Distort them so the front of the server image match like the image below.

Now add a layer mask to the duplicates so they look like a small reflection.

Add your website logo, title and slogan to the right of the servers.

Select the rounded rectangle tool and create three boxes underneath each other.

Add these layer styles to your boxes so they match the image above.



Fill your boxes with some kick ass hosting plans. Use the server images as icons.

Duplicate your website title and place in a content filled area with some nifty typography.

Add your footer in the space thats left at the bottom, i dont think the footer needs much explaining.

Finished.








17 Responses to “Hosting Layout”
ImQo Says:
Good article. However, this layout have some minuses: All links on the page must be the same. And block with offers must be in unique style. But this article is good. Have fun!
Christine Says:
ooh, I love your tutorials! Very helpful! Granted, I won’t be needing a hosting layout anytime soon, but I’m sure this tutorial will be very helpful to someone who may!
frank nuamah Says:
i wanna have a graphics-brain transplant like u guys.how do i?
Anthony (TecHabblex) Says:
If you want the server image here is the link to exact one
http://www.sourcewrite.co.uk/images/hosting.jpg
Thanks,
AND NICE TUTORIAL!
Azhar Says:
it’s very nice toturial and web Layout
Thank you
My Site
http://www.marocplus.net
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online