When you design web 2.0 layouts it is very good if you use only a few
colors.
In this tutorial i will use this technique to show you how easy is to
create a nice looking hosting layout
I will start with a new document with the following size: 960 x 900 pixels. With Gradient Tool, I will add a vertical gradient
With Rounded Rectangle Tool I will create a big shape. I will use a white color
I will duplicate this shape one time (select the layer first and then press CTRL+J). Change the color of this shape to #eaf5ff, and with Move Tool nudge the shape a few pixels to the bottom
I will select Rounded Rectangle Tool, and I will create 4 shapes
For all this shapes I will add the following layer styles
This is my result
I will create some buttons with Rectangle Tool
For this buttons I will add the following layer styles
And here are my buttons
I will add some text in this area
Then I will add some small arrows with Horizontal Type Tool
Then I will add some small pixel icons
I will follow the same steps also for my other 3 boxes. I will add different text until I have the following result
On the right side I will add another shape with Rounded Rectangle Tool
I will add the following layer styles for this blue shape
After I will add some text and a button this is how my info box looks like
I will create 2 lines with Line Tool. Both lines need to have the weight of 1 pixel
I will draw the lines under the Grafpedia text, then I will select both lines in my layer palette, and I will press on CTRL+E to merge the layers into a single one. With Eraser Too, I will delete the left and the right part of the lines
With Line Tool I will create other lines over my layout. Please press on the following image if you want to see the full size hosting layout
I will use different colors for the lines.
On the line number 2 I will add the following layer styles
This is my result
On the top of my hosting layout I will add some text button, and between them I will add some lines.
On my previous screen shot you can see a small arrow. I will zoom my document to understand how this small arrow was made. I have used Pencil Tool with a small brush (1 pixel) and I created the following arrow
On the right side of my simple hosting layout I will create some small pixel icons.
I am almost ready. I will write some text over my layout, and I am almost ready. Please click on the following image to see the full size layout
On the top of the website I will create another 2 shapes. I want to create a search box where your users will be able to search for domain names
I will create a new layer above all layers, and with Brush Tool I will make a small drawing with a smooth round brush
I will change the blending mode for this layer to Soft light
This is my final hosting layout. I hope you like it
