Hi, I'm FFFreak and in this Tutorial I'll be demonstrating how to create your very own website layout using Adobe Photoshop CS Version 8 in five simple stages. You can probably use a similar or previous version to do the same job, but all the tools and shortcuts will be from Photoshop Version 8.
For the next stage, coding the layout, please see How to Code your Layout.

Requirements

Adobe Photoshop CS Version 8 (or something very similar),
A vague idea of what layout you want to create,
A rough colour scheme,
Some experience in Photoshop*.

*Although I'll be explaining as many features and shortcuts as I can, it'll be easier if you can already use Photoshop.


Stage One

Designing and coding a layout is a tough job, and difficult to explain in just one tutorial without knowing the reader's skill level, so I'll try and start with the basics.

First, make sure you have a fairly recent version of Photoshop open to get to work? I use Adobe Photoshop CS, but the previous versions should have the same ability.
Start with a good old blank 800 x 600 canvas, I use the smaller resolution because not all of my visitors have 1024 x 768 monitors.
I'll usually have made a sketch for the layout already with my ideas on it. It's then a job of placing all the lines on a new layer.
I use Photoshop's grid (Ctrl + ') to make sure everything's symmetrical, which is very important, you don't want a wonky layout. :P
So on a new layer I use the line tool with the colour on black to draw all of the basic outlines. Most layout's have a rectangle banner at the top, a box the the navigation on the left or right or both, but both requires more coding, so just stick with one, another box for the content on the space left or right of your nav. depending on where you put it, and then something for the footer, the footer doesn't have to be very imaginative, but avoid just cutting everything off abruptly: finish it cleanly.

Tip: For perfect straight lines every time, hold Shift while you draw the line.

Advanced Tip: For smooth and curvy lines, use the Pen Tool to plot the points of the curve and create a path, then use the Convert Point Tool to click and drag each point to smooth out the path.
Then right click and select stroke path. Note that the stroke will be done with the Brush Tool, so make sure the brush tool is at 100 opacity and the desired size.
Tick Stimulate Pressure too, although it's probably not needed.
Then right click again and select Delete path.
You'll then be left with your smooth line.
However, it's not always going to be smooth, it takes a little practice to get the path as smooth as possible, so give it a few tries first. And make sure to keep the points of the path quite far apart so that you can smooth it out a bit more with the Convert Point tool.

Stage Two

So, you'll now have your basic outline for the layout. Now it's time for colour. A basic idea for the colours should already be decided, but regardless-- it's the next stage.
You'll probably need a few different shades of the same colour, so create a new file or layer and just bucket tool your desired colours inside.
Try to choose colours that are quite similar, put too much contrast in there and the visitor will be blinded, too little and your visitor won't be able to see where the content starts and where it begins.
Also note the colours of your text, remember that you'll have the same colours text for the content and the navigation, so don't have a black nav. and a white content area whatever you do!
You may also want to have your text change colour when you hover over it, so grab two fairly similar colours for your text and put them to one side in your colour palette.
But most of all, your colours must work together! Don't choose colours that clash and hurt your eyes! If you need some help with colours, then there's a fantastic website that will help you find out what colours will suit your purpose best and how to use them effectively.

Colors on the Web

And finally, dark text always looks better on light backgrounds than light text on dark backgrounds!

Now you have your colours you need to decide where to put them. You might want to go for a light layout with dark text or a dark layout with light text and banner.
I prefer dark backgrounds with lighter content areas, a bright banner and dark text, however this is all up to you.

Stage Three

When you have your colours it's time to block in. Grab the rectangle tool and start filling in the boxes for your navigation and content, you can also choose the rounded rectangle tool for smooth corners. Of course, you may need the line and circle tools, it all depends on your design.
Just remember to keep the very background of your layout and the navigation and content area, (where you'll be writing text in the coding stage) a SOLID colour! Start experimenting with gradients and patterns for backgrounds your first try and you'll get something wrong-- keep it simple and bold. And stick with solid colour as often as possible.

Tip: Instead of creating a coloured square and adding a border with the line tool, right click on the box layer and select Blending Options. Then choose Stroke and pick the size and colour, the box will now have a perfect border!

Stage Four

After you have all of your chosen colours and boxes down, it's time for a little text. Put your copyright on the footer, remember the "Alt + 0169" Alt code for the © symbol.
Then place quick link text at the top near the banner, for example; Home; Contact; Forum; Gallery etc..
Or you may want quick links for the different sections of your website, such as Final Fantasy; Kingdom Hearts; Drakengard; Dragonquest etc...

Tip: When doing text, font and typography means everything. Font can really make or break your text, for unimportant text that you don't want to stand out too much, choose basic, default fonts, like Arial, Verdana or Tahoma, or even the odd pixel font, (these work best at 8 px) you'll be surprised how effective simple fonts can be.
For text you want to get noticed, pick something nice and swirly, or bold and disentegrating. But whatever you do, make sure it is easy to read, the last thing you want is a logo or slogan that no-one can understand!
So in this case, going back to your basic fonts is also good for text you want to be noticed-- because it's easy to read.

Tip: Text looks pretty plain when it's a solid colour, so right click on your text layer and choose Blending Options. You can then add a Stroke, a Colour Gradient and a Drop Shadow to liven it up.

You may also want text somewhere else, like to declare where the content starts or where it ends, as some layout designer's like to do.
You could also have an area of your layout reserved for an advertisement of your site's latest feature, or a newsticker, shoutbox etc..

Stage Five

So, you have your basic layout design, the colours, the shapes, the text, but what's missing? Yep-- the banner!
This I like to save for towards the end, so that I know how big I need to make it, what colour's I'll need and how I can intergrate it with the layout. Some layout's have banner's in a regular rectangle box, with perhaps a border, while others may have cut-out characters leaping out from behind the frame. Experiment and come up with some new and interesting ideas that you're happy with: instead of square banners, try circular; instead of straight try curvy.

Now, the banner is usually very graphical, and will be the icing on the cake for your layout. You want it to be noticed the most, so it should be lively, light and bright.
Unfortunately I won't be covering how to create banners here, however I may make a tutorial for doing so in the near future.
For now, here's a few pointers. Keep it pretty simple, don't put too many stocks or images in it. Try out some abstract backgrounds by distorting your original stock and images. Use Photoshop Brushes to add texture, depth and interest. Make use of colour adjustment layers and blending modes.
It's the centre-point of your layout, make it worth looking at!

Not everyone will want a very graphical banner though, and some aren't even able to do so, so don't feel pressured to make it one. Just keep it simple. :)
Remember to make it roughly the same colour scheme as your layout though, 'cause you don't really want a dark red banner with a bright blue layout now do you?

After the banner is completed, add text: the name of your website. Make it bold and quite noticeable. But blend it in, using the same colours for your layout, so that it's doesn't stick out like a sore thumb, that would be going overboard.

Ok, that's it, your layout should be just about finished now! Add the finishing touches you want and make sure the banner fits ok and you're good to go!

Stage Six

Ok, now you have your finished layout, but there's a problem, how do you code it and upload it online? To proceed, your layout will need to be cut into pieces. You can do this quite simply in Photoshop. Copy your layout as a merged image by going to Edit>>Select All and then Edit>>Copy Merged or 'Ctrl + A' to select your canvas and 'Shift + Ctrl + C' to copy merged. Then create a new file and paste the layout inside.
Choose the square Marquee tool from the menu, (make sure Feather is set to '0') and select a piece of your layout. Cut it by pressing 'Ctrl + X' or going to Edit>>Cut. Paste the piece into a new canvas and save as 'layout_01.jpg' or whatever is easier for you.

When saving images for the internet, always go to File>>Save for Web to use Photoshop's best optimising feature. Choose to save as a JPEG and adjust the quality so that you're happy with the difference between the .PSD and the new .JPG. Between 40-55 quality should be what you're looking for.

Repeat the process over the whole layout until it's cut into manageable images and saved sepaerately.

The tricky part here is of course which parts are you supposed to cut? It really can depend on the design, but you'll want to keep rollovers, and content and navigation areas in mind, i.e. the area where you want text will have to be cut out as a separate image. In addition, it's good to keep your images fairly big, so instead of having hundreds of tiny images loading, you only have 3-7 larger pictures that should load faster overall.

The most important detail of cutting your layout up is deciding whether you are going to have a navigation and content area that will stay static, i.e if the text/images inside become too long or large, a scrollbar will appear on the inside to allow you to scroll around teh whole area, OR if your navigation and content will 'stretch' along with your text and/or images, so if the page is longer, there will be a 'repeating' line that stretches down the page to fill the extra space.
To do this, cut a horizontal strip across your page, making sure that it crosses the navigation and content area and that there are no irregularities along the edges that would look messy repeated over and over.
It would probably look something like this if you were using solid blocks of colour:



Once your layout is cut, you should have one image for the banner, one for the footer, one for the repeat, and a couple of others if you have some more complex designs or rollovers.
You can now move on to coding! Unfortunately this tutorial only covers the layout itself, but perhaps at some point in the future I will make another to explain as much of the coding part as I can.

Thanks for reading, hope you found my tutorial helpful!


Written by FFFreak.