HV-Designs.co.uk

August 18th, 2008 in Photoshop Tutorials by Richard Carpenter

Hosting Layout

• Share

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.