Autodesk already leads the parade with one of the best online bitmap photo editors in Pixlr, so it is not a total surprise to see that they have now one of the easiest to use and free online vector graphics programs on the Web. It is called Vectr. And Vectr delivers very usable vector graphics for Web Developers. This is a valuable capability as more Web pages use designs that must shrink or expand by +- 200% or more depending on the users display. We shall see how Vectr delivers some quick graphics designs.
Using Vectr for Graphic Designs
I urge users to take these lessons because the Vectr interface is quite different from popular desktop vector graphics programs like Illustrator or Inkscape [another excellent and free vector graphics program that unfortunately does not have an online version].
These combination of video plus “do-it-yourself” lessons are form the crux of the help system as well. But there is one drawback – once uou start a lesson you must complete all its steps. there does not appear to be an exit button.
Our first exercise was to create a sign for an Allan Gardens story that combines Text and images:
In the left sidebar is Page, Layers, and then Drawing toolbar. For each drawing one can have 1 or more pages, and as you draw and each time you add a vector element to a page you create a new layer. In the screenshot there are 4 layers. It is easy to change the arrangement of the layers from front to back by dragging and dropping the layer name up and down the list of layers.
The first three tools are a rectangle tool, a rounded corner rectangle tool, and an ellipse tool. They work as expected. Next are the Pen and Pencil tools and they also work like expected vector tools. The next two tools are text and bitmap image import and here the program is a bit different so users should watch the lessons explaining how to use them. Last is the three dots of the More Shapes tool:
Creating an Image with Exotic Borders
In this next exercise , an image with a exotic border T will be created and at the same time right sidebar property setting and command will be explained.
In the screenshot, a gradient is being applied to the rounded rectangle background. Each vector element has 5 user-changeable properties – Background, Border, Shadow, Inset Shadow and Opacity. In this case the Background is being changed from a single solid color to a linear gradient. Background could also be an image or a a radial gradient. Again, there is a vexing shortcoming with Vectr – I could not figure out how to change both gradient colors or do multi-color gradient bans.
However, as you can see in the screenshot adding a two color border to the image was easy. And then changing the rotation and skew of the image was also easy to do. If you get confused, just watch the Vectr Lesson on images. Finally in the case of the text, font type was changed several times because users have a choice of the Google fonts. Finally, after trying many colors and shadows I settled on a no-decoration Open Sans font.
Just to give an example of Vectr versatility, a new vector graphics logo for Imagenation IT was tested in a few minutes. And though this logo was not chosen it certainly provoked a lot of thinking on what could be done. Since logos have to scale-up to very large sizes, having them done in vector format,SVG, is vital. Doing cards and brochures are two more examples where vector graphics is practicable for the Web .
Summary
Autodesk has already done a superb job of creating a Photoshop-like free online photo-editor. But Vectr is no match for Illustrator or Inkscape. However, for quick vector graphic tasks rendered in PNG, SVG, or JPG, Vectr with its easy to use features goes to the top of my list of free online vector graphic tools