Posted on Monday, 14th January 2008 by tutorials007

clean_layout250x100.gif

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.

clean_layout_1.gif
3. Fill your selection with some color and add following styles to it.
Stroke

clean_layout_21.gif

Gradient Overlay

clean_layout_3.gif

Add some text for navigation and here you are.
This is how it should look now.

clean_layout_4.gif
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.

clean_layout_5.gif
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.

clean_layout_6.gif

Now by holding ALT and making another selection crop a piece of previous selection out.
This is what you should get.

clean_layout_7.gif

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

clean_layout_8.gif

Gradient Overlay

clean_layout_9.gif

You should have this now

clean_layout_101.gif

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.

clean_layout_11.gif

and another one
clean_layout_12.gif
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)



9 Responses to “Clean site layout”

  1. Anto Says:

    Keep em comin man!

  2. tutorials007 Says:

    Will do my best! Thanks for your nice words ;)

  3. Kai Says:

    Thank you! I’m make it right away and code it. ;)

  4. tutorials007 Says:

    Cool, post a link later to coded template.

  5. mgch Says:

    Thanks for your help!

  6. Doodee Says:

    Thanks for sharing

  7. Stephen Says:

    cool, thanks for the tutorial.

  8. Mike Says:

    Thanks for the GREAT tutorial. =]

  9. EliteNick.com » Blog Archive » 20 Useful Web Design Articles, Generators and Tutorials Says:

    [...] Tutorials007.com - Clean Site Layout [...]

Leave a Reply