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

Hosting Layout


Create a new document with the dimensions 850x1030 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.

image 1

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

image 2

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

image 3

image 4

image 5

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 library within photoshop.

image 6

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.

image 7

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 library.

image 8

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

image 9

Duplicate your server image onto a new layer, press "ctrl + T" to free transform it, hold the shift key and make it a little bit smaller than the original. Holding the shift key while re-scaling will keep its original 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.

image 10

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

image 11

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

image 12

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

image 13

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

image 14

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

image 15

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

image 16

image 17

image 18

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

image 19

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

image 20

Add your footer in the space that's left at the bottom, i don't think the footer needs much explaining.

image 21

Finished.

Hosting Layout



Author's URL: Hv-Designs.co.uk
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

No comments yet...
Add comments to "Hosting Layout"

Captcha