Slicing »
By MaxW on Jan 22, 2005 in Photoshop |
So this is the one you’ve all been waiting for? Well I’ve finally pulled myself around to doing it for you! In this tutorial I will show you how to not only slice your layout but actually prepare your site, enabling you to simply upload your design after reading this tutorial. This tutorial is going to take a little bit of time but hopefully we should have some good results by the end of it.
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 load times, 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,
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,
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,
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,
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,
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,
Now we’re basically complete, create one last slice in the middle of our content box like this,
Ok now we’re done slicing. All we need to do is click File>Save For web and set the following settings,
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.
