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
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 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 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. The save options in the screenshot below should be used when saving your SVG in Adobe Illustrator CC.