Grafpedia

Web hosting layout

In this tutorial I will show you how to create a very simple but very attractive web hosting layout.

A few days ago i’ve showed you that images are very important when you create a layout. Here is the tutorial i am talking about: Tutorial. In this tutorial i will create a sleek web hosting layout without any image. All will be only text and very nice gradients. All from this set of 27.000 Gradients

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

Join our VIP membership. For 9.95$ you can download all PSD layouts for each tutorial + our huge collection of premium downloads: brushes, vectors, layer styles, gradients, etc..