Clean site layout

Posted on 14. Jan, 2008 by tutorials007 in Photoshop Tutorials

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!