Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
    
how do you mean "fast"? –  wired00 Jul 6 '11 at 0:29
1  
Lots of experience and extensive knowledge of HTML/CSS is probably the answer. –  thirtydot Jul 6 '11 at 0:39
add comment

migrated from stackoverflow.com Jul 7 '11 at 1:07

This question came from our site for professional and enthusiast programmers.

6 Answers

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.

share|improve this answer
add comment

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

http://psd2cssonline.com

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

"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.

share|improve this answer
add comment

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?

share|improve this answer
    
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 Jul 6 '11 at 1:16
add comment

In GIMP:

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

GIMP will create the parts and the HTML automatically.

share|improve this answer
    
Surely that will produce awful code? –  Anonymous Aug 2 '11 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 Aug 2 '11 at 11:59
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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