Saturday, June 17, 2017

Quick and Easy Vector Graphics: Vectr & Flaticon

I have no graphic design ability. Or it's just been dormant for the last 35 years. Anyway, the visual arts have never really been my thing. That's why I always appreciate a good tool that makes it easier to create the basic images I need for blog posts, websites, and social media. I consistently use PicMonkey, BeFunky, and Canva, and I'm always on the lookout for tools that make my lack of design skills just a bit less obvious.

My new favorite is Vectr, which I first read about in this TCEA post. Vectr can be downloaded for Mac, Windows, and Linux, but everything in the desktop version is available in the super-robust web version. That makes it perfect for students and teachers who need to create graphics in a Chromebook district like mine.

What is it?

Vectr is free graphics software you can use to create your own vector graphics. Vector graphics (like SVG files) are different than raster graphics (like BMP files). In short, vector graphics can be sized up or down without sacrificing image quality, while raster graphics lose quality when they're enlarged beyond their original size. This article from the folks at Vectr gives a more thorough explanation.

What can you do with Vectr?

With about 20 minutes of poking around and watching some of the tutorial videos, it's obvious that Vectr is a powerful tool. You can create all sorts of graphics, then download them in multiple file formats (SVG, PNG, JPG). Adjust the dimensions and, since it's a vector graphic, it retains the quality of the original.

Here are three ideas for harnessing the power of Vectr right away.

1. Text with Image Backgrounds

I was super-proud of my ability to quickly create text with an image background (see the uber-fancy "orange" and "green" below). Insert your text, then select "Background Image" on the right hand side. Choose the image you want to use, and it shows through the font as the background. You can adjust and resize it as needed to make your text look just like you want it.

For students who are designing digital portfolios or websites, this kind of ability is great for spicing up their work and adding custom touches.

Inserting the image background

Exported as .png file

2. Build Graphics with SVG Files from Flaticon

If you've never used the wonderful image site Flaticon, it will quickly become your best friend. They have a free, searchable image library where you can download graphics as SVG files or other image formats. If you're using Chrome, after you download a graphic, you can drag-and-drop it straight into the Vectr interface (see animation below). Then you can edit the graphic and add text and additional shapes as you see fit.

Drag-and-Drop from Flaticon to Vectr

In the graphic below, I imported the light bulb SVG file from Flaticon, added my own text, then put a simple rectangle with a radial gradient in the background.

Just make sure you give Flaticon credit for the graphics you're using by including this credit on your site: Icons made by Freepik from is licensed by CC 3.0 BY.

3. Explore Vectr's Templates

Need YouTube channel art? Twitter header? Facebook cover photo? Vectr has built in templates for each of these and more. Navigate down to the lower left-hand corner and click on the "custom page" dropdown (drop-up?) and choose a template. Or you can select your own dimensions to fit whatever you need.

Select templates to work with

Wrap Up

If you're already familiar with vector graphics editors, you'll have no problem using Vectr for quick edit jobs. If you're not familiar (like me), Vectr is full of lessons and tutorials that will have you creating in no time. As I need new graphics for projects, I think Vectr will become one of those tools whose power becomes more and more evident over time. I'm looking forward to going deeper, and I'll share more here as I do. 

Have ideas for cool projects with Vectr? Share them in the comments section.

No comments:

Post a Comment