Web Hosting Layout Tutorial
Use the delete key to get rid of that section. Repeat this until all of the blue area is gone. I also used the eraser tool to fade the top of the cables out.

Now Create a new layer. Draw another rounded rectangle like the one below.

Now apply the layer style that you saved earlier. Right click on the layer and go to blending options. Click style on the side and then select the style that you saved and click ok.

Now CTRL+Click on the layer with the new box to select the box. Now use the marquee tool and hold down the alt key and drag the selection over the lower part of the box.

Let go of the mouse button and you selection should look like this. Fill the selection with #2f2f2f by selecting it as your foreground color and pressing alt+backspace.

Now right click on the layer and duplicate the layer 3 times. Move the layers to the right using the arrow tool so that you get this.

Create a new layer. Using the rectangle marquee tool create three small squares above the header graphic and fill them with #6f6f6f.

Now select the text tool. The font I used was Impact 30 point and the color for the word “pro” is #4d6dff and the word “web” is#6f6f6f.

Now use the text tool to add the tag line using Impact 14pt font and color #4d6dff.

Add the links on the right using the same Impact 14pt font with the color#d4d4d4.

The site is looking pretty good this far. Now we will need to add the hosting plan information. Select the first grey box layer from the layers pallet on the right of the screen. Now add the word Bronze using Impact 36pt font.

Apply the following blending options to the bronze layer:
Drop Shadow

Gradient overlay

Popularity: 28% [?]

























on January 29th, 2008 at 11:43 pm
Really thank u a lot for providing this tutorials with images even, No one use to give tutorials with images………..
Hats off
Daniel
on February 12th, 2008 at 8:42 am
This tutorial is simply one of the best I’ve come across so far. Excellent - Thanks