To slice or not to slice in Photoshop

March 22, 2011 9:55 AM

Slicing a web design layout in Photoshop - is this a conventional web design practice? What are the pros and cons?

I've found myself teaching a web design course, and while I have some web development experience, I'm not a web designer by trade. I've focused on teaching the students Photoshop for graphics and Dreamweaver for CSS and layout, so they're familiar with basic CSS/XHTML structure.

Now I'm wondering whether to show them how to lay out a complete site in Photoshop, slice it, and have Photoshop export the CSS for them to use in Dreamweaver.

I've never done this for my own sites, though I know how to do it.

My question is whether showing them how to do this is going to make life more complicated or simpler for them, especially as some are still struggling with basic Photoshop and coding. My impression is that if slicing is not done well and in an organized fashion, it can get messy quick. But for those who are struggling with coding a layout in Dreamweaver, it might save some grief.

So - is slicing a standard practice for web designers? Is there a reason to avoid this practice, especially for CSS noobs? Or a reason to encourage it?

Thanks.

posted by Ms. Toad to Computers & Internet (20 answers total)

Yes

Yes

Yes

You should teach your students how to slice properly. This is standard practice for any sort of agency or group with a real creative department, the designer will often deliver a site as a collection of .psd files and the technical staff are expected to reproduce that look exactly.
posted by Oktober at 10:07 AM on March 22, 2011

The thing that gives me pause is " and have Photoshop export the CSS for them to use in Dreamweaver". I've never looked at Photoshop CSS, but I imagine they're better off doing the CSS on their own.
posted by backwards guitar at 10:12 AM on March 22, 2011 [2 favorites]

So - is slicing a standard practice for web designers?

"Slicing", maybe, as a generic verb, but most quality designers don't use the slice tool, in my experience. This is because the computer-generated output for site layout and design is, by and large, complete crap. Unless photoshop's slice tool has gotten a healthy dose of cutting-edge AI in the past year or two, no, you shouldn't teach it as a legitimate tool. They should be taught what it is, and why it is evil.

Likewise with dreamweaver design view.

Neither of these tools, last I looked at them, was capable of producing cross-browser compatible, efficient, and semantic markup.

If you're trying to produce quality web designers, they need to know how to produce all of this code by hand.
posted by toomuchpete at 10:18 AM on March 22, 2011 [5 favorites]

is slicing a standard practice for web designers?
It's a pretty common practice for web devs, too, in my experience, not just the designers. Just about every one-man web dev shop I've ever done a design for insisted on a Photoshop file they could slice apart. It always struck me as a really low-rent way to go.
posted by Thorzdad at 10:24 AM on March 22, 2011 [1 favorite]

I think there's two separate things here. As a web designer, I use the Photoshop Slice tool to take a .psd file to cut it up into the various image components I need. You can also have Photoshop generate the html for you, which I (and others here) strongly do not recommend.
posted by FreezBoy at 10:29 AM on March 22, 2011

Best answer: Steer clear of any auto generated code. Slicing up the .psd is pretty standard practice, but using the generated html/css is definitely not the norm.
posted by thsmchnekllsfascists at 10:31 AM on March 22, 2011 [1 favorite]

Best answer: Yeah, to be completely clear, it's fine to slice up the .psd to get your image elements. Stay the hell away from the automatically generated code.
posted by Oktober at 10:37 AM on March 22, 2011

Best answer: What others have said. Using a master Photoshop or Illustrator file as the basis of a web page layout is pretty standard practice because, but you will do your class a huge disservice if you don't start with at least a basic unit requiring them to code a little bit of HTML and CSS by hand... learning web design and development using auto-generated code from Photoshop and Dreamweaver is like learning typesetting using Microsoft Word.
posted by usonian at 10:43 AM on March 22, 2011

It always struck me as a really low-rent way to go.

How would you expect them to do it?

I always get the PSDs (most provide them without being asked) because IME designers always slice it wrong - they're not mind readers. If I'm building the html/css, I know best what slices I need.

Slicing up a PSD is normal web design/dev practice - whether they use the slice tool or not to do it. Using the html/css generated by photoshop is not. Don't even tell them the feature is there ;)

If they're going to be the kind of web designers that create html/css they need to know how to look at a design and visualise it in terms of rectangular divs so they can pull out all the images they need to slice.
posted by missmagenta at 10:53 AM on March 22, 2011

Best answer: But for those who are struggling with coding a layout in Dreamweaver, it might save some grief.

For what you're describing, this is going to do far more harm than good. The CSS and HTML generated by photoshop bears no resemblance to anything you'd actually want to use in a website; it's useful for throwaway mockups, but not much else.

PSD slicing is useful for generating site images in bulk, but only if you know how to use it effectively -- for example generating the hover, active, inactive, and normal states of an icon or navigation link from the same file using slices and layers. But getting that right requires fairly deep knowledge of both HTML and of Photoshop itself. Even just knowing where the slices should go so they can be used effectively in a layout is impossible if you don't understand how the underlying HTML should be structured.

If you're teaching them web design, then teaching them how to write HTML and CSS is 90% of the job. Web designers who don't know how to write good HTML aren't web designers, they're illustrators.
posted by ook at 11:00 AM on March 22, 2011 [3 favorites]

I fear that using this methodology will teach them how to prepare microwave macaroni and cheese but will not teach them to fish--they'll come away knowing how to cut out images and where but the underlying HTML/CSS will be a black box to them.

The minute they have to fit that design within an existing framework, they'll run into trouble.

One other caution: using Photoshop as a web layout tool could give the impression that this is exactly how it will look in the end. Unfortunately, users do not browse the web with a copy of Photoshop. Some things will be different when translating into HTML, primarily text. One can adjust text attributes, but not to the extent that Photoshop's text tool will allow and certainly not with the aliasing options. (I mention this because I have this discussion with designers every couple of months when asked why the fonts don't look 100% like they do in the comp.)
posted by fifteen schnitzengruben is my limit at 11:30 AM on March 22, 2011

Best answer: I would like to nth the "Slice yes! Code no!" opine, and maybe shine light on why from a slightly different direction.

Back in the day, the secret to success of the boutique-y digital gulch webshop I worked at was to: take a designers' photoshop file, conceive of it as separate layers of background image and text, generate a background image and .gif text images (big pt. size header stuff - yes, done w/ slicing!) and then wrap it all up in a hand-coded html table that was so solid, so indestructible that a thousand Internet Explorers could not take it down!

What your goal is with the tabling, and now the css, is to specify the exact locations everything sits. You can frankly do this by jotting coordinates and pixel dimensions on a piece of paper. Generated code could be a great shortcut to cut and paste this info. But it won't teach your brain how to keep track of a bajillion things at once, nor why you'd want to do so.

So I would maybe go through the exercise of all reading some Photoshop and Dreamweaver code, i-d ing the working parts and such, because you will always have to be able to read someone else's (awful, awful) code. But don't rely on it, because then all your students will learn is how to use Dreamweaver, not how to actually build a website.

Thank you very much for asking!
posted by Rube R. Nekker at 11:39 AM on March 22, 2011 [1 favorite]

Dreamweaver is a pretty effective tool, but if a beginner spends all their time in design view they will end up with inconsistently behaving code that might be really hard to work with down the line. They should be at least somewhat familiar with checking out code view before starting to use cut + paste. Clunky inefficient WYSIWYG markup is one thing, but cut + pasted auto-generated stuff + more cut + pasted MS Word or website formatting can turn into a disaster over time. Most of the beginner problems I see are because of blind cutting and pasting and clicking and dragging (sorry dude, your site shouldnt have links to your hard drive)

It's of course best to code by hand and understand everything, but if you are just giving a "crash course" I'd say at least get some basics in so they can recognize alphabet soup for what it is. Get them comfortable with how the HTML & CSS should generally look, and show them how easy it is to use sites like w3schools.com to find css properties and syntax. To me, that's teaching them how to fish more than making them memorize href and font-family.
posted by yeahyeahyeahwhoo at 11:46 AM on March 22, 2011

Keep in mind the various design properties CSS, and especially the newer CSS3, has to offer. For example if in the design is a a box with a colored stroke you should make it a div with a border property. A newbie thinking it's all about photograph images may end up slicing the picture of the box.
If you are pushing newer standards, CSS3 can do even more like rounded corners, text/border shadows, etc but will only be compatible with the newest browsers. It doesn't hurt to be forward thinking, and may save grief in aligning sliced images or teaching an esoteric sliding door effect if you get that advanced.
posted by xtine at 12:22 PM on March 22, 2011

Best answer: they need to know how to look at a design and visualise it in terms of rectangular divs so they can pull out all the images they need to slice

They also need to know what not to slice. For example, you can use CSS background color instead of images for rectangular divs.
posted by kirkaracha at 12:31 PM on March 22, 2011

What your goal is with the tabling, and now the css, is to specify the exact locations everything sits.

This is misleading -- what Rube is describing is essentially what the PSD-generated code does, and it's exactly why that PSD-generated code isn't usable. If you're misusing CSS to position everything to specific pixel locations, your layout will break the first time it contains content that doesn't happen to fit those specific pixel locations. Absolute positioning should be a last resort.

(Which is just one more example of why it's crucial to teach the code, not the tools that insulate you from the code. Someone who only knows how to use Dreamweaver will never even know this sort of thing is an issue until their layout stops working, and once it does they'll have no clue how to fix it.)
posted by ook at 12:32 PM on March 22, 2011 [3 favorites]

Response by poster: Thanks, everyone - this is just what I needed (and expected) to hear. I appreciate learning from you!
posted by Ms. Toad at 2:08 PM on March 22, 2011

Are you teaching web design or web development? Because in a decent sized agency those will be completely different roles. The designer will design "flats" in Photoshop (with variations for hover states and what have you) and hand them over to a front end developer who will slice them up and build them in the appropriate way (and there may also be a specialist Flash developer if there is any Flash involved).

> Web designers who don't know how to write good HTML aren't web designers, they're illustrators.

What a load of rubbish (at least in the agency environment). Designers will never, ever, get their hands dirty with code. They have to have some understanding of how things are built and what's possible with the technology platform the site uses, but anything to do with HTML, from slicing onwards, is handled by the developers. This is how it generally works in an agency - there are more roles, each with less responsibilities, so each role can focus on their area of specialisation. Designers are concerned with the presentation of visual information and methods of interaction - as long as these areas are created to a high standard then why do they need to know what the underlying code looks like? Obviously you want the code to be well structured too, but that's the responsibility of the developers.
posted by iivix at 2:59 AM on March 23, 2011 [1 favorite]

Rather than go wandering off topic into a debate about best practices, I'll just leave it at this: we're working with different definitions of the term "web designer". I've seen shops that work the way you describe, to be sure, but it's far from universal in the industry, and in my opinion generally leads to inferior results.
posted by ook at 11:07 AM on March 23, 2011

Response by poster: I understand the distinction between designer and developer, which I've discussed with my students, but this is a bit of a catch-all class in which they expect to learn some code, so I'm conflating the two, as I expect many of them would be expected to do if working in a small company or entrepreneurial environment. If they intend to go on to larger agencies, they will need much more experience and training than this class - or the program - can provide.
posted by Ms. Toad at 11:27 AM on March 23, 2011