Modern personal web layout

Posted on 27. Jan, 2008 by tutorials007 in Photoshop Tutorials 20,160 views

In this tutorial you will learn how to make a modern personaql layout.
Layout which you can use to express yourself on the internet.
To show people who you are and what you are.

1. Create a new document, width 600 px, height 600 px, background color – white.
2. Make a new layer.Name it header.
By using Rectangular Marquee Tool (M) with width 580 px and height 110 px make a
selection like on picture below.

Fill it with some color.

3. Add following layer styles to your header layer

Drop Shadow

Inner Shadow

Bevel and Emboss

Color Overlay
Use this color: #EDEDED

Stroke

Hit OK and proceed to next step.

4. Now hold CTRL and click on your header layer to make a selection around it.
Go to Select -> Modify -> Contract. Type 6 in contract box. Hit OK.

You should now have something like this.

Now, once again go to Select -> Modify -> Contract, but now enter 1 in contract value.
Make a new layer, call it header fill – this will be our fill of our header.
Fill this layer with white color.

Now, I’ used an image which I had from earlier on my computer as a header fill.
You could use mine or you can make your own or whatever you like.
Here’s mine image.

If you’re using my image, open it up in photoshop and then copy it to your layout file.
Place here, over the header fill layer by using your mouse or keyboard arrows.

5. We are done with header. Now we will add a placeholder for site title and also a site title text.
Grab Rectangular Marquee Tool (M), width 125 px, height 15 px. Place it like on picture below and click on header layer.

Make sure that you are on header layer and fill with any color.
Move your header layer above the header fill image in layers window.

Now by using Horizontal Type Tool (T) add some text. I used font 04b08.

6. That’s it with header part. Now we will add navigation buttons.
So, pick up rectangular marquee tool (m) and make a selection, width 80 px, height 15 px.

Place you selection like on picture below.

Make a new layer and fill your selection with any color. Now, CTRL + D to deselect and apply the same layer styles as in header.
Copy your layer for 4-5 times and place them like on picture below.

Add some text to your buttons. I used font 04b08.

7. Now, we will make a box where our fresh content will be. Make it like you’ve made header.
Make a selection 440×410 pixels. Fill with any color, add the same layer styles as in header or navigation. Go to Select -> Modify -> Contract, 6 pixels contract.
Hit Delete and CTRL+D to deselect. Place your layer like on picture below.

Now, make a new layer. Make a selection using Rectangular Marquee Tool (M), width 426 px, height 25. Fill this selection with #EDEDED.
Hit CTRL + D to deselect and place your layer like on picture below.

Make new layer again and with Pencil Tool (B) make a dotted line. (Set size of pencil to 1 pixel and paint every second pixel).
Also, I’ve added some text. I think you all know how to add text in photoshop. Don’t you?

Now we will add sideboxes.

8. Make new layer, and make a selection width 130 px, height 180 px, fill with any color and add the same layer styles as in header.
Go to Select->Modify->Contract. enter 6 as cotract value. Deselect
Now make new layer. Make a selection, width 115px, height 25px. Fill it with #EDEDED. Place it like on picture below.
Again, make new layer and add a dotted line. I think you know how to do that.

Now, make another sidebox. Place it below first sidebox.
That’s it. You’ve got a layout that’s ready to be sliced.

Here’s how it looks with some text.

Learn about web layouts and more with an online web design degree. It’s easy to take class at an online college in your spare time! Learning online is a great way to further your education and change career tracks. Look into getting an online
bachelor degree.