Monday, May 18, 2009

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

118

With Rounded Rectangle Tool I will create a big shape. I will use a white color

215

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

314

I will select Rounded Rectangle Tool, and I will create 4 shapes

44

For all this shapes I will add the following layer styles

54

64

74

84

This is my result

94

I will create some buttons with Rectangle Tool

104

For this buttons I will add the following layer styles

119

123

133

143

And here are my buttons

153

I will add some text in this area

163

Then I will add some small arrows with Horizontal Type Tool

174

Then I will add some small pixel icons

182

I will follow the same steps also for my other 3 boxes. I will add different text until I have the following result

192

On the right side I will add another shape with Rounded Rectangle Tool

202

I will add the following layer styles for this blue shape

216

222

232

242

252

After I will add some text and a button this is how my info box looks like

262

I will create 2 lines with Line Tool. Both lines need to have the weight of 1 pixel

272

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

282

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

292

I will use different colors for the lines.
On the line number 2 I will add the following layer styles

302

315

This is my result

323

On the top of my hosting layout I will add some text button, and between them I will add some lines.

331

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

341

On the right side of my simple hosting layout I will create some small pixel icons.

351

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

361

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

371

I will create a new layer above all layers, and with Brush Tool I will make a small drawing with a smooth round brush

381

I will change the blending mode for this layer to Soft light

391

This is my final hosting layout. I hope you like it

40




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 :-)

1 comment:

web design company said...

Thanks for your great presentation of web 2.0 layout.Looks ultimate.Cheers !