Design a Super Sleek Hosting Layout

Step 1

Create a new document (1100px X 900px).

FIll your canvas with 323232.

Step 2

Now we want to set out some guides to help construct our layout.

Set out the following guides:

Vertical Guides:

100px,
300px
400px
700px
800px
1000px

Horizontal Guides:

130px,
250px
400px
520px
550px
800px

Step 3

Now create a new layer called 'room main wall'.

Use your marquee selection tool to create a rectangular selection between the vertical guides 300px and 800px, and the horizontal guides 130px and 400px.

Fill this selected area with a radial gradient ranging from 323232 to 000000.

Step 4

Now use your guides to create a 'left wall' layer for your room.

Use the guides to create a shape like the one shown below. Fill this selection with the same radial gradient as your 'room main wall' layer.

Then reduce this layer's opacity to 60%.

Step 5

Duplicate your 'left wall' layer, and go to edit>transform>flip horizontal. Then move it to fit to the other side of your main wall shape:

Step 6

Finally, use your guides to create a 'floor' layer. Fill this with the same gradient colors, but make sure it's a linear gradient. Reduce this layer's opacity to 80%.

Step 7

Now select your 'left wall' layer. Go to layer>layer mask>reveal all.

Then drag a black to transparent linear gradient across this area from left to right.

This should mask off the edge of your left wall, let it fade seamlessly into your page background.

Repeat this technique on your right wall to achieve the same effect:

Step 8

Now create a new layer called 'header area'.

Select the top 130px of your canvas using your marquee selection tool, and fill this area with whatever color you wish.

Then go to blending options for this layer and apply a drop shadow and gradient overlay:

Drop Shadow:

Blend Mode: Multiply
Color: Black
Opacity: 25%
Angle: 90 Degrees
Distance: 5px
Spread: 0%
Size: 15px

Gradient Overlay

Blend Mode: Normal
Opacity: 100%
Gradient: Ranging from bfbfbf to ffffff
Angle: 90 Degrees

Step 9

Now type out some text for your logo.

Text Settings:

Font: Museo
Size: 48pt
Kerning: -50
Color: 323232

Step 10

Now go to blending options for text layer apply a drop shadow:

Drop Shadow:

Blend mode: Normal
Color: White
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px

Step 11

Now type out some menu text. In this instance I simply added to my existing line of text that I used for my logo, but of course you can create a new text layer if required. I reduced my text size to 18pt.

Apply the same 1px white drop shadow settings to your menu text:

Step 12

Now use your lasso tool to create a simple arrow shape above your 'HOME' menu item.

Fill this with dark gray, and apply the same 1px white drop shadow effect that you used on your text:

Step 13

Cut out and paste in this great image of a line of servers.

Call this layer 'servers'.

Step 14

Now we want to create a mirrored, reflection effect underneath these servers.

Start by duplicating your 'servers' layer and go to edit>transform>flip vertical. Move your servers so that they are just touching.

You'll notice that they don't line up all that well at the moment.

Use your rectangular marquee tool to select the longer face of your line of servers. Then go to edit>transform>distort. Use your distort tool and try to follow the examples below. I was careful to try and follow the perceived floor space of my room.

Then select the other face of your line of servers, and repeat, making sure to fit this face to the shape of your floor also. You should end up with something that resembles the images below:

Step 15

Now reduce your reflection layer's opacity to 15%.

Move this layer beneath your original servers layer.

Then go to layer>layer mask>reveal all. Use a large, soft, black paintbrush (around 40% opacity) to brush over the edges of your reflected servers, blending them into your background.

Then select your server layer, which remember should be ABOVE your reflection layer, and merge it down (command+e). Rename this merged layer 'servers left'.

Step 16

Now duplicate your 'servers left' layer. Go to edit>transform>flip horizontal, and move your flipped servers layer to the right of the original, connecting them in the middle. Merge these two layers together, renaming the merged layer 'servers'.

You should now have an overlap of reflections on your room floor:

Step 17

Now that we've merged all of our server images into a single layer, we can start applying some adjustment layers very easily.

First create a levels adjustment layer, then a hue/saturation adjustment layer, and finally a color balance adjustment layer. With each adjustment layer be sure to go to layer>create clipping mask, so that your adjustments only effect your server images and not your entire document:

Levels Adjustment Layer:

5 / 0.93 / 229

Hue/Saturation Adjustment Layer:

Hue: 0
Saturation: -100
Lightness: 0

Color Balance Adjustment Layer:

Highlights: -2 / 0 / -2
Midtones: -21 / -2 / +8
Shadows: -2 / 0 / +8

Step 18

Now it's time to add some lighting effects to our central image.

Start by creating a layer called 'floor light'. Create a large radial gradient (white to transparent).

Then reduce this layer's opacity to around 35%.

Step 19

Now create a new layer called 'server light'. Create a smaller white-transparent radial gradient over the top, central join between your two rows of servers. Reduce this layer's opacity to 20%.

Step 20

Now create a new layer called 'dodge/burn'.

Go to edit>fill and fill this layer with 50% gray. Then change it's blend mode to 'overlay'. Use a soft black paintbrush (15% opacity) to paint in the 'burn' parts over your server image. Then switch to a soft, white paintbrush (8% opacity) and paint in the 'dodge' areas.

This should add quite a bit of impact to your photo area. You can see below the dodge/burn layer at 'normal' mode and then 'overlay' mode:

Step 21

Now type out some text above your server images saying 'Because Great Hosting Matters...' (or whatever slogan you prefer).

In your layers palette reduce the fill opacity of this layer to 0%, but keep the main layer opacity at 100%.

Then go to blending options and apply an outer glow and stroke effect.

Outer Glow:

Color: White
Opacity: 30%
Spread: 0%
Size: 35px

Stroke:

Color: White
SIze: 1px
Opacity: 30%.

Step 22

Now use your guides to create 3 identical white rounded rectangles at the bottom of your canvas. Each rounded rectangle should have a radius of 10px.

Step 23

Now merge all of these boxes into one layer called 'bottom boxes'.

Apply drop shadow, inner shadow and gradient overlay blending options:

Drop Shadow:

Blend Mode: Multiply
Color: Black
Opacity: 15%
Angle: 90 degrees
Distance: 5px
Spread: 0%
Size: 5px

Inner Shadow:

Blend Mode: Normal
Color: White
Opacity: 100%
Angle: 90 Degrees
Distance: 1px
Choke: 0px
Size: 1px

Gradient Overlay:

Blend Mode: Normal:
Opacity: 100%
Gradient: dddddd to c0c0c0.
Angle: 90 degrees.

Step 24

Now type out some heading text for your three bottom boxes:

Step 25

Now copy/paste in the image of your servers to your package boxes. Reduce your opacity of these images to around 70%.

Step 26

Now add some text next to your server images:

Step 27

Now add some copyright text, and links to 'learn more' about each package.

And We're Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome: