You are correct! You must design first using a design tool such as Photoshop, Gimp, or whatever takes your fancy. This is so you can focus on the task at hand, DESIGN, without getting distracted by coding and CSS issues.

Once you have your DESIGN, you can then cut it up on screen, export your images, and use it as a reference point for dimensions and colours when coding. As you have said, the coding can take some time and so it is vital to have your designs in Photoshop to reference. It also becomes invaluable with the inconsistencies across browsers and screen sizes.

I'm more of a coder so for me personally I'm most happy when I start with a designed site and change the code/css/images .

It's not bad if you just go and create website without any mock up, but the time comsuming will be longer than you have mock up in hands.

For the design of header and navigation menu, it is based on those menu output. If it could replace by CSS, we will use css. If it is complex colors/images, we slice it to the proper position and code it. Yet, we still need Mock Up as reference to reduce designing conception while we do coding.

Awesome thanks guys.. So designing in photoshop then slicing and coding. Just what I was looking for.

Yes I agree with Michael. The best way that has worked for me has been to design the full layout in photoshop and then cut up anything that has a unique graphical design to it and anything that has a flat color I would implement in using the css so if it needs to be changed in the future you don't have to go back into photoshop to do it.

Joe