My second tutorial!, Clean webhosting layout!

cipcip · #1 (**permalink**) 09-14-2007, 11:02 PM

Well ... this is my second tutorial ever ...
In this tutorial, we are going to create a clean and sleak hosting template ...
So here it goes ....
This is a preview of what we are going to be making ...

Now ...
First of all start with a 760px x 700px white canvas ...
Download and fill it with this pattern ...

Using the rounded rectangle tool ... make a black box ( #000000 ) like in the following picture ....

Next ... we will add some buttons vertically on this black box ... so we can add more colour to it ...
Just make a rectangle with the rectangle tool .. and add a gradient to it ... with any colours you like ... we will make 4 buttons ... add various colours to it ...
Now you need to have something like this:

Next ... add your logo or just write something to describe your website ... i wrote GFX Hosting ...and add text to your buttons made from the previous step ...
Now you must have something like this ...

Next add a computer ... or something to describe what you are doing ...

Now for the header and the footer of the page ... use the rectangle tool too make a thin rectangle with the following colour ... #f3f3f3 ( light grey )
Now you need to have something like this:

Next ... on the stripes you made earlier ... add the following ... on the footer add your copyright ... and on your header add the menu ...
Something like this:

Now you will see on the following screenshot some stripes on the page ... that is for giving an idea of how we will arrange things around ... you can keep them or not after you`ll finish ... .

Well the next steps are easly ... use your favourite font to cover the page up ... so here it goes ... first create the news cell ... in the top right page ...

In the next cell .. add a domain whois box ...

In the next cell ... add a newsletter box ... i think that every site needs something like this .. to keep it`s members informed ...

Now ... the last cell in the bottom right corner of the page ... the statistics cell ...

Now we will start with the center ... just do the same thing ... using your favourite font ... add your text ....
In the first one ... the welcome part .... like this ...

In the next one ... your hosting plans ... i have added with the rounded rectangle tool ... a rounded grey box ... and i wrote on it ... so it can be more nicer ...

...

And finally in the last one ... add something about domains .. .your promos ... or anything else ... i`ve just inserted a dummy text ...

I really hope that you liked my tutorial
Thanks!