TutsArena

ZX5 Hosting: design a contemporary hosting site

by TutsArena - Templates, Tutorials

Web hosting web sites are quite popular nowadays and are certainly an often requested job for most web designers. This tutorial will teach you how to design a modern looking hosting template from scratch.

Final Outcome:

Click the image for a full-screen preview.

Step One: Starting Off

First off, open up your photoshop and make a new image. I used the dimensions 900px (width) x 890px (height)
If it isn’t already, fill your background layer with white.

Step Two: Header

Make a new layer, and grabbing the rectangular marquee tool and make a selection right along the top of your selection. The height of the selection will determine how high your header is.
Choose a very dark grey and a medium dark grey as your foreground and background colour, and using the gradient tool drag from the bottom of your selection the top.
This should give you a nice dark gradient in your header area:

Now go to Filter>Noise>Add Noise. Ensure Guassian and Monochromatic are both selected. You may want to fiddle with the amount to get something you like. I used 2.5%

Now its time to add our logo. For this tutorial we’re just going to create a simple text based logo. I grabbed the text tool and added some text, using two different fonts and two colours for the different words.
This created a simple but pretty attractive logo:

Then I simply added some blending options to give it a bit more of a professional feel:

Then I used a nice pixel font called SilkScreen to add a little slogan, taking the logos colouring and positioning into account as I added it:

Now add your navigation text. Be sure to put equal spaces between each link. I decided to use a colour from the logo in the navigation. I also set one link in the colour white, to show the rollover effect:
It’s important to ensure that you have Anti Aliasing (the little aa in the top text bar; as shown in the image below) to “none” when doing text for websites.

Step Three: Gradient

To add a professional and glossy feel, lets make a little gradient linking our header to the rest of the site.
First, make a new layer and press D to reset the colours and choose the gradient tool. Select the foreground to transparent gradient and drag from the top of the image to about half way down.
Then, using the move tool, drag the layer down until its one pixel below the banner, adding a little white border. Once the move tool is selected, you can use the arrow keys for accuracy.

Step Four: Banner

Next up is designing the banner. Using the eyedropper tool (Press I) Choose a colours out of your logo.
Then press x to flip your foreground and background colour, before choosing another. (you created a gradient earlier on so you should be able to chose the top and bottom colour (use the zoom tool to get them)
Make a new layer and grab the rectangular marquee tool. Make a large selection where you want your banner to go.

Grab the gradient tool, and like I showed you in a previous screenshot, choose the type of gradient, but this time get “Foreground to Background”. Select the “Radial Gradient” option from the top bar,
and drag from the bottom of your selection right up to the top of the image, or above, depending on how strong you want the gradient to be.

Then add some blending options to improve the look of your banner base. I used the ones shown below:

Using some awesome tech brushes that can be found here, i made two new layers and brushed onto the banner using white. I set both layers to Softlight.
Depending on the strength of your brushes, you may want to lower the opacity of the layers to make them blend into your banner nicely. Ensure the layers you brushed on are directly above the banner base layer,
and press ctrl+alt+g to group your layers. This will mean the layer will only show on top of the previous layer:

Now you need to find a good stock image of some towers/servers. If possible, find some that are on white backgrounds as it will make this next step a whole lot easier.
Paste in the stock image, and use the magic wand tool (press w) to select everything that isnt your servers. Press delete to get rid of these layers.
Then play around with opacitys and layer style (Hard Light/Overlay/Darken etc) to make your servers look good on your banner.

Now I added a cool little slogan with the text tool. Be mindful of how you present your text, dont be scared to use different fonts and sizes – this often improves the look drastically.
Likewise, think about your positioning in relation to what you already have on the banner.

Now add an outer glow to your text. If you used a colour other then white for your text, use that colour for the outer glow:

Next duplicate your logo layers and move them down onto your banner. Clear any layer styles they have and make them all the same one colour. Like the previous step, add an outer glow in the same colour.

Now with the text tool add some smaller text with perhaps a quote/slogan/guarentee onto your banner.

We need to make this text stand out as its only little against that big banner. Grab your rounded rectangle tool (press U; if you only get the normal rectanglar tool, press and hold that icon until it brings up the menu.
Make a new layer, and with black as your foreground colour, make a big rectangular shape behind your text. Set this layer to overlay and play around with the opacity until you get a nice look.

And there we have it, your banner should be finished. You may need to use the move tool to shuffle your different componants around until your positioning is good, just use your own judgement on that.

Step Five: Packages

Using your rectangular marquee tool with a radius of around 5px, create a rectangular marquee coming from under the banner to below it, and fill it with a dark to medium grey radial gradient.
Use the arrow keys to move it to align the shape with the side of the banner.

Apply some subtle blending options to your shapes to make them fit into your design:

Using the horizontal single row marquee tool (you can access that by holding in the rectangular marquee tool on the toolbar and choosing the horizontal one), make a selection on your base layer to outline a title area and hit delete.

Press Control and click your packages base layer on the layers tab to get a selection of the shape. Then make a new layer and fill it with black.
Set this layer to 41% opacity and using the rectangular marquee tool select everything below your white line and hit delete.
Again, once you’ve made your selection you can use the arrow keys and zoom in or out using the zoom tool (press z) for accuracy. This will give you a nice darker title effect.

Make a new layer. and do the same as the above to get your selection, but this time instead of filling with black, fill with an orange or whatever colour you’re using on your banner.
Do the same as above where you use the rectangular marquee tool, this time select all but a little bit of the layer at the bottom, and hit delete. Apply the below blending options:

Using your text tool, add some sample text onto your panel. Be sure to mix up your colours to keep it exciting, and for small text DO NOT use anti-aliasing (the option on the toolbar where you choose None/Crisp/Sharp/Strong/Smooth.
The raquo (») symbol can be done by holding alt and pressing 1, 7 then 5 on the number pad.

Next create another text layer for your price, and put it on the orange bar at the bottom of your panel. Add a white outer glow with low opacity to your text, to give a nice effect.
Make a new layer, and zoom in on your orange bar. Then using the rectangular marquee tool, create a one pixel wide line the height of your bar and fill it with white.
Duplicate this layer, and fill the second with black, moving it one pixel to the right. Play with the opacity level of each layer until you get a nice engraved effect as shown below:

Now you can either duplicate all your layers from the package tab, or redo step five, and you can give yourself a second package. Be sure to change the text for your second package!

Step Six: Side Panels

On a new layer, use the rectangular marquee tool to make a small selection, and grab your gradient tool. Using a dark to medium grey gradient like before, create a linear gradient.

Then add the blending options shown below:

Then use your text tool to add whatever text you want. Remember to set anti-aliasing to none as I said before, and vary your colours to keep it interesting.
I also added some black text with low opacity using the same font I used for my logo, just effectively replicating the logo in one colour.

Then I duplicated that title bar layer I’d made, and used the move tool to drag it down to below. I also added a little bit of text onto this bar.

I repeated the steps above to create two more panels. For the second one, I used a small icon which you can pick up from places such as deviantart, freeware sites such as TutsArena, or buy from places such as iStockPhoto.
Remember to vary the colours and font effects (bold/normal) to keep it looking good and fresh.

Step Seven: Content

For the content, i just simply used the text tool to add first a large title line, then the main content. Sorry to keep droning on, but do be sure to vary colours and paragraphs to keep your text standing out.
If its just a big block of text looking the same, it’ll look boring and people won’t read it.

For the badge I used a little freeware vector sticker (again look for this sort of stuff on Deviantart) and added some text using the text tool before putting a subtle white outer glow.

Step Eight: Footer

For the footer, make a new layer and use the rectangular marquee tool to make a selection right along the bottom of the image. Use the gradient tool and fill the layer with a very dark to dark linear greadient.

Then go to Filter>Noise>Add Noise and make sure both Gaussian and Monochromatic are selected. Use your judgement for the amount of noise, but I used around 4%.

Next grab that horizontal single row marquee tool, and make a selection on your footer 2 pixels below the top of the footer (zoom in and use the arrow keys for accuracy). Select your footer layer and hit delete.

Then I added some text onto the left hand side. This is where your copyright information and maybe links to Privacy/FAQ pages will go.

Finally I went back and duplicated my text logo layer from aaaages ago, and moved it down to the footer. I made the text quite alot smaller to fit onto the footer, and put it on the right hand side of the footer.

And there you have it, the footer’s done and with that the whole layout should be done!

The finished project!

Click the image for a full-screen preview.

Thankyou for reading this tutorial, and I sincerely hope it’s useful!

May I take this opportunity to wish you all the best in your future designing.