Slicing Tutorial

For this tutorial I will be using the webv2 tutorial layout. If you don't have this layout I suggest you read the tutorial then you'll have something to work with. Although I'm saying you should use that tutorial, slicing works in the same way so you could do it with any layout. As we're trying to be as simple as we can here, then it's best you use something we all have.

Ok, lets get the ball rolling. First of all, when we're slicing a layout, what are we actually doing? Well that's easy, we're just cutting the images up allowing us to add content where we need to. Slicing also allows us to alter page loadtimes, if the images are smaller they will load faster. Most modern layouts use CSS (cascading style sheets) these are a little more advanced so for this tutorial we will only use html tables.

Let's get slicing! First of all you need to grab your slice tool, if you don't know where it is, It's shown below,

Now we have our slice tool selected we should make our first slice. NEVER leave any spaces between slices, this can cause chaos when coding the layout. I always start from the top of my layout and work down to the bottom. In my header I generally have 3 sliced images, logo, middle, and right, we will use the same technique here. Go ahead and use your slice tool, click and drag where you want the slice to go. here's how my slice looks,

As you can see, I started from the top corner and sliced my logo. Make sure you only slice your logo and not any of the navy, as this will complicate things later.

Next we move on and make slice number 2, of our header image. I generally cut about half way, here's my second slice,

Click to enlarge

When you are aligning the slice with the first slice you made you should see it aligns automatically.

So carry on and create number three, taking slicing away the rest of the header image.

Here's how my header now looks,

If you go back to slice number 1 and right click this slice, click Edit Slice Options, you should see the following box appear,

If you apply those settings, it means when you click on the top logo, it will return you to the index.html

Name - this is the name of the image.

URL - this is where the image will take you if you click it.

Target - this defines weather you want it to load in the same window or somewhere else, _blank would make the page load another page etc.

Message Text - whatever text goes in here will appear in the browser info bar along the bottom when hovered over.

ALT Tag - ALT tags are used for when you mouse over the image. The alt tag will display some text when you mouse over depending on what you put inside the alt tag.

Moving on...Now we have our header all sliced we need to move onto the navigation.

The navy can be a little more tricky but I'll see how well I can explain it for you.

Basically the navigation will be sliced into buttons, so where you have a button, will be a slice. Anywhere we don't have a button (on the navy bar) will be another slice. Start by creating a small slice to the left of the navy, just before you reach the button, here is what I mean,

This is basically taking away the gap between the button. The reason I done this was, if that slice was part of the button, when you mouse over it, it would appear as a link, yet you are no where near the button. I don't think that made sense but it doesn't really matter, as long as you do it.

Next we're going to slice our buttons, so go along the line and slice each button. Remember, leave no spaces between the slices.

That's my first slice, once you've sliced it, right click>Edit Slice Options and put your info in, here's my info,

Now move on and do the next slice,

Apply the same settings to it as we did the homepage, but change it about to say whatever, also make it link to about.html

Go down the line and slice the whole navy until you get to the last button.

Here's how mine looks,

Click to enlarge

See how I've left the last button? It's because we have that space at the end of the button, so as we did before, simply make a slice out of the blank space at the end of your button, like this,

Now we've sliced out blank bit we can go ahead and slice our button, just as we did before,

Here's my complete navigation,

Click to enlarge

So now we've done out header and navy, that's the hardest part out of the way! Now all we've got to do is slice the content box and we can start coding our site.

All we're going to do now is make a slice along the top on the content box. If you have a shine on like me, make sure you don't slice through the middle of the shine or it'll look pants when your site is online.

Here's now mine looks,

Click to enlarge

Now we've done the top of the navy we do the bottom. Leave a small space between the bottom of the layout and the bottom slice, this is what I mean,

Click to enlarge

with the space you've left, make a slice out of it, like this,

Why did I just make you do that? I'll explain later.

Now we need to finish up our slicing by slicing the content box sides.

For this we make one small slice and one big slice, I'll talk about why later.

Here's the small slice,

Then for the rest of that side, slice it in like this,

That's one of our sides done, do the same technique on the other side,

Click to enlarge

Now we're basically complete, create one last slice in the middle of our content box like this,

Click to enlarge

Ok now we're done slicing. All we need to do is click File>Save For web and set the following settings,

Click to enlarge

Once you've done this, click save and it will ask you to chose a folder, name the file index.html and save it. That's all for slicing, it's pretty easy really. Now all we need to do is actually code the layout. If you click on your index.html it should load your sliced images up. Those who already know how to code layouts can now go on and make their website. Those who don't know how to code their websites should read my next tutorial, coding your website.