Posted on Monday, 14th January 2008 by tutorials007
In this tutorial you will learn how to make a clean website layout.
Main motivation for this design was to create a simple, clean designers community design.
1. Make new document 800×600. White as background color.
2. Make new layer and name it navigation.
Make a selection by using Recangular Marquee Tool (M) 760 x 40.
When you made your selection go to Select -> Modify -> Smooth
enter 2 as sample radius.
This will make our selection a bit rounded.
Place it like on picture below.
![]()
3. Fill your selection with some color and add following styles to it.
Stroke

Gradient Overlay

Add some text for navigation and here you are.
This is how it should look now.
![]()
4. Now, to make a header text we will make simple text with reflection,
it looks pretty good and it’s easy to make. You can also add some shape as a logo.
Go to “Web 2.0 text with reflection” to learn how to make a text with reflection.
![]()
5. Now we will add some advetising boxes to our site.
Make new layer and name it advertising box.
Grab Rectangular Marquee Tool (M) and make a selection with width 470 and height 100 pixels.
Place it like on picture below, make it smooth like in step 2 and
fill with #EAEAEA.
Do not deselect.
Now by holding ALT and making another selection crop a piece of previous selection out.
This is what you should get.
Make a new layer and fill your selection with some color and ad a style like in step 3.
Let’s go back to our advertising box layer. Click on it and add following layer styles to it
Stroke

Gradient Overlay

You should have this now
6. Now, you should make the other boxes using step 5. Make everything the same just change their sizes…go practice ![]()
Add some text, shapes…and voila.
and another one
![]()
Go to online college and learn more about web and graphical design! Make your hobby a career with a graphic design degree in your free time. It’s easy to learn online and you should always value your education. Look into an online
degree program today!
Posted in Photoshop Tutorials | Comments (9)







January 15th, 2008 at 5:50 pm
Keep em comin man!
January 15th, 2008 at 6:09 pm
Will do my best! Thanks for your nice words
January 20th, 2008 at 4:39 pm
Thank you! I’m make it right away and code it.
January 20th, 2008 at 4:47 pm
Cool, post a link later to coded template.
January 25th, 2008 at 5:03 am
Thanks for your help!
February 2nd, 2008 at 5:51 am
Thanks for sharing
February 6th, 2008 at 10:26 am
cool, thanks for the tutorial.
February 11th, 2008 at 2:47 am
Thanks for the GREAT tutorial. =]
October 20th, 2008 at 5:18 pm
[...] Tutorials007.com - Clean Site Layout [...]