VideoScribe Help

Fill an image with colour using the hand

Last updated: 23 October 2017


How to make VideoScribe draw a whole image, including the fill, rather than the fill just appearing at the end.


Creating your own hand-filled SVGs for VideoScribe

You can create your own images for VideoScribe in 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 colour 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. 

If you have an image that is already filled

If the image is already coloured 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 will 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 are 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 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 are drawn in VideoScribe. 
  •  It doesn’t matter if the lines go over the outlines of the image. 
  • 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 is 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 is not on the original image. When saving as an SVG there will 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.


Did you find it helpful? Yes No

Can you please tell us how we can improve this article?

Related articles