I've got a solid background in HTML and CSS, but my company frequently outsources PSD to HTML slicing to another company, and they somehow return the results really, really fast. Has anyone had any experience working for a place like this, and can you divulge any of the tools and secrets they use for such a quick turnaround? I'm going to have to be doing a lot of this coming up real soon, and it would great to be able to speed up the process.

  • how do you mean "fast"?
    – wired00
    Commented Jul 6, 2011 at 0:29
  • 1
    Lots of experience and extensive knowledge of HTML/CSS is probably the answer.
    – thirtydot
    Commented Jul 6, 2011 at 0:39

6 Answers 6


I've never worked in an HTML chop shop, but the reasons they slice designs quickly are probably the same reasons any professional team gets work done fast:

They have a lot of experience doing it

Many chop shops are professional web design teams who chop up designs in their downtime to earn some extra cash. They will have sliced hundreds or thousands of designs. Any repetition of a task like this results in increased productivity (and, invariably, boredom and dissatisfaction too).

They hire good people and train up the rest

If I were running an HTML chop shop, I'd hire good people to do the fast turnaround stuff and cheap people to do the longer turnaround jobs. This creates an environment that allows the inexperienced guys to learn on the job without feeling the same pressure that staff earning a little more have to put up with.

They use production line delegation

HTML chop shops are production lines. As such, in the larger-scale ones, you'll probably find a production line delegation system: one guy might handle customer contact and support, another chap will slice the design and export it to individual image assets, the next poor sod will code the thing, and the final guy will do Q&A/testing and hand off. Because each person is doing the same thing every day, they get very good at it, and it's easier to see where the bottlenecks are and chuck more resources/training at those areas.

They know their tools

There are different ways to slice designs in Photoshop/Fireworks. Some will be better than others for different jobs; they'll learn, for example, whether or not using Photoshop's Export > Save for Web & Devices is likely to produce a workable skeleton of code for a given job, or whether they'd be better starting from scratch. (Hint: if any of the page elements are overlapping, it's almost always better to start from scratch.)

They don't start from zero

Websites aren't that different. They will have developed their own baseline styles -- one for a sans-serif site, another for a serif, for example. Or one for a fixed-width center-aligned site, one for a 3-column site, another for a 2-column one etc.

In short, they're not using some secret system that you're not privy to. They've simply set up a business that depends on efficiency and fallen back on the systems that all companies who depend on fast turnaround use.



  • Create guidelines where you want the image to be cut
  • select Filters -> Web -> Slice

GIMP will create the parts and the HTML automatically.

  • Surely that will produce awful code?
    – Anonymous
    Commented Aug 2, 2011 at 10:49
  • I looked at the code, it doesn't. Anyway, writing such a tool from scratch isn't difficult and would take less than a day. So if you do this a lot and have special needs, you should consider hiring a programmer.
    – Kim
    Commented Aug 2, 2011 at 11:59

If you prepare your psd file the right way (layer names/ groups) and if it's not too big you can try it here:


Btw I'm in no way affiliated to this site, last year i got a complicated layout from a designer and it should be done quickly. I tried it out and it worked fine.

Anybody knows other sites like this?

Edit: there's a commercial software called Sitegrinder, but I never tried it.


Adobe Photoshop CS2 and earlier shipped with a tool called Adobe ImageReady, which was specifically designed for slicing. Last I checked, Adobe discontinued ImageReady and now recommends Adobe Fireworks as the slicing tool now, although it's not included with Photoshop (extra purchase).

As with any tool, practice and experience will make the job go a lot faster. That company you are referring to probably has it down to an exact process.


"they somehow return the results really, really fast"

If you've worked with the client several times before its possible they are accustomed to your companies design "style", by that I mean they know what to expect from your designs in terms of general layout and any nuances you may have. Thus its quite probable they have a standard template they use for your designs, so they don't have to slice and dice the entire psd file.

Its also possible the work they output isn't very good, or at least isn't as good as it could be.


If its part of their business, they will have a lot practise. When you do the same thing again and again, you learn how to do it fast and without making errors.

You will have to know the tools of course, but thats the easy part. So of course you wont be able to do it in the same time as a professional company. I don't think they got any secrets. They use the same tools as available to you.

What tools are you using now?

  • Just using Notepad++. I figured there would maybe be an editor available that would have a bunch of shortcuts built in or maybe a live preview pane or something.
    – jwburnside
    Commented Jul 6, 2011 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.