This is one of the innovative products we’ve seen. Developers in Bratislava, Slovakia have released WebCode, a new vector drawing app that instantly generates JavaScript Canvas, CSS HTML or SVG code.
This is one of the innovative products we’ve seen. Developers in Bratislava, Slovakia have released WebCode, a new vector drawing app that instantly generates JavaScript Canvas, CSS HTML or SVG code. While designers focus on drawing HTML5 games, infographics or web user interfaces, WebCode automatically writes the code for them. Developed from the ground up with resolution independence in mind, the code generated by WebCode works great on both Retina and non-Retina displays. WebCode also imports SVG and PSD documents.
JavaScript Canvas:
WebCode is a perfect match for those who are doing a lot of HTML5 Canvas drawing. Developers will no longer have to write the code by hand – their drawings will be converted to JavaScript code instantly, saving countless hours of tedious work. Most importantly, the generated code is nice, clean and readable. WebCode even lets users conveniently copy small JavaScript snippets just when they need them.
CSS HTML:
Writing CSS3 gradients, shadows and media queries by hand is not necessary anymore – WebCode will do all the heavy lifting. In fact, WebCode will convert as much of the drawings as possible to CSS HTML code. Rectangles, rounded rectangles, ovals, texts, images, gradients, inner and outer shadows, strokes and fills are all well supported. And for things like beziers that simply cannot be converted to CSS HTML, WebCode will let users know by generating helpful warnings.
SVG:
SVG shines when making infographics and WebCode is a great tool that instantly transforms drawings to readable and succinct SVG code. The code is shown in real time – users can see it change and grow. This is a great way to learn SVG, JavaScript Canvas and CSS. All of these features are designed to save time, so designers and developers can focus on what is really important – the content itself.
Features:
- Real time preview of every adjustment
- Prepared for the world of high resolution displays
- Drawing canvas can be switched to “Retina display” mode with a single click
- Document format is 100% compatible with PaintCode, PixelCut’s popular tool for OS X and iOS developers
- Live WebKit preview
Basic Shapes and Vector Drawing Tools:
- Rectangles, rounded rectangles, ovals, beziers, polygons, stars and texts
- Boolean operations
- Bezier editing tools
- Text-to-bezier conversion
Code Generation & Export:
- Real time generation of nice and readable drawing code
- Support for JavaScript Canvas, CSS HTML and SVG code generation
- Simple export of all generated source codes and resources
- PNG, TIFF, PDF export options
Import:
* SVG import * PSD (Adobe Photoshop) import supports layer graphics, paths, text, groups and important layer effects
Dynamic Colors:
* New colors can be derived from the existing ones by changing their opacity, hue, brightness, etc. * All derived colors are updated automatically when their base color changes
Library of Colors, Gradients, Shadows and Images:
- Colors, shadows, gradients and images can be reused across the document
- Inner and outer shadows
- Linear and circular, multi-step gradients
- Images (with support for both Retina and non-Retina resolutions)
Dynamic Shapes:
- It is possible to define how complex drawings should behave when they are resized
- Shape coordinates and dimensions can be dynamically linked to user-defined frames
- Behavior of individual bezier control points can be customized
- Fully supported by the JavaScript Canvas target, partial support in CSS HTML
WebCode 1.0 is exclusively available on the Mac App Store for introductory price of $49.99 USD. More information about WebCode and a trial version can be found on the product website.
Category: Graphics & Design, Photography, Art, Video
WebCode 1.0: Download WebCode Trial WebCode Screenshot
PixelCut is a software company, founded in 2012 by Peter Krajcik and Mike Antonic. PixelCut’s first product, PaintCode, is a full-featured vector drawing app that instantly generates Objective-C drawing code. Bridging the gap between programmers and graphic designers, PaintCode has quickly become one of the most popular developer tools on the Mac. PixelCut’s headquarters is located in Bratislava, Slovakia. Copyright (C) 2013 PixelCut, s.r.o. All Rights Reserved. Apple, the Apple logo, App Store, iCloud, Mac OS X and Retina are trademarks of Apple Inc. in the U.S. and/or other countries. Adobe, the Adobe logo, Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.