What's the most appropiate way to slice a document?

[co.ador]

When I slice a document in photoshop I get a div for every slice instead I would like to have divs, class, p and other tags that will create a semantic code.

[cssfreakie]

Since you work in photoshop or any other editor, you already know what the dimensions are of the elements.

The best tool is your own brain. just get a decent editor like for instance netbeans, vim etc and create the code yourself. And don't use wysiwyg editors because they all suck and produce redundant code. (how could photoshop know you need a class for something and sometimes even a class is redundant if you can use the id of the outer element to set style to inner elements,.. we need our brains to decide on that)

 

A little trick though could be to use something like a grid overlay, it places predefined guidelines on your layer so you can design within the given dimensions. Any decent design uses a form of grid (your elements are nicely aligned not? so you use a grid, without knowing it.)

 

As for slicing, i pretty often see that people use the automated slice function of photoshop (there are even employers that find it vital that you can do that) Although those people have no idea what the fack they are talking about, most designs made in photoshop or any other editor don't need to be sliced, instead you could use on big image sprite in case it's a heavy design, which most people create.

 

And for anything but photo's don't use a photo editor, because a 2d vector design can probably do exactly the same and it saves quite some kb's.

 

Hope this helps in a way.

 

cssfreakie  kiss (keep it simple stupid)

[co.ador]

I like the idea of doing a "big image sprite" as you said. Think it would be less tedious workin with one image. How do you  go about that aproach. I guess with a big image sprite one has to use plain css and html right on top of the image. What are the steps to integrate a web design in this matter?

[cssfreakie]

just google for how to css image sprites, it's pretty easy ones you know how.

Another good thing is that sprite reduce the amount of header requests, making your website faster than it would be if it uses crap loads of separate images