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“






17 Responses to “Web Design Layout #6”
Jesi Says:
Awesome tut! Very nice finish :)
Xphunt3r Says:
I really enjoy your tuts.. Nice one
Neil Says:
Another good one! You thought anymore about those video tutorials??
Ahmad .. Says:
Nice one..
I’m waiting for the new ..
photoshop free tutorials Says:
this is simply great looking for some more
Basant Says:
Nice, make more beautiful it
Aysha Says:
nice
I’m waiting for the new ..
make more
mj Says:
thank you..
this site is very nice.
ADK Says:
That’s a good one. Cool.
Palomino Says:
Nice :) thank you
Elliot Says:
Thank you for this tut, i love your web designs =)
Keep it Up!
ADMIN Says:
CSS template now added
Theo Says:
Cool design.
I like the concept
Mathew Edison Says:
I like it, I like it a lot! :D
Greg Langford Says:
Very nice layout, clean and professional.
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online