Slicing Graphics

[Fashy]

This is a really easy question and I feel silly asking. But sometimes when you go on to a website that has a lot of design on it, and highlight the designs they are made up of blocks (almost like they have been sliced to make the download time quicker). I have never done this but I feel I should. How is it done? What tool do you use? Surely its not with the crop tool as that would take forever and how would you know you have cropped every part of the image. I have all Adobe and Macromedia programmes but I tend to use Fireworks more.

[LiLcRaZyFuZzY]

well, there is this slice tool in both programs i think. But those kind of sliced designs tend to use tables for layout, which is wrong.

[Fashy]

What is this slice tool called? If tables are wrong to lay out the design how is best to do it. My designs are very heavy. I normally just put the whole design on, but if I am making websites for other people - that might not be such a grand idea. :)

[LiLcRaZyFuZzY]

surprisingly enough, the slice tool is called slice tool ;)
A very good example of how to use lots of graphics while not using table for layout is the csszengarden (http://csszengarden.com/)

[Waylander]

Cutting images into smaller pieces is actually easier without tables, because the alternatives have less or no built in style properties. And things work alot better without that damn IE bug that makes you have huge long lines of code.

When you have your design in fireworks, just use the slice tool to cut it into even pieces and then use export preview to make some GIF's from each part. With as low colors that still leave the image looking nice, to save size. Once you get the hang of the tool it will be a breeze.

Aside from generating your code with the design tool (which is a pretty bad idea) your still going to have to place the images with html, so dont go overboard with it and once you get past a logical point it hinders more than it helps.

Waylander.