Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web Design Layout #6

Web Design Layout #6


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: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Web Design Layout #6"

Captcha