Hi all, programmer here getting into graphic design for the web for the first time.

I'm helping a friend with a website, and we have a JPG mockup of that website that consists of photos, graphics, text, and layout. Simple shapes only - squares, rectangles, and circles, but a pixel-perfect and actual size/dimension mockup of the final site.

I need to slice the photos and graphics out of this JPG for use in the HTML, but it's not clear to me how to do this in a pixel-perfect way. All the Inkscape demo's and tutorials I've found show manually tracing the outline of the objects to slice, but with very simple shaps is there a way to get the selection tool to snap-to the shape outline? Or something similar?

PS - If I'm not asking the right question, please feel free to correct me. All advice appreciated.

Thanks!

Hi.

For such work you may better use a raster editor program like gimp.

If you want to do that in inkscape, then set up a grid in the document's properties panel (Shift+Ctr+D),
if you want to use the pen tool, set it to draw only horizontal-vertical lines at the tool options.

Thanks, only have the Adobe Illustrator file to work with, so will give that a shot in Inkscape.

A little late, but you might also want to take a look at heathenx's video #16 at http://screencasters.heathenx.org/episode-016/.

Hope it helps.

The OP might be looking for something a bit more advanced than what I showed in that video. Inkscape has a great web page slicer extension (when it worked). This is the kind of stuff I wish the devs would either remove or get working across all platforms again. Perhaps it will be fixed in v.0.49. The extension wasn't perfect but it was quite handy to have inside Inkscape. I think I would go with Lazur URH's suggestion and slice it up with Gimp. At least that will write the html for you. You may be able to open the Adobe Illustrator file straight up in Gimp else open it in Inkscape and rip it out as a PNG. I'm not sure things will be pixel perfect for you but where there is a will there is a way, I suppose.