website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Web Design Layout #6
rss

Web Design Layout #6

Author: Hv-Designs.co.uk More by this author


Create a new document 1000x1355 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.

Web Design Layout #6 image 1

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.

Web Design Layout #6 image 2

You should have something like this.

Web Design Layout #6 image 3

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

Web Design Layout #6 image 4

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

Web Design Layout #6 image 5

Try not to make the clouds reach right across the canvas, keep them all in the center if possibly. 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.

Web Design Layout #6 image 6

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 gray rectangle you just created and go to "select > inverse" then hit the delete key, you should be left with something like this.

Web Design Layout #6 image 7

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

Web Design Layout #6 image 8

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

Web Design Layout #6 image 9

Now add your content for each box.

Web Design Layout #6 image 10

Web Design Layout #6 image 11

Web Design Layout #6 image 12

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

Web Design Layout #6 image 13

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

Web Design Layout #6 Tutorial: Final Result



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Web Design Layout #6"