Fill an image with color using the hand

Learn how to make VideoScribe draw a whole image, including the fill at once

Creating your own hand-filled SVGs for VideoScribe

You can create your own images for VideoScribe in Adobe Illustrator or Inkscape:

  • Step 1. Use the pencil tool you would use to draw the outline of an image for the image fill too.
  • Step 2. Make the line thickness bigger and color in the drawn image like you would on paper.

The images in the 'Sketch Character' folder in VideoScribe draw the fill of the image as well as the outline - the fill was done using lines. To have a closer look at how to do this, right click an image from the 'Sketch Character' library when it is on your canvas and select ‘Export to SVG’. You can then open it in the SVG editor and see how the fill was created with lines.

You will only be able to export images from VideoScribe which are owned by Sparkol. Premium Images are owned and sold by private illustrators, you will not be able to export Premium Images.

Please note: Under the agreed terms application content can only be used in the application so if you export an image to make edits you cannot use the image elsewhere.

If you have an image that's already filled...

If the image is already colored in using a normal fill there is still a way you can get VideoScribe to draw the fill without changing the look of the image at all.

You'll need to create lines over the image fill:

Step 1. Open the image in an SVG editor after exporting it from the canvas.

Step 2. Select the pencil tool  if using Illustrator or the 'Draw Freehand Lines' tool  (A) if using Inkscape. If you're using another SVG editor select the tool that creates basic (not brushed) strokes.

Step 3. Create the lines that VideoScribe will draw.

  • It's best to create a new layer for the lines and position it above the layer containing the image. Then lock the layer containing the image.
  • These lines need to cover the fill that you want to be drawn.
  • Make sure they cover as much of the image as possible.
  • The order that your lines are drawn in will be the order that they're drawn in VideoScribe.
  • It doesn’t matter if the lines go over the outlines of the image.

Top Tip: You can increase the thickness of the lines to cover more area with less lines.

Step 4. Make all the lines completely transparent by taking the Opacity level all the way down to 0.0 (B).

Step 5. Save it as an SVG.

For Illustrator choose File -> Save as… and choose SVG in the ‘Format’ drop down menu (see section ‘Export settings for Adobe Illustrator’ at the bottom of this article). In Inkscape choose File -> Save as… ‘Inkscape SVG’ should be the default save option or you can choose ‘Plain SVG’.

Step 6. Import the image into VideoScribe and test whether you like the effect.

Export settings for Adobe Illustrator

When creating SVG images in Adobe Illustrator CC there's a save option that must be changed for the image to work in VideoScribe - the image may be coming into VideoScribe with a black fill that's not on the original image.

When saving as an SVG there'll be a save options box that will appear after you have given the image a name. You will have the option to change the CSS properties in the Advanced options section.

The CSS properties should be set to either Presentation Attributes or Style Attributes. The save options in the screenshot below should be used when saving your SVG in Adobe Illustrator CC.