website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Hosting Layout
rss

Hosting Layout

Author: Hv-Designs.co.uk More by this author


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.

Hosting Layout image 1

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

Hosting Layout image 2

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

Hosting Layout image 3

Hosting Layout image 4

Hosting Layout 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.

Hosting Layout 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.

Hosting Layout 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.

Hosting Layout image 8

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

Hosting Layout 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.

Hosting Layout 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.

Hosting Layout 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.

Hosting Layout image 12

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

Hosting Layout image 13

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

Hosting Layout image 14

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

Hosting Layout image 15

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

Hosting Layout image 16

Hosting Layout image 17

Hosting Layout image 18

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

Hosting Layout image 19

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

Hosting Layout image 20

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

Hosting Layout image 21

Finished.

Hosting Layout Tutorial: Final Result



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Hosting Layout"