Date added: 06 May 2007
Listed in: Website Layouts
Submitted by: Python
Views today: 5
Total view: 2662

1. Start off by creating a new document in Photoshop. Make it 780px wide and 600px high. Press Ctrl+A and then select the paint bucket tool. Fill the entire page with #E1E1E1 (light grey). Go to View >> New Guide. Enter the following.








2. Create a nother guide like above but this time use the following.







3. You should now see two blue lines going vertically down your page. These are guidelines which we can use to make sure the design stays a decent size. Now create a new layer and call it "centerBG". Do this by going to Layer >> New Layer and then type in the layer name and click OK.







4. Now using the Rectangular Marquee tool select evrything from the right hand side of the first guide and the left hand side of the second guide. This should select everything in between the two guidelines.







5. Now select the Paint Bucket Tool.







6. Set your foreground colour to #FFFFFF (white) and then fill in the selected area. You should have the following. I have shrinked my image down though so yours will be full size.







7. Right-click on your mainBg layer and go to Blending Options. On the left hand side click on Drop Shadow and give it the following settings.







8. Now select Stroke on the left and give it the following.







9. You should now have the following.







10. Next we need to create a new guide. Just like before go to View >> New Guide and give it the following. This will create a horizontal guide across the top.







11. Using the Rectangular Marquee tool select everything within the top box. By this I mean everyting between the two vertical guides and above our new horizontal guide. Create a new layer and call it "topbar". Using the Paint Bucket tool fill in the selected area with #B2B2B2 (medium grey). You should then have the following.







12. Create another guide. Give it the following.







13. Now using the Rectangular Marquee Tool select within the two vertical guides, from the first horizontal guide to our new horizontal guide. Then select the Paint Bucket tool. Fill in the selected area with #EFEFEF. Right click on the headerBG layer and go to Blending Options. Then on the left hand side select gradient overlay and use the following.







14. Right click on the topbar layer and Duplicate it and call it botbar. Make sure that the botbar layer is beneath the header layer. Then simply drag the bar down using the pointer tool so that it is just below the header. Only have it so a tiny amount of it is showing.







15. Create a new guide using the following.







16. Using the marquee tool select everything from the bottom of the header guide down to the new guide we just created. Make sure its inside the two vertical guides also. Create a new layer and call it "navBG". Now using the paint bucket tool fill in the selected area with #999999. Make sure that the navBG layer is below the botbar layer.







17. Right click on headerBG and select Copy Layer Style. Now right click on the navBG layer and select Past Layer Style.








18. Now using the Text tool click on your navigation. Then type in whatever links you want. As for font Im using "Calibri" at size 11pt. My text is white.







19. Again using the text tool click on your header. Now type in the name of your web site. You should make this text bigger. For this part I am using two different colours to make it look better.


And thats it - You have now succesfully created the basic skeleton of a web site. From this you can add your own content as well as a logo image and use it as a web site. You will of course have to slice it first but thats another tutorial...

Here is my final result. Click on the image for a full view.