Loading ...
Create a new document 800×800 pixels with a white background. Select the rectangle tool and draw a black rectangle at the the top of your canvas, then add these layer styles.
Your rectangle should now look like this.
Still with the rectangle tool create a 2nd rectangle underneath the one you just created, but this time make it a little bit bigger and add these layer styles.
You should have something like this.
Now duplicate your blue rectangle and place it at the bottom of your canvas, this will be our footer later.
Now with the color #88763d select the type tool and type out your navigation, also with the color white type your site slogan and title.
You will notice i have alligned my text and title on the right, you will see why in the next few steps. Select the rounded rectangle tool and draw out a rectangle as seen below.
Here are the layer styles to get it looking like mine, first thou set the opacity to 60%.
Now you have it looking like mine add the rest of your navigation, ive also used some icons from the custom shapes menu.
Now find a picture, this can be a picture of anything that reflects your site, but for this example im going to use some grass. Once you have your image, resize and allign it like so (see image below).
On my site i want to have a members section, so i have created an example form of how i want it too look. (which can all be done using CSS).
Now im going to split my site into 3 sections, this is how i want it too look.
Now i shall enter my example content, which is mainly text.
Once you have your example content etc… im going to add some buttons for other stuff. Select the rectangle tool and draw a small long button, the same size as the buttons shown above (not a member & register now buttons).Once you have your rectangles drawn add these layer styles.
GREEN BUTTON
BLUE BUTTON
Once you have added your buttons you should have something like this.
Now all thats left is to add some details on your footer.
Heres is the full size view. PSD is available below also.
23 Responses to “Web Design Layout #3 Tutorial”
Mike Says:
Is there a template already made for this? Preferably WordPress?
ADMIN Says:
im sorry no there isnt, you’l have to code it to wordpress yourself
Mike Says:
What about an html one?
ddd Says:
Looks like everyone adopted the windows style.
Used Cars Says:
Nice tutorial. I liked the color schemes and design.
Aram Says:
It’s real good changeable. It’s easy to change colours and buttons. I do love this one!
Dynamiek Says:
thx for the tut bro im gonna use this one probs for ma portfolio, love how u can edit this one to your own style and taste great work !
Me Says:
Hi I just wanted to ask, wether I’am allowed to use this Design (with a few changes) for my Site.
ADMIN Says:
you are free to,
to copy, distribute, display, and perform the work
under the following CONDITIONS:
You must give the original author credit.
You may not use this work for commercial purposes.
You may not alter, transform, or build upon this work.
PhotoshopHome Says:
nice tutorial.
Peter Says:
Nice layout. What font is used for the navigation?
Danh ba web 2.0 Says:
Thanks tutorial ! It’s great for me
Seth Says:
how would you make all the content area expandable?
ADMIN Says:
in css?
Seth Says:
yea i guess so…or whatever way would be easiest
Andrew Says:
is no free psd, you have to buy it …
miletic Says:
Nice design!
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