I just watched an hour and a half video tutorial on using the www.960.gs grid system to make a wireframe mockup in photoshop, I thought it was going to show how to go from a wireframe in photoshop to CSS but it was a complete waste of time and just showed how to create the image using the grid system in photoshop.

So I am wanting to know, is there an EASY way of taking an image designed using a grid in photoshop and making it a real site css and divs?

  • It's a bit like asking how to get to Carnegie Hall - the answer is Practice, Practice, Practice! http://en.wikipedia.org/wiki/Carnegie_Hall Tony Crockford almost 10 years ago

3 answers


If you have CS4, then Fireworks makes a brave stab at creating html and css, but there's no substitute for hand coding it.

The beauty of using a grid system is that the framework structure is already there for you - just add appropriate classes to divs for container and grid elements and then drop in your content.

There's no really easy way though.

some useful tutorials here: http://net.tutsplus.com

Answered almost 10 years ago by Tony Crockford

The basics of slicing an image to make it work in a web page the way you want is all that's there for us in PS with 960gs. When you are creating your page, using 960 CSS for layout, and need to place slices of images on the page you can use the PS grid to decide how to slice it. At least that's the only thing I can find of use... there is no magic way to have PS "Save As html" or anything.

Answered almost 10 years ago by Jim Sewell

Just practice CSS layout.

There is nothing special about the grid system from a code point of view, and there is nothing new to learn over basic markup structure, CSS floats, padding, margins and widths.

Answered almost 10 years ago by Samuel Cotterall