2) Now what we want to do is select pieces of the layout and save them as smaller images. Looking at the layout I can see that I need to cut it up into 9 smaller images.

** In this layout you can get by using 3 images, but lets pretend that the layout is more graphically intense so we need 9 images**

Using the Rectangle Marque Tool select the areas of the layout. Here are where the 9 images are.

Image 1 - This is your banner. I goes for the far left to the far right including the boarder on each side. Also make sure that you include the drop shadow below it.

Image 2 & 3 - These two images will be your sites boarders on the left and right side. They are 1 Pixel in height because we will make the boarder autostretch. Save these as gifs, not jpgs, because they will be smaller in size.

You can use the same image for both, just make sure to flip one of them horizontally for the opposite boarder.

Left Boarder	Right Boarder

Image 4 - This will be the image for the top of your navigation table.

Image 5 - This will be the middle of your navigation table. Again this is 1 Pixel in height, so that your table can stretch if it needs too.

Image 6 - This is the bottom of your navigation table.

** Image #4, #5, #6 MUST be the same width. If they are not, your tables will not align properly **

Image 7 - This will be the image for the top of your news table.

Image 8 - This will be the middle of your news table. Again this is 1 Pixel in height, so that your table can stretch if it needs too.

Image 9 - This is the bottom of your news table.

** Image #7, #8, #9 MUST be the same width. If they are not, your tables will not align properly **

3) Ok, now that we have cut our layout into 9 smaller images time to open our HTML editor. I use Dreamweaver for this tutorial. Start off my making a table that is 100% in width and height and set the vertical alignment for the table to TOP.

4) Create another table inside the table we just made and set the width to the width of the layout you have created. For me the width will be 600 pixels. Also set the Height of this table to 100%.

Make 2 rows for the table we just made and make both rows vertically align TOP as we did in step 3.

5) First the top row. Set the Width and Height of the top row to equal that of your banner, then place the banner image in the top row.

In the bottom row split the cell so that it has 3 columns. The left and right columns will be where your boarder, so set the width of these two colums to the width of your boarders. Im my case the width is 13 pixels for the 2 columns.

When inserting your boarder images, DO NOT use insert image. You must use Insert background Image, this will cause the image to become a patter filling in all the space like we wanted.

Your site should now look like this.

Test to see your your boarders stretch in your web browser.

If they don't reread the steps to see what you did wrong. Remember that both table need to be set to 100% in height.

6) Now we add our navigation and news tables. In the center column of the 3 columns we made in step 5, spit the cell so that there are 2 columns inside. Set each new column to be vertically aligned TOP.

Now out of the 600 Pixels we started with, we used 26 on the boarders, so that means there are 574 pixels left for the center. Our Nav images are 99 pixels in width and our News Images are 452 pixels width, making the total 551 Pixels. So that mean we have 23 pixels of extra room. So I'll add 11 to the nav table and 12 to the news table.

Now with the 2 new columns we created, set the widths of each column to what I have below if you used my layout image.

Nav table: 99 + 11 = 110 Pixels
News Table: 452 + 12 = 464 Pixels.

7) Now create a new table in each of the columns that we made in step 6. Align them to be centered and make the width of each of these tables the width of your navigation images and news images. So im my case the two tables I made had a width of 99 pixels and 452 pixels.

9) So now we have 2 new tables with 3 rows each. For the top of each row insert the top images for each table. The left table will be using IMAGE #4, and right table will be using IMAGE #7. For the bottom rows insert the bottom images of the tables.

For the middle, again DO NOT use insert image. We must use Insert Background image so that the images become patters and fill in all the space.

This is what you should have now.

10) Feel free to type anything you want in the middle of those two tables. Here what I did.

Thats basically it for slicing. Theres alot more that you can do to make the site look better but this tutorial was only meant as an introduction to slicing for beginners.