In this tutorial we’re going to make a nice blue web layout. I’m calling it “Noisy” because the background incorporates the filter, Filter » Noise » Add Noise.

First off, lets make the background. This is pretty simple. First of all, fill the background layer with #2a3038. Then right click on the background layer in the layer palette and select Layer From Background…. Then go to Filter » Noise » Add Noise. Set amount to 1.5 and click OK.

Then grab your gradient tool, change the foreground to #3b4a54, and pick the foreground to transparent gradient. Draw a gradient like below at the very top on a new layer (hold shift to get a straight gradient).

Set the blending mode on this layer to Color Dodge and set opacity to about 59%. Now, lets work on the content area background. First of all we’re going to need two selections which can be easily made with the rectangular marquee tool The first one should look like something in the image below. Once you’ve made the selection, fill it with #3985b1 on a new layer. Call this layer “blue background”

Make a second selection like below, and fill it with #dee6ef on another new layer. Rename it to “main background”.

Then grab the polygonal lasso tool, and make a selection as shown below. Then selection the blue background layer and go to Edit » Cut. Then go to Edit » Paste. Call this layer “Triangle”. Go to Edit » Transform » Flip Horizontal and then Edit » Transform » Flip Vertical. Select the paint bucket tool and change your foreground to #2b4859 and fill the triangle. After that, right click on the layer and select Blending Options…, and go to Drop Shadow. Give it these settings:

You should end up with something like this:

Finally, right click on the Blue Background layer and give it these stroke settings:

Then right click on the “Blue Background” layer and select “Copy Layer Style”, then right click on the “main background” layer and select Paste Layer Style. At the end of this step you should have:

Add your logo or whatever to the top left hand corner of the web layout, as shown below. This is just Myriad Pro Semibold Size 37pt for the V and size 28pt for the rest of the text.

Then lets continue to make the Search bar What I did was grabbed the rounded rectangle tool, and drew 2 rectangles with the radius set to 2px. One was bigger than the other in width. The first rounded rectangle was in #abc0cc (the darker, longer one), and the second one was in #dde6ec (the lighter one obviously). I called the Darker, longer box “Search box”, and the smaller, lighter one “submit button”.

You might want to add some text to the search box. Below, the text in the search box is in Tahoma Regular with no anti-aliasing with Size set to 13pt, in #3f4c54. The text in the submit button is in Tahoma Bold with no anti-aliasing, in caps Size 13pt, in #3e4548.

Now, make a selection like below and fill it with #eaf0f6.

Set opacity set to 7%.

Make a small selection like below and fill it with #23343d on a new layer.

Right click on this layer and select Blending Options…. Select Drop Shadow and give it these settings:

Finally, add some text, as shown below. The text below is in Tahoma Bold Size 12pt, with no anti-aliasing in #cedde7.

Grab the rounded rectangle tool with radius set to 2px, and make two rectangles like below in #dee6ef.

Set both layers blending mode to soft light. Then add headers. Both headers are in #214556 Arial Regular in 18pt with no anti-aliasing.

Then add some content like I did below.

The pluses were just drawn with the pencil tool and are in #798692. The text is in Tahoma Regular Size 12pt in #676f78 with no anti-aliasing. The separating lines are easily made. First we need to make a pattern. To do this make a new document, 5px by 5px and make a new layer. Delete the background layer. Grab the pencil tool and set it to 1px. Change the foreground to black and draw a pattern like below:

Then go to Edit » Define Pattern. Name it whatever you want and click OK. Go back to the web layout and make a selection, 1px in height as shown below.

Fill it with #eaf0f6, and right click on this layer. Select Blending Options…. Select Pattern Overlay and change the pattern to the one you made a minute ago and click OK (theres no need to change any other settings). Then lower the opacity of this layer to about 37%. Duplicate for the rest of the list. I added a new content box underneath the other two rectangles as shown below. The content box is in #2a3236, with the write a tutorial text in Arial Regular Size 18pt with anti-aliasing set to none in #b9d1df. The “Earn up to..” text is in Arial Regular Size 13pt with anti-aliasing set to none in #667e8c.

Finally lets work on the main content area. The title in the following image is in Arial Regular Size 18pt with Anti Aliasing set to none in #234c64. The text under that is in Tahoma Regular (with some text in bold) Size 13pt, with anti-aliasing set to none in #658598. Then I added a seperating line and a stock using the rectangular marquee, filled the following area with #cdd4dd.

Do not deselect the selection you made above. Then go to Select » Modify » Contract by 5px. Find a suitable stock photo, and copy it. Then go to Edit » Paste Into…. Then add some more content as shown below.

Yep! We’re almost done. The footer shouldn’t take that long to do either. Make a selection at the bottom of the main background (as shown below) and fill it with #405058 on a new layer.

Make another selection like below and fill it with #2a3236 on a new layer, and lower the opacity to about 28%.

Make a new selection in the footer and fill it with #2a3236. The selection should look something like below.

Then lower the opacity on that layer to about 44% and duplicate until there are three boxes, one beneath the other as shown in the following picture.

Then its just a case of adding some text to the footer. Here’s how I did it.

The “Top 5″ and “Copyright 2008 Vib..” text is in Tahoma size 15pt, in bold with anti-aliasing set to none. #cfdde4. The “Lorem Ipsum doll..” text is in Tahoma Regular size 12pt, with no anti-aliasing in #748790. Finally, the “website.com.. website1.co..” text is in Tahoma Bold Size 12pt, with no anti-aliasing in #7b888f and we’re done. Hope you enjoyed this tutorial. Here’s what it should look like:

Tags: background, blue, color, dark, darker, dodge, filter, foreground, layout, light, noise, noisy, overlay, pattern, photo, plus, stock, tut, tutorial, tutorials, tuts, web