Create a glossy hosting layout

21 May 2010/7 Comments/in Interface Design, PSD Templates, Templates, Tutorials /by admin

In this tutorial i will show you how easy is to create a glossy web hosting layout. I will use the 960 grid system because it will be very easy for you to align this layout perfectly. if you want good results alignment of the layout is one of the most important think when you design a layout.

Step 1 – Prepare your layout.

After you download the 960 grid layout, please open the Photoshop PSD file, and make sure you have the guides visible. I case you can not see some blue vertical lines please go to View > Show > Guides

Step 2 – Create the background of the hosting layout.

Create a new layer ( Shift + cmd + alt + N ) or ( Shift + CTRL + ALT + N  for windows users), and then go to Edit > Fill and use the following color #24282b to fill the new layer.

Tip : you can fill this layer with the same color, if you use Paint Bucket Tool. Set your foreground color to #24282b, and click on time on your canvas.

Step 3 – Add noise on the background

Now we will add some noise over this layer. To add noise simply go to Filter > Noise > Add noise, and use the following settings:

I will create a new layer on top of all layers ( Shift + cmd + alt + N ) or ( Shift + CTRL + ALT + N  for windows users) and then i will select Brush Tool.

Step 4 – Create a white area on your layout to make it stand out.

I will change my foreground color to white – #FFFFFF, and i will select a smooth round brush ( please use a big brush – around 600-700 pixels ). I will click one time on the top of the layout, like in the following image.

The next step is to change the blending mode for this layer to Overlay

As you can see it is not a big difference, but these type of details will change your overall look of this hosting layout.

Step 5  – Create a horizontal navigation bar with a 3D look

I will select Rounded Rectangle Tool ( set the radius to 30 pixels ) and then create a new shape on top of the hosting layout.

If you have the guides visible, you will notice that i have created this navigation bar exactly. In my next steps i will turn on the guides to see better what i try to achieve.

Step 6 – Add layer styles for the navigation bar

For this layer i will add the following layer styles

This is my result

Step 7 – Create a glossy area on your navigation bar

With Rounded rectangle tool, please create another shape, and place it like in the following image.

For this white shape please add the following layer styles.

This is my result so far. Now i will show you how this button is aligned. I will enable the Guides in the next screen shot. please note that my guides was always enabled, and when i try to show you the screenshot i hide them for a few seconds.

I like this type of navigation bar very much, because it allow users to see very good all sections of your website.

Step 8  – Add a nice shadow under this button

I will change my foreground color to black, and with Elipse Tool i will create a shape under this shinny navigation bar.

Then i will apply a Filter effect for this black shadow. I will go to Filter > Blur > Gaussian blur, and i will use the following settings

Step 9 – Congrats !!! – You have a nice looking 3D navigation bar

This is how it looks. Now you can see how important is the white blur applied on the background. This navigation bar has a nice 3D look.

Step 10 – Add some text buttons

With Horizontal Type Tool i will write there some text. I will use Myriad pro, Semibold , 14 pixels.

Step 11 – Start creating the body of the hosting layout

Now it is time to create the body of the layout. one more time i will use Rounded Rectangle tool ( this time i will use a radius of 7 pixels ), and i will create a new shape under the navigation bar.

Step 12 – Add more details on your layout

Also for this shape i will add some layer styles. the more details you have the better will look your hosting template.

Step 13 – Create the footer of the layout

Under this shape i will create another one

I will add the following layer styles

After you apply all the settings from above, your footer will look like mine.

Step 14 – Fill your hosting layout with text

With horizontal type tool i will add text over this layout. i will not explain how to do it, because it is very easy.

Step 15 – Add images and icons on your template

On the body of this hosting layout i will add a nice 3D image with a Mac, and some logos on the bottom part of the body.

Now i will use some icons from the following set:

This set of icons is available only for Premium members

I will place the icons like in the following image

Step 16 – Add some vertical and horizontal lines

Now i will add some lines between different areas of the layout. I will show you the final result, and then i will explain how the lines was made.

The easiest way to create these lines is to use the Line tool ( 1 pixel ). As you can see the extremities of the lines are erased.

To be able to erase the lines first you need to right click on the layer in your layer palette, and then you need to select rastrize layer. Only in this way you can grab Eraser tool, and with a smooth round brush you can delete the extremities of the lines.

My last step is to create on the top right side a area which allows your customers to log in to their administration panel.

You can use also the layer styles from this package

Please note that you need to apply for a premium account in order to download all our resources. Each account will allow you to download all our resources, adn also the next one we will release in the next year.

Final result

This is how my hosting layout looks like. Please click on this image to see the full size layout.

Download this PSD layout – Register for a premium account

Please note that you can download this layout only if you register for a Premium account.

If you are a Premium User download this PSD layout from here

or click the following button.