I’ll start this review by admitting that I am NOT a graphic designer. I do design graphics, on occasion for my various projects, but I would never apply for a Graphic Designer job. I’m just not that good, nor have I had any official training.
Which is why I’m here to talk about Vectr. Vectr aims to give people like myself (graphic design novices) a medium for creating good looking graphics.
Over the years I’ve used various apps for creating/editing graphics. The three that I find myself going back to time and again are Pixlr, PicMonkey, and LucidPress. All three of those apps are unique, and are useful for different applications.
Pixlr is an obvious Photoshop clone. PicMonkey is great for creating text-based graphics, or adding borders/filters to existing graphics. LucidPress is marketed as an InDesign alternative. LucidPress doesn’t actually look like ID but it’s used for the same kind of things, basically doing layouts (Newsletters, brochures etc).
Vectr is a lot like LucidPress. It allows you to upload your own images, add shapes like squares, circles and lines, and of course text. Basic things can be done to objects like adding borders.
So for the past few days I’ve been using Vectr when I would normally use LucidPress so I can put it through it’s paces.
So how did it hold up to my basic graphic design needs?
First impressions of Vectr were positive. Vectr offers a downloaded version for Windows, Mac, Linux, and Chromebooks. I’m on a Chromebox, so, I chose that one.
You can also just click “Use Online” and use the app and all it’s features in a tab right in your browser.
Clicking “Download” for Chromebook took me to the Chrome Web Store where I was able to quickly download the Chrome app on my Chromebox.
I launched the app and logged in using my Google account.
I like the dashboard. It features large interactive thumbnails of your projects which can easily be opened, deleted, or duplicated. There’s a search bar for when you have a bunch of projects and need to easily find a particular one. And a nice big blue, obvious “Create File” button.
Clicking “Create File” immediately opens a blank workspace. On the left directly attached to the workspace are the buttons you’ll use most often: Rectangle, Rounded Rectangle, Ellipse (circle), Pen, Pencil, Text, Upload Image.
A bit further to the left are your Layers and Pages panes. Bottom-left is your page size settings, and upper right is where you’ll find a few more settings, like grid snapping, file settings, and export.
In the bottom right you’ll notice an active chat box where you can communicate with Vectr customer service if you have questions/issues.
Right away I found my first bug. I wanted to add some text, so I selected the text tool, and clicked and dragged to create a textbox in the workspace. It created a text box, and automatically put the word “text” inside of it. The text was already highlighted, so I began typing.
Once I was finished typing, I wanted to play with the font, size and color, but was unable to find any settings for this. I eventually discovered that if I click somewhere on the workspace, and then click on the text, the text settings will appear on the right hand side. Those settings should probably be there as soon as you create the text box and start typing, but, no big deal.
The next thing I noticed was that there was no way to change the color of the text – or so I thought.
Here’s why I thought that. Once I got the text options to show, this is what I saw:
- Inset Shadow
I could change the font family, size, height, spacing and alignment. But not it’s color.
Then I realized, that the “Background” option actually had nothing to do with the background of the text, but rather manipulated the color of the text itself. This struck me as odd, but once I figured it out, it wasn’t a huge deal.
I did notice that one of the options under “Background” was to upload an image. Curious as to what that would do, I tried uploading an image. It caused all the text to disappear, and replaced it with a blank white box.
You can also click a plus sign to add multiple “backgrounds” but nothing happens when you do. Whichever “background” color is on top, that’s what color your text is.
So let’s actually make something. I used Vectr to create the following graphic for use on www.chromebook.reviews:
A simple project.
For the most part it was easy. I created a white rectangle that was 94 x 94 pixels, and gave it a black border of 4 pixels. I then added the text, found the font I wanted (Lato) and gave it a border.
This is where I hit a snag. When adding a border to text in LucidPress, it adds the border around the perimeter of the text, as shown in this image above. But in Vectr, adding a border to text adds the border to the letters themselves. Here’s a screenshot to show you what I mean (I’m using a red border to make it more obvious):
This is not the effect I was going for, so I took a different approach.
I simply removed the border from the text, and created a small white rectangle which I placed behind the text (to move things forward and backwards, hover over the object and click the back or forward icon) and gave that small rectangle a black border.
And that was it. All done.
Everything was pretty obvious and intuitive, with the exception of the weird choice of the word “Background” to designate text color. I didn’t spend time figuring out how to do things.
A few neat little features that I noticed while playing around:
The ability to flip an object horizontally or vertically by hovering over the object with your mouse and clicking the appropriate icon.
Layers. Not every graphic design tool utilizes layers. LucidPress does, and I only recently even noticed that (it’s not obvious in LucidPress). In Vectr, it’s obvious. The Layers pane is right there on the left hand side and very visible. In the Layers pane you can lock a layer, hide it, or drag it above or below other layers.
Moving and aligning objects works pretty well. Things will snap to align with other objects. This can be turned off using an icon in the upper right corner if you need to position something specifically and the snapping is getting in your way. You can also turn on a grid.
The pen feature allows you to create lines and shapes with many manipulation points along the path. This is pretty cool and something that LucidPress doesn’t offer. Gravit offers it, but I haven’t found a way to add more points to a line or shape in Gravit. In Vectr, you can easily add points along the line to allow you to manipulate the line, creating curves and what-not.
Some minor disappointments:
Text boxes don’t auto-enlarge if you type more text than the size box you drew initially allows. This is probably on purpose and isn’t necessarily a bad thing. It’s probably a good thing. It’s easy enough to resize the text box if you need to.
There is no snapping action when you’re resizing an object. So, if you have one object, and you want the second object to be exactly as tall as the first, you’ll need to turn on the grid and do your best to match the height, because as you’re resizing the object, it will not snap to match the other object. Moving objects will snap, but resizing them does not snap.
No way to put an image back to it’s original size. Just have to delete and re-upload.
No crop feature.
There are guides that help you center objects within the page, but they are small and hard to see. I actually didn’t think there were any at first. It would be nice if those guides extended the full height/width of the page so it was more obvious.
Overall it’s a good app. It’s very easy to use, has a pleasing, intuitive UI and the creator promises more features to come. I would definitely recommend checking it out, especially if you’re a fellow Chromebook enthusiast like myself.
I give the app 4 stars. Anything that’s web based gets love from me. Vectr doesn’t have a ton of features (yet), but it works well and has a few things that set it apart from other similar apps.
Check out their Chromebook launch media kit here: https://medium.com/vectr-labs/vectr-free-graphic-design-software-launches-on-chromebook-media-kit-361f6c0fe216#.y5s9afw7x
Download Vectr here: https://vectr.com/downloads/
Check out their official webpage for tutorials and a user guide here: http://vectr.com