Suport the Website

Powered By EXEIdeas

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 2nd layer below the 1st one and move it a bit lower,under the 1st 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

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 45o 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!!







Post a Comment