Mar 19 2012

Leo 1.1 is here!

Last week I flew down to California for orientation at Nokia. My return flight was supposed to leave Wednesday afternoon, but due to weather and United’s bungled computer merge with Continental, I ended up stuck at SFO for a day and a half.

But my loss is your gain! Armed with my trusty laptop I fixed some long standing bugs in Leo Sketch and finished up the 1.1 release.

New in this release are:

  • let you end a path without closing it by just clicking the ‘end’ button.
  • gradients autoscale to fit the shape they are in
  • the Arrow tool is restored
  • HTML export supports multiple pages
  • Any shape can be turned into a link that jumps to another page in the document
  • dynamic bitmap font export for Amino
  • text wrapping *yay!*
  • many more export improvements and bug fixes

Download here

Feb 15 2012

Leo 1.1 Beta 3 is ready

I’m happy to announce Beta 3 of Leonardo Sketch 1.1.  This will be the last beta before the final 1.1 release unless we have any show stoppers. Please file any bugs you see in the issue tracker

Please download beta 3 from here.

Big new stuff

  • Added the arrow tool back, and it works much better now.
  • Proper multi-page support. You can create new pages, name them, and turn any object into a link to another page.  Best of all this link is persisted when you export to HTML, making it super easy to share your navigation mockups.
  • When you export text from Amino you can now use dynamic bitmap fonts which retain the custom fonts and styling on platforms that don’t support downloadable fonts. Read more.

And of course lots of bug fixes, as always.  1.1 will soon be here!


- Josh

Feb 03 2012

Dynamic Bitmap Text in Leo and Amino

I’ve just pushed out a new build of Leonardo Sketch 1.1.  The big feature in this build is dynamic bitmap text.  It might be a bit confusing, so allow me to explain.

When you draw something in Leo you have a choice of export formats. If you export to plain HTML then all graphics (except text) will be turned into images and positioned on the html page with css.  If you export to HTML Amino Canvas then it will generate  Javascript scene graph using Amino. This will create an object for each shape in your scene. The objects are drawn to the webpage using Canvas, the HTML 5 2d drawing API.  From here you can customize the graphics in code, such as adding animation and event handlers.

Most importantly, if you give your shape a name in Leo, then that name will become a JavaScript variable in the generated code.  If you change your graphics and export again then Leo will overwrite the generated code, but not the index.html so you can safely put your customizations there.  Because the variable name won’t change, any behavior you add in code will still work after a graphics update.  The upshot is that you can easily mix graphics and code. Do the graphics in Leo, write your code in your favorite editor. Update your graphics whenever you want, your code will still work.

But wait, there’s more.

Sometimes it would be nice to cache the graphics. Suppose you draw a very complicated group composed of 20 shapes in Leo. If you only want to move them as a group then you don’t really need all of those shapes represented as code. You could just have a single bitmap that the shapes were drawn in.  You can do this sort of thing in Photoshop but it’s a pain to manage. Leo makes it super easy.  Just check the cache as image setting in the Properties sidebar for any group you want cached.  When Leo generates the JavaScript code it will pre-render those graphics as an image, then load that into the JS as an ImageView.

But wait, there’s even more!

Text effects like shadows and gradients can be slow in some canvas implementations. Some don’t support drop shadows at all. This is another case where you might want to render into an image. This will preserve your cool effects.  But what if you want to change words in the text object at runtime?  A static bitmap won’t help with that. Or will it?!

I’ve just updated Leo and Amino to support the BitmapText object.  If you select use bitmap text for your text in the Properties sidebar then Leo will export it to this new type of text. It will generate a single bitmap containing every character of the alphabet, rendered using your custom text effects.  It will load this image, along with font metrics, into the BitmapText JavaScript object.  At runtime Amino will draw text using tiny slices out of the source bitmap, letting you draw any words you want and still have them rendered with your cool effects.

You can download the latest beta build of Leonardo Sketch here.

More info on Amino is here.

Here’s a few examples to whet your appetite.


Google ChromeScreenSnapz025

Google ChromeScreenSnapz027

Google ChromeScreenSnapz026

Dec 29 2011

1.1 Beta is Ready for Testing

I’ve just posted the first beta of Leonardo Sketch 1.1.  You can get it here:
This is mostly a bug fix release, but there’s a few new features as well.
  • You can make any shape into a ‘link’ that points to a different page in your document.  This is great when making multi-screen mockups.  The UI for this feature is needs a complete redesign, though. Feedback is *greatly* appreciated.
  • Pattern Builder.  In the fill picker you can now create a new pattern using colors and stripes in addition to loading images. The pattern will be saved in the fill picker so you can use it again later.
  • New HSV color picker when editing gradient stops. You can switch between HSV and the swatch picker as needed.
Other notable features and fixes:
  • Complete path refactoring so that:
    • bezier paths can be closed properly without ruining the reshape function.
    • bezier paths can snap to grid and gridlines when moving points
    • we can import SVG shapes with donut holes
    • convert boolean op areas with donut holes (subtract, intersect, etc.)
  • Improved SVG import and export. Please let me know if you have an SVG file that doesn’t work.
Please play with it and tell me what you think should be fixed before a 1.1 release. Thanks!
- Josh

Oct 26 2011

Leo 1.0 is here!

We are proud to announce the release of Leonardo Sketch 1.0.  Leo is a open source cross platform vector drawing tool built for designers and programmers. With Leo you can draw, diagram, and create presentations; then export your final work to a variety of formats including PNG, SVG, PDF, Java2D code, and JavaScript Canvas code; as well as sharing your work in progress with Twitter and Flickr.
Leonardo Sketch is distributed under the BSD license and can be downloaded from
New features for the 1.0 release include:
  • redesigned rotate and scale tool
  • fill shapes with complex gradients and patterns
  • direct manipulation for almost everything
  • export to editable JavaScript using the open source Amino graphics library.


Leo Sketch can export graphics code as well as graphics files. Currently it will generate HTML, HTML + Canvas (JavaScript), and Java2D.  I’d like to support other formats going forward, such as FXML, but I’ll need some help from you guys. The advantage of generating graphics is that you can draw rather than code up the UI, then attach logic and event handlers as desired. By using a naming convention in your graphics you can update them later without changing the code. You can even have control over the output such as prerendering expensive things (like shadows) to images automatically.

Looking for a fun open source project to contribute to? This is the one! Not a great coder but you still want to contribute? Great! We need help filling out the language translations, drawing more symbol sets, creating more textures, and filling more bugs.  There’s tons to do. Join the fun!

Oct 24 2011

Final Build is ready

The final build of Leonardo Sketch is ready.  Please try out the latest fixes and check all of the translations. If there are no show stopper bugs then this will be the 1.0 version.


Oct 24 2011

Watch The Trailer

Our new video trailer!

Oct 24 2011

Share your work in progress

Leo has built in Twitter and Flickr sharing so showing the world what you are working on is only a single click away.

Read the rest of this entry »

Oct 24 2011

Export Code

Export your drawings and presentations as HTML, Canvas, and JavaScript; as well as standard image formats like PNG, SVG and PDF. You can selectively cache shapes as images for greater performance when designing web and mobile applications.

Oct 24 2011

Create Presentations

With four themes to choose from you can quickly present your ideas beautifully. Leo Sketch uses only open source fonts and will export to HTML 5 with embedded webfonts and images.

Older posts «