Web 2.0 layout

Preview full screen psd layout

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

NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)

=================================
=== For more tutorials keep visiting ;) ===
= http://photoshop-manic.blogspot.com =
=================================

Adobe Photoshop Training - Photoshop Classes -
Photoshop Tutorial - Photoshop Seminars -
Photoshop CS3 - Photoshop CS4 - Photoshop 7 -
Photoshop Tutorial Downloads - Lots more :-)