Fresh Light Blue Website Layout

Hi. In this tutorial I will show you how to create a light blue-ish layout.

Create a new Photoshop document (Mine is 1024 x 728px).

Fill it in with #e8ebed.

Create New Layer.

Grab the Rectangle Tool (U) and create a rectangle as shown. The color is not important as we will be applying a gradient to the next step:

Apply the gradient using the following settings:

Let’s create the vertical menu now which is :

>Create New Layer!

>Grab the Line Tool (U) – set it to 2 px weight.

>Set the Foreground Color to #005697.

>Holding the Shift Key down – to draw a straight line, drag your coursor from left to right.

>Duplicate the layer.Change its color to #9d9d9d.

For BEGINNERS:

Changing one layer’s color can be done either by opening the Blending Options Panel and checking “Color Overlay” , afterwards selecting the wanted color, either holding down the CTRL key while left clicking on the layer’s thumbnail (to load its selection) , and colouring the selection using the Paint Bucket Tool (G).

>Place the 2^nd layer below the 1^st one and move it a bit lower,under the 1^st one.

>Duplicate the layers 4 times more and place them as shown in the picture:

Using the Type Tool add some text:

Draw little squares and place them in front of every line of text as shown.

#5fa4d9

Add social media buttons:

You can download them  here

 http://webtoolkit4.me/download/glossy_social.zip.

To learn how to get that nice reflection effect check out on this tutorial !

Now add a nice picture and change its Blending Mode to Screen;

create a nice reflection for this picture aswell, and add some text on a white background (50% Opacity):

 Will create now the upper part of our layout:

Create a new layer as shown:

--------------------------------THIS GOES ABOVE THE BANNER CREATED PREVIOUSLY----------------------------------

Open the Blending Options Panel and add a gradient using the following settings:

Create a new layer.Grab the Rectangle Tool and, with the Foregound Color set to #2e89cf, create a rectangle :

Rotate it to 45^o and lower its Opacity to 50%. Now duplicate the layer several times and place them as shown:

Select the Type Tool and create the logo – add some reflection !

Let’s create the Search Form !

Create a new layer. Grab the Rounded Rectangle Tool , set the radius to 20 px and draw a rounded rectangle using #ededed as foreground color.

Lower its opacity to 80%.

Create a new layer. Create a new rectangle and fill it in with #ededed. Apply a 1 px Stroke using a dark grey as color:

Next to it create an other rectangle (into an other layer) and, besides Stroke, apply a slight Gradient too -  bright grey to white :

Add some text and we’re done with the upper part:

To create the “London Weather” section, we need first to create a new rectangle, in a new layer.  Apply the same style as the Search button – Stroke & Gradient.

Now draw a banner and use for it the same gradient as used for the main blue banner .Add some text and some pictures with clouds and you are done:

For the remaining of the layout, I have inserted several pictures and some text. For any questions you might have about “How to?” post a comm..

That’s itJ!

Don’t forget to stay in touch by following me on Twitter or become a fan on Facebook!

Thanks for reading my blog!!

You might also be interested in :

	Spaceship/Goa'uld Death Glider		Full website layout
	Fresh awesome header		Awesome menu for your website