top of page

Vector Graphics for Videoscribe

Videoscribe is one of the programs we use to create whiteboard videos for elearning, and its greatest feature is that is can “draw” vector graphics created in Adobe Illustrator by following the path lines, just like a live whiteboard video!

Here’s how you create simple line graphics for Videoscribe.

Once you have a new illustrator file started, make sure your swatches are set to No fill and whatever colour of line you’d like. In this example we are just going to use black.

You can draw shapes with the Pen Tool or any of the shapes tools. If you draw a line with the Pen tool and want the line to end without creating a closed shape, hit the Esc key when you’re done.

Once you’ve drawn your graphic, you can change the order in which Videoscribe will draw each element of your picture from the Layers menu.

Each path in your graphic will be drawn starting from the bottom to the top layer in the layers menu.

If your graphics contain any fill colours, the colour will pop into the Videoscribe video after all the strokes are drawn no matter where it appears in the layer order. For instance, if the oval at the bottom were filled in, the oval line would still be drawn first, but the colour would not appear until the rest of the paths were drawn.

When your graphic is done, save your file as an .svg. You can use the default settings on the .svg options menu that pop up, EXCEPT you should make sure the CSS properties under Advanced Options in the middle of the pop-up are set to Presentation Attributes.

If you import a new file into Videoscribe and it appears as a series of black shapes, it’s because the CSS properties were set to something else.

Now that you know how to get started drawing custom graphics for your elearning whiteboard videos, check out our other articles on using illustrator for other helpful tips, or contact us today to see how we can help you create videos for your elearning!


Featured Posts
Recent Posts
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page