How to slice PSD template to html/css? [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

I'm coding a PSD template into html/css. The file consists of about 50 layers, which I have exported to PNG with a Photoshop script. I started like this:

<div id="container_1">
  <div id="container_2">
    <div id="containter_3">
       etc
    </div>
  </div>
</div>

Each layer is exactly the template size, with transparent background. At first I was happy with this approach, as it worked all right and allowed me not to worry about positioning much, but as the number of divs is now enormous, the code starts looking weird to me, not to mention the page loads really slowly now. This must be a really stupid question to ask, but should I have cropped the images after exporting them from the PSD? Maybe even combine several layers together instead of putting them on the page separately one over another (there are several layers that create a decorative border around blocks with text)?

Answer 1

You could give this tutorial a try: http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/