Designing the Layout
If you don't already have your mockup designed, it sometimes helps to sketch it out on paper first to determine where to put all of your main elements - like your navigation menu, blocks of content, form elements, etc. Make sure that if your entry page is different than other pages, that you also sketch these out with some sort of reference to show how the user will navigate through them. This is known as flowcharting and will definitely help with those big, complicated sites that have many different uses.
Start with a new PSD file. I often design at a width of 600 (by a height of 480) to account for the 20-40 pixel discrepancy that you get from the scrollbar. I know more people use a higher monitor resolution, but you should always keep those on older systems in mind. They also happen to get the angriest when things don't display properly. Otherwise, you can do 800x600 or 1024x768 but I wouldn't go much higher. If you get good at this, you can design your layout to be scalable across multiple resolutions.
As an example, here is a recent mockup that I never used, with some modifications.
Preparing to Slice
When designing your site, block out all of your main page elements and measure them with your guides and rulers turned on. It's not totally necessary to do so; but if you're a control freak like me, you want to know how big to make things and exactly where to put them. You will be using guides to slice your design, anyway; so it's a good idea to measure while you're building it. Remember to take into account sizes for ads and those large banners, if you're using them. The form elements and text can be added as placeholders; although that you can use the text and convert it to HTML, which I will show later.
If you haven't merged your layers by now this would be the time to do so - unless you want to do rollovers, in which case, keep the layers for creating rollover states. It's really only necessary to merge if you have used any layer effects like drop shadows and bevelling to avoid any distortion when cropping. Another way to do it would be to rasterize these layers in your layer window options. So if you have your PSD mockup looking absolutely the way you want it, go to Layer » Merge Visible. This way, if your rollover layers are hidden, they will still be preserved and only the visible layers are flattened.
Slicing & What to do with Those Slices
Slicing (Three Ways)
The slicing process is different for everyone. Some people prefer Fireworks; but for this tutorial, I'm sticking with Photoshop and Image Ready. Fireworks performs similarly to Image Ready and is pretty easy to learn. One of the simplest ways to slice that I've heard was, while in Photoshop, select and copy the area marked out in guides to be exported, and paste into a new file (Ctrl N), go to File » Save for Web (Alt+Shft+Ctrl+S). And then do your optimizing in the subsequent dialogue. Again, your PSD will need to be flat to copy all layers.
Otherwise, you can crop the slice, File » Save for Web then optimize; then File » Revert back to the full sized mockup. And continue on until you are done exporting your graphics.
Still, if you want to save yourself a lot of time and you have a version of Photoshop that includes Image Ready, then you can optimize your graphics in the mockup and export the whole page using Image Ready.
To switch from Photoshop to Image Ready, click this icon 
at the bottom of your tool bar and when the program has loaded with your file, go to Slices » Create Slices from Guides.
What to do with Those Slices
At this point you will find there are slices in the places where you don't need graphics. To select them, use this slice select tool 
from the tool bar and, in the Slice window, change Type to "No Image" where you would otherwise have text or nested tables. Then you can enter the text or HTML for this area, otherwise an external image (in HTML) or even a server-side include.
Now, if you want a more ambitious layout with complex tables, you may have to combine slices to achieve this. But if you're new at this, try not to be too ambitious or you'll be pulling your hair out-and I speak from experience. To combine slices, hold Shift and click on the slices, and then go to Slices » Combine Slices. In the Slice window under Image, you can name your images, choose a background for transparency, and assign a URL and target. If you're using the slice for a rollover, it must have a name. Otherwise, Image Ready does it for you; and names each slice based on the PSD filename.
Incidentally, for rollovers, you click on the Rollover tab, then this icon 
at the bottom, to create a new frame for your rollover. Here's basically what the rollover states mean:
Normal: The first is the image, as it would normally appear.
Over: The mouse cursor is over the button and the image changes in some way.
Down: The mouse button is being pushed down.
Click: Mouse button is clicked and a related event is called (opens new page, etc.)
Out: This is usually the same as "normal" -the mouseover has not occurred, or mouse has left the active area.
Up: Usually the same as "Over," only after mouse button is clicked and the cursor is still over the active area.
You don't need all of these but you must have a minimum of 2 to make your rollover work. A lot of designers would prefer to use their own code; in which case, this is still a quick way to optimize and export those rollover graphics.
