Fill an image with color using the hand

VideoScribe will draw the strokes of an SVG image, learn how to add invisible strokes to control how the image is coloured as well

Creating your own hand-filled SVGs for VideoScribe

You can add this effect to SVG images you create yourself

or

If you want to add this effect to an image in our Library (most have it already!) you will first need to export the SVG file. To do this right-click on the image while it’s on the canvas, and select ‘Export to SVG’

Submarine

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.

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

Step 2. Select the pencil tool (A) if using Illustrator or the 'Draw Freehand Lines' tool 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.

Top Tips: 

  • It's best to create a new layer for the lines and position it above the layer containing the image (B). Then lock the layer containing the image.
  • You can increase the thickness of the lines to cover more area with fewer lines. (C)
  • 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.

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

    Adobe Submarine Fill Process-1

    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’.SVG Options

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

    Submarine prefiew illustrator

    Interested in image creation? Our Expert course on Udemy includes a module dedicated to creating images that draw perfectly in VideoScribe.