Tutorials 007

In this tutorial you will learn how to make a nice and clean web 2.0 stylish layout.
We will use layer styles to create this simple and good looking layout.

1. Create a new document with settings like on picture below.

2. Ok, now we will create a header.
Create new layer (CTRL + SHIFT + N) and name it header.
Get Rectangular Marquee Tool (M) set style to fixed.
Width 760 px, height 120 px.

Make a selection like on picture below.

3. Fill your selection with any color.
Go to Layer -> Layer Styles -> Stroke , use settings like on picture below.

Now go to Gradient Overlay style and use following settings

Last one, Drop Shadow style.

3. Add some text to your header and you’re done with header. You can also add some logo
or something, but for purpose of this tutorial I added only text with reflection.
Learn how to make “Web 2.0 stylish text with reflection”

4. Allright, let’s create navigation bar.
Make new layer (CTRL + SHIFT + N) name it navigaton.

Grab Rectangular Marquee Tool (M), style fixed.
Width 760 px, height 25 px. Place it like on picture below.

Fill with any color.
Now, download “Tutorials007 - web 2.0 orange style“, unrar it and put into Photoshop styles folder.
Load it at photoshop and apply to navigation layer.

This is what you should get

5. Add some navigation links. I used font Tahoma, size 14, bold.
Then grab a pencil tool and make a little line (width 1 px, height 14 px) with some dark orange color.
This line we will put between navigation links.
See the picture for better understaning.

6. Allright, we set up header and navigation, lets go to sidebar and content area.
Make a new layer (CTRL + SHIFT + N),name it sidebar1.
Grab Rectangular Marquee Tool (M) style fixed size.
Width 160 px, height 160 px.

Make a selection like o picture below.

Fill this selection with white (#FFFFFF) color.

No make new layer again. Make another selection with width 160 px, height 25 px.
Place like on picture below and fill with any color.

Add a layer style from step 4 to this layer. (Style you’ve downloaded.), but without drop shadow.
Hit CTRL + E to merge this layer and sidebar1 layer.

Now add Drop Shadow to this new layer (merged layer).

Copy this layer and place it below sidebar1 layer.

7. To create content area use the same principes just different size.
Here’s the final image.

Remember, these are just the basics of web page design.

Your education is critical to getting the job you want, so look into online degree programs in the field that interests you. You can get a degree in web design and start learning the tools of the trade you are passionate about. Check out the different online univerisites that have your program of interest!