The Bodgenator is a script I wrote for Adobe Illustrator that exports a rough HTML layout from layers, to act as a foundation for a rapid prototype.
It doesn't try to export production-ready CSS - it's just PNGs and absolute positioning, which allows for designs to be easily updated, and for the emphasis to be on interactions and animations in jQuery, not on styling (which is already covered by static designs).
I wrote this for myself (as an interface designer), on the basis that I was keen to use my preferred tools – Illustrator, and raw HTML/CSS/JS – to prototype in the leanest way possible. I don't like wasting time rebuilding a layout from scratch in code, just to try out a simple animation. And I don't want to invest time in a tool like Quartz Composer or Axure, that has its own 'world' that locks you in.
Hope you'll find it useful, and please share around if you do.
This is very cool. Oddly enough, I am working on the exact same thing for my team but in Photoshop. I really like the idea of updating the project without wiping out your previous work.
Hey Regus, feel free to borrow some stuff from my code - it's largely the same principles in Photoshop, as I understand - just slightly different way of addressing layers and things. Correctly positioning layers was the hardest job - Adobe has some weirdly contradicting co-ordinates system...
3 comments
[ 5.3 ms ] story [ 21.3 ms ] threadIt doesn't try to export production-ready CSS - it's just PNGs and absolute positioning, which allows for designs to be easily updated, and for the emphasis to be on interactions and animations in jQuery, not on styling (which is already covered by static designs).
I wrote this for myself (as an interface designer), on the basis that I was keen to use my preferred tools – Illustrator, and raw HTML/CSS/JS – to prototype in the leanest way possible. I don't like wasting time rebuilding a layout from scratch in code, just to try out a simple animation. And I don't want to invest time in a tool like Quartz Composer or Axure, that has its own 'world' that locks you in.
Hope you'll find it useful, and please share around if you do.