Webpage Layout »
By MaxW on Jan 22, 2005 in Photoshop |
Today we’re going to learn how to make your very own layout! This will be one of my longer tutorials but I’m going to go into great detail so even the new designers can see this as a doddle!
Now then, when making a webpage you must always take into
consideration size, if you make a document which is 1024×768 then it
won’t fit on the page length wise or height, because 1024×768 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 800×600 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 800×600
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) 720×540,
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 720×540 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:
*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:
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!
Then I came up with something like this:
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:
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:
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:
Using the following gradient settings, add this gradient:
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:
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:
Repeat this several times until you’ve got something like this:
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:
Add a nice shine to the top of it, and you should end up with something like this:
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:
So that’s how to make a layout in photoshop, It’s not really that hard is it?
In my next tutorial, you will learn how to slice up your layout and get it online! Something to look forward to right?
