Advanced Slicing

1. Open up your content box or layout that you will be slicing for this tutorial in Adobe Image Ready. For people taking this tutorial who have not made a content box to slice yet, try out our rounded content box tutorial here.

2. The first thing we need to do is decide how we want the content box to function. Most of the time, webmasters want them to be able to expand vertically, so no matter what is put in them, they just auto adjust their height. Other times, webmasters want them to adjust their width, and other times, webmasters want both to expand as needed. I will show you the first way, and if you need to do the other ways, it just takes some simple logic to figure it out with the knowledge I am giving you. Often, when a designer looks at this content box, their first impulse is to do this with their slices:

3. NO! THIS IS BAD. First lesson, you should almost never just draw boxes where you want content. This part of design actually takes some brain and logic to do correctly. What we need to do instead is first decide how our content box is going to expand, what will be where, etc. Here is a diagram of how I have thought my box through:

KEY:
Blue - Sections labeled in blue are the Header and footer. These will remain the same width and height always. All text will be centered in these boxes.
Red - Sections in red are the left and right expandable bars. These bars will use a repeating background so that no matter what height they are set to they will always look the same. Notice that I only selected parts that have the same image in it. There are no special designs or anything in these sections which would ruin it if they repeated.
Green - My main content area. This section is all the same color because it will also be expanding, and we want it to always look right.

4. Now that we have correctly thought this through, lets learn how to slice it correctly. Instead of drawing boxes in image ready, we are going to use a feature called divide. Select the slice tool, and right click anywhere in the document:

5. This option gives us more correct slices by making all measurements exact. As you say before, our content box is divided into 3 main parts: Header, Content/expandable bars, Footer. This means that we are going to divide this into 3 horizontal slices to begin. Type in 3 in the Divide Horizontally Into Text box. Do not worry about any other settings yet. Just click ok:

6. Drag your slices to appropriate locations:

7. Now, notice that our mid section has 3 parts to it. A left vertical Bar, Content Box, and Right Vertical Bar. Likewise, right click the middle slice so only it is highlighted, and Divide slices again. This time, divide it into 3 vertical slices: (NOTE: YOU MAY HAVE TO CLICK OR DOUBLE CLICK THE MID CONTENT BOX BEFORE it IS THE ONLY ONE SELECTED)

8. Again, drag to appropriate locations:

That's Basically it for the design part. Now we have to code it. Save your document as an html file by going to file > Save Optimized As...

9. Open your html file in your favorite text editor (text pad, word pad, context, etc). I am hoping you have a basic understanding of html. If not, go learn it, you will be glad you did. Find the left and right expandable bars, and put this in there:

And for your content box, do the same thing. Now, in your table tag, type:

DO NOT INCLUDE THE HEIGHT!

Now your content box should expand automatically! Hope this helped!