HV-Designs.co.uk

July 13th, 2008 in Photoshop Tutorials by Richard Carpenter

Web Design Layout #6

• Share

Create a new document 1000×1355 select the colors #2493b0 and #23454c, select the gradient tool and with a linear gradient fill your background. Lightest color at the top. Now select the rectangular marquee tool, draw a rectangle the width of your canvas and about 50-150 pixels in height, fill with the color ##222223. You should have something like this.

Now on your rectangle add some welcome text and 2 tabbed like buttons which were created using the rounded rectangle tool, then just chopping off the bottom rounded edges. Add this layer style to complete the effect.

You should have something like this.

Now add your website title, slogan and logo to the right of the layout, add a simple outerglow to your text.

Now for this next step you will need some cloud brushes (included in the PSD download), add some clounds underneath your rectangle and website title.

Try not to make the clouds reach right across the canvas, keep them all in the center if possilable. Now select the rounded rectangle tool and draw out 2 rectangles fill one with the color white and the other with the color #212121. You should have something like this.

Now select the rectangular marquee tool and the color #ebebeb, draw a rectangle over the top of your white rounded rectangle then with the color above. Hold ctrl and click on your white rectangle layer, this should make a selection, now whilst the selection is active click your grey rectangle you just created and goto “select > inverse” then hit the delete key, you should be left with something like this.

Do the same again only this create a triangle in the corner.

Do the same as above untill you have a total of 6 boxes.

Now add your content for each box.

Underneath your last two boxes you need to add some more clouds, ive added 2 sets of cloud brushes and lowered the opacity of both to make them abit more realistic.

Now finally add your footer which is pretty much the same as the top navigation. Heres the final result.

Layout inspired by “misht“