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.

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.

image 2

You should have something like this.

image 3

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

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.

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.

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.

image 7

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

image 8

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

image 9

Now add your content for each box.

image 10

image 11

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.

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



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Web design layout 6"

Captcha