ImageReady: Slicing A Layout
Slicing images is important for layouts that are very detailed and are high quality. What I mean is, that if your layouts have plenty of layers (effects, brushes, textures, images) then saving it as one big image will only work to your disadvantage. You must slice an image into smaller pieces and with Photoshop, it is quite simple! We will use the slice tool.
Slicing using Adobe Image Ready
First, open your layout file in Photoshop. Go to Layer > Flatten Image so that everything is compact and you discard all hidden layers you probably forgot about or don't need. This is better than the Merge Down function because it does not account for transferring Layer Styles to the merged layer. Anyways, once the image is flattened, it is ready for slicing! The next step it to bring it over to edit in Adobe ImageReady - in most cases when you install Photoshop, ImageReady is installed as well. If you do not have this program, you can still slice in Photoshop and use the "Save for Web" in the File drop-down menu. In that case, read the est of this tutorial and find the similar settings in Photoshop.
Click on this button: 
It should be the last button on your Tools window (the side menu bar with Erase, Brush, Text etc.) Another program will open and your layout will transfer immediately to ImageReady. Look at the following image for the next step:
Slice iFrame Layout
To slice an iframe, just select the areas that are your content/navigation as if you are using a rectangle tool. Slices will automatically appear (they will divide themselves accordingly).
Slice Div Layers Layout
To slice a div layers layout, right click on the image and select "Divide Slices…" so that all your boxes are evenly sliced.
Slice Tables Layout
To slice a tables layout, its a bit more tricky. Study the following pictures for an example.
Slice Header & Footer - Using the slice tool, make rectangles in the areas which you wish to be the header and footer of the layout. I also boxed out my tagboard section that is part of my header.
Divide Big Slices - Next, I used the "Divide Slices…" option when you right-click on a slice for smaller, even pieces. You will be prompt to fill in a few field, so type in the number of slices you want vertically and horizontally. This helps break down the large file size due to the image's numerous layers. Take a look at slices 2-3 and 6-9 for this example.
Divide Footer - To break up the footer as well, right-click on the slice and select "Divide Slices…" and give your desired settings.
A Closer Look:
Zoom in a bit closer if you can't see. You will slice off a small rectangle and inside this rectangle is your content column (it will expand as your content gets longer). Also, slice an area for your navigation. In the following image, Slice 12 and Slice 14 were made to designate content and nav areas: Divide Content & Nav Columns
Take note of the important slices as seen in the image below because when you code your tables layout, you will have to work with these cells.
Click below to enlarge:
Saving the Slices
Before you save, go back to Photoshop and Click File > Save for Web… and make sure that your settings include GIF, Colors: 256 and Unchecked Interlace. This is important because if you have the settings to something else, like PNG - it will save your images in .png format. Click 'Done' (not Save).
Now to save your layout slices in ImageReady, click on File > Save Optimized As… or press 'Ctrl Shift Alt S' (all 4 keys at the same time). You will have an option of saving just the images, just an html page, or both! Save both images and .html page so that you don't have to manually create your table from scratch (which is very difficult if you are working with many slices!)
Editing
Go to the html document you just created. When you open it in an HTML Editor like Notepad, you will see it as though it is a complete webpage with a DOC TYPE and the proper html, head and body tags. The table is set up so that each cell contains the sliced image. To code an iFrame layout, add the iFrame tags within the cell you want the frame to appear in. Put the table of slices that was created into a div layer if you are creating a Div Layers layout. Lastly, you can set this image as the cell's background so you can fill in your content and navigation for a Tables layout.
This is a simple way of slicing those really big graphics for your layouts. Also, saving the html document along with the slices is how I always begin coding all my layouts. For the final example, here is the tables version of the layout used in this tutorial: View Layout Have fun slicing!