Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Webpage Layout

Webpage Layout

Max Wilson Web Layout May 25, 2006

Now then, when making a webpage you must always take into consideration size, if you make a document which is 1024x768 then it won't fit on the page length wise or height, because 1024x768 is the whole size of your monitor, if you make something slightly smaller than that, so it does fit on the page, then people will smaller monitors, e.g. people who still use 800x600 resolution will have to scroll for hours before they see the whole view of your site. You're probably wondering why I'm going on about this and nobody uses 800x600 resolution these days, BUT you'd be surprised at how many people still do, and let's be fair, your site isn't going to look good to everyone unless everyone can look at it.

The best size for a webpage layout would be (in my opinion) 720x540, because doing this makes even 800X600 folk able to have room to see about your site. You may be thinking "Jeez that's going to look tiny on my screen" this isn't true! The layout can be done fine, by using stretching of images (which I will write a tutorial on after this one)

So now you understand the basics to size your website, you can go ahead and make one!

Start by making a 720x540 canvas, chose any colors you want, I chose F3F3F3 for my background and E1E1E1 for my foreground.

Create yourself a nice big rectangle using your Rounded Rectangle Toolalong the top of your image. This will be the header of your website, so make it any size you want it to be.

Add the following styles to your shape:

image 1

image 2

image 3

*note* I added a simple gradient on my shape, just to make it look a little nicer, you can add anything you want, like a pattern overlay or anything really, make it look nice!

Now you have done this, it should look something like this:

image 4

Looking nice already right?

Now we want to spice the header image up a bit, so I'm going to add another rectangle using my Rounded Rectangle Tool and fill it with 545454 I also gave it the following settings. You do the same!

image 5

image 6

Then I came up with something like this:

image 7

With my header, I also added a shine, which IF you've seen my Shine Tutorial, you can do too!

Here's what mine now looks like, with the added shine:

image 8

Now it's starting to look more like a header!

You can play about with your header all you want, those are just a couple of things you can do to it, never be afraid to go over the top with a header!

Here's my final header:

image 9

All I done here was add a simple indent to each side of the header. Again, if you've read my Indent Tutorial this should be a doddle to do!

So now we have the header, we can move on and do ourselves a navigation!

Make yourself a shape, again using your Rounded Rectangle Tool you can make yourself a navigation bar just below the header, make it quite thin as you don't want a load of space between your text in the navy. Add the following settings to your navy:

image 10

image 11

Using the following gradient settings, add this gradient:

image 12

image 13

Bingo! there's a half decent looking navy bar.

Ok, now we shall add some detail into your navy, first write whatever you want in the navy, links etc.

Here's how mine looks:

image 14

So once you've added all of your links and stuff, we can add some separators. This is kinda of another tutorial within a tutorial!

Ok first zoom right in on your document where you want t add the separator between the link. Grab your Pencil Tool and set the size to 1px and set the color to white and draw a line from the top of the nav bar to the bottom. Now make another line with the color 525252 and draw another line right to the side of it, you should now get an indented look when you zoom out. Here is how mine looks:

image 15

Repeat this several times until you've got something like this:

image 16

Now for our content box! - We're nearly finished!

Make yourself another big shape and fill it with A8A8A8, using again, the Rounded Rectangle Tool and add the following settings to it:

image 17

image 18

Add a nice shine to the top of it, and you should end up with something like this:

image 19

I've added another bar underneath my content box, to show copyright information etc, I used the same styles as I did for my navigation so if you want to do the same, you can!

We can start adding the finishing touches now, for example, a logo would be nice right? and maybe some other touch ups!

Here is my finished product:

Webpage Layout
Click to enlarge

So that's how to make a layout in photoshop, It's not really that hard is it?

subscribe to newsletter