Spanable Content Box (Slicing & Coding)

Step 1

The trick to slicing a layout no matter how complex or how simple is to break it up into parts, or stages. For instance this content box has three "parts" that we will work on one at a time.

Those three parts are:

The Top/Header Area

The CEnter/Content Area

The Bottom/Footer Area

Step 2

So first we'll go ahead and slice these three portions of the content box out and work on them progressively one at a time. You can use photoshop's built in slicing tool, or any third party slicing software. My personal preference is Jasc's slicing tool - as it is very easy to use, save and manipulate down to the pixel. But this is all a matter of personal preference. For some information on using the slicing tool that is packaged with photoshop please see the following links:

• slicingguide.com
• www.maxed-virtuals.com
• megatuts.com

Step 3

So after my first slice, here are the three pieces l have:

Top:

CEnter:

Bottom:

Remember you'll want to zoom in as close as you can to the image while slicing it, to ensure that you get the best possible slice.

Step 4

So now we're going to work on each of our three pieces one at a time. And there's no reason to make things confusing, so we'll start with the top piece.

Our header/Top piece is going to have 3 total images used. Two corner's (right and left) and the central piece which will be our section that can span 100% width wise.

So here l've zoomed in and sliced out these three portions of our header/top piece:

Now before we begin to code this portion of our content box, there is one more technique we will apply. We are going to create what is known as a "sliver" or "pixel stretch", with the middle of our header piece. What you will want to do is select a 1 pixel wide selection of the central piece that can be stretched out to any width we want, and not lose it's look.

So here are the three pieces we'll be working with:

Step 5

We're ready to code out the top portion of our content box now.

We'll be using basic HTML for this. There are really many ways that you can go about doing this, most people use Tables; as they are easy to work with and easy to lay things out with. Others will use CSS, but either way, the ideas behind the methods are the same.

Moving on...

Step 6

Next we'll move onto the cEnter portion of our content box. Now this will be a similar to what we had previously did, however this portion will be spanable both width and height wise.

Like the top, this portion of our content box will contain 3 pieces. The right and left sides, and the cEnter.

So here is how mine looks after the first slice:

Now we're going to do another slice on the cEnter piece. We're going to make it only 1 pixel in height, because our box is designed to have a 100% spanable height.

So here's how it looks after I made this slice:

Now to code this portion, we're going to be using the nearly the same techniques as before, just with slightly modified code:

Code:

You'll notice l applied another trick here as well. Our central portion didn't have any graphic design to it, it was just a solid color:

That color is #848484 (easily selected by using the eye dropper tool in photoshop)

So instead of tiling an image of this background in the central cell of our table, l simply used the BGCOLOR attribute for the cEnter of our content box. Remember the main idea is to use as few images as possible to save on load time, and bandwidth.

Step 7

Finally we'll move onto the footer portion of our content box. For this portion we're going to use the same techniques used for the header portion, with a slight adjustment to our slicing (we'll touch on that when we get to it.).

So once again, we're going to have three main pieces, the right and left corners, and the 100% width spanable cEnter piece.

So lets go ahead and slice out the three pieces, here's how mine looked after the slice:

Now we'll want to make one more slice to our central bottom piece. However being that we've got a diagonal grid within this piece we will not be able to use just a 1 pixel wide selection as we've used with the other portions. So you'll want to make a slice as l've done here, which is the smallest possible slice that retains our grid.

Before Slice:

After Slice:

So here are three Pisces now:

Left Side:

CEnter Sliver:

Right Side:

Code:

Click here to see the result.

Step 8

This tutorial has covered the very basics of slicing, 100% width, 100% height, as well as slicing around "patterned" backgrounds.

After practicing along with this tutorial, you should know the basics of slicing and coding. The bottom line is, that you cannot learn this stuff overnight, and you can't start on a huge complex layout and expect to just learn it by luck. The only way you will understand and grasp the concepts of slicing and coding is by starting small, and moving your way up. In the next tutorial we will cover slicing and coding a very basic layout with a header, navigation bar, sidebar and main content area. However, as you'll see the concept will be no different than what you've learned here. The trick is to break everything down into smaller "projects" and work your way through them one at a time. I hope you've learned a few tricks and tips while reading this article, and are ready to test the techniques you've learned on this tutorial out with your own content boxes. Please be sure to check back soon for the follow-up to this multi-stage tutorial on slicing a layout.

Download Spanable Content Box (Slicing & Coding) and Source Package here.