Snip snip snip

March 23, 2007 4:13 PM

What are great resources for cutting apart a photoshop file into a standards-compliant webpage?

I've received the layered psd file from my very talented designer, and I'm about to construct the prototype for my new dating webapp. I'm fairly versed in latest CSS techniques, but I've been focusing more on back-end development.

I'm looking for some great tips and best practices for this step of the process -- that is, for cutting up a psd into valid chunks of css and html -- especially dealing with font kerning, line height issues, color correction, backgrounds that scale, etc.

posted by dentata to computers & internet (4 comments total)

I personally love a lot of the essays on alistapart in terms of design/web programming philosophy, and 24 things has about 48 things to offer.

Do you know Slices in Photoshop? If not, check the manual. It's pretty easy to "slice" up a PSD into relevant chunks, then save it through "save for web."

Depending on how you structure your markup and how wedded you are to "no extraneous markup," there are a lot of neat tricks for liquid box borders, corners, etc.
posted by Alterscape at 4:41 PM on March 23, 2007

I second slices in ImageReady. I always take a designer's PSD, chop it up in Image Ready, save for web (make sure you configure it to use XHTML output and turn off any extra crap like meta info). I find that ImageReady still doesn't code things as clean as I like, so I end up picking & choosing pieces of ImageReady's XHTML output and manually place them into my own files.
posted by afx114 at 5:03 PM on March 23, 2007

In terms of typography, The Elements of Typographic Style as Applied to the Web (a work in progress) is very thorough.
posted by avocet at 6:43 PM on March 23, 2007

I use ImageReady to slice out the images. Now that there is better support (and better hacks for older browsers) I am usually able to save out each individual item separately as either a GIFs JPGs or PNGs. The decision between the 3 depends on the type of image and whether or not it needs to be transparent.

I use BBEdit to create the XHTML from scratch (but I start from a template each time). Each element (like primary nav) is broken out and positioned individually with CSS so it's easy to tweak as I test (and as clients make revisions). The positioning is done with a combination of floats and margin/padding applied to elements.

Before I ever start building I sketch out the site and where the divs will fall. Don't be afraid to nest elements. Oftentimes it's easier (esp. cross browser) to apply a width to a containing div and padding to a div within that. It's also useful because most designs don't have consistent margins between elements.

I would recommend that you test the entire site in a range of current browsers AS YOU ARE BUILDING. The absolute hardest part of development is the tweaky 5px testing stuff.

If you aren't planning on reusing your skills that you will acquire as you build out this site. I would recommend looking into one of the PSD to XHTML businesses. They are usually very inexpensive. However, I personally have never used one so take my advice here with a grain of salt. Google PSD to HTML if you want more info.
posted by rdurbin at 8:24 AM on March 24, 2007