Pixel Cut has released a new tool called WebCode for creating your web images into code — web code, as in HTML, SVG, JavaScript+Canvas and CSS. Yes, very cool.
The Advantage of Vector Imaging on Your Website
Every webmaster and web designer knows that making great web images for sites, especially supporting retina screens (for iOS devices and Macs) or hi-res monitors is a major challenge. Vector is a great answer to breeding raster images on your site. Drawing vector through code is the same great answer. Getting this solution has required something like SVG (scaled vector graphic) generation with a tool like Adobe Illustrator or Inkscape. The more radical solution? A web programmer doing canvas drawing. That was it, and it can be intimidating. But solving the retina issue is a very big deal. It simply has to be done.
Enter PixelCut
Last year, software maker PixelCut made a name for itself with the spectacular PaintCode, which created Objective-C from vector tools or SVG import. I’ve used it on every single iOS project since its release. It’s that good.
I was pleasantly surprised to see the announcement of WebCode, which is a sister product doing the same thing, only the output code is a web variation of SVG, JavaScript+Canvas and CSS.
The question was: Does this product live up the the other? The answer is YES.
Familiar UI and Drawing Tools
The UI is the same familiar one, and looks identical. The way it handles attributes like colors, shadows, and gradients is the same. The vector drawing tools, booleans, use of dynamic frames, again, all the same. If you know PaintCode, you already know WebCode. The difference is in the output.
Output Code
Let’s face it, this is what you really care about. Does it do what it says it does, and is it usable and easy? Yes, it is. The sample files available on the site tell a great story, These are files of pure vector drawn goodness.
But I decided to do one of my favorite things, and pull in a complex vector tree SVG I’ve used in previous presentations. To my amazement, the SVG import (a simple drag-and-drop onto a blank canvas) worked! It’s an SVG, so I wanted to see what Canvas could do. The export was fantastic!
One note for those who use the HTML+CSS conversion, CSS does not support bezier curves. WebCode is very kind to let you know with the handy warnings drop-down just about the converted code.
The Samples
The sample downloads are wonderful. They are the basic drawings. However, the demo code that was added on the main page of the site is absolutely extraordinary. You must have a look at this stuff. It’s brilliant.
The Others
I’m not a big Inkscape fan, never will be. Yes, Adobe always has things going, I know, and I love that. They can all do SVG. But we have to look at here and now, and the pricing factor.
Conclusion
What can I say, they’ve done it again! If you are creating images for web, and they can be vector, like menu buttons, tabs, sliders, and icons, moving to vector is a major step forward in quality and performance. This is what HTML 5 is all about. (Sorry IE fans, you need more help than any of us can give you right now.)
WebCode is, without question, the best choice for easy JavaScript+Canvas and CSS drawing available today. At $49.99, WebCode is a bargain, and a real value I highly recommend it. You’d better buy one before the price goes up. It’s worth every penney.
I’m going to be presenting on this product soon, so stay tuned for more extensive info and samples.