Sparkol Help

Topic not covered?

Start a new topic

Make Any Font, Text or Equation Draw Well (2017)

 ***This thread is an updated version of the following threads:  Can I make other fonts "draw" well? and Make Any Font, Text or Equation Draw Well (2016).  I have rearranged some parts that were confusing and I have fixed some spelling and punctuation errors, and added a few notes***


Problems Addressed:
A) Videoscribe can draw western fonts and left-to-right languages correctly, but does not support some fonts/languages, Arabic, Chinese, Hebrew etc.
B) Insufficient spacing between words, Irregular spacing between letters, unsupported characters do not show.
C) Complex maths formulas or diagrams are very difficult to input, or symbols are missing.

D) some imported raster or vector images don't draw well



Solution:

Videoscribe includes the ability to import fonts from your computer and the fonts may draw well without the extra work of making them into an SVG. However if you can't get the results you want by simply typing the text into videoscribe, the following process works well. (At the time of this post, the current version of videoscribe is 2.3.6)

NOTE: This process requires some knowledge of inkscape or illustrator or some self-teaching and google searching.  I recommend experimenting with making a single word or a few characters first until you are sure you understand the whole process.

NOTE2: versions of illustrator released in 2013 or newer will require special save settings that are discussed later in this post (to avoid unsightly bugs). Similarly, if you are using inkscape (available for free at inkscape.org), DOWNLOAD AND USE VERSION 0.48.5.  Newer versions save extra data in the SVG that will cause problems in videoscribe.

NOTE3: if you need a little extra clarification for basic inkscape or illustrator terminology, hopefully a google search will provide it. I'm trying to keep this guide to a manageable length.



LET'S BEGIN!
1) Type your text into your  illustrator or inkscape document, or copy/paste it from a text document into your illustrator or inkscape document. Write a word or a sentence or a paragraph in a font of your choice. Adjust any spacing, kerning or other settings to your satisfaction using the text menu options in your program. In other words, Make your text look the way you want it to look. The screenshot below is from adobe illustrator CS4:




2) You can use multiple fonts if you want to/need to. You can also use this process to combine text and drawings into one SVG. For the purposes of this tutorial, we'll stick to one font.


3) Convert the text to outlines. In Illustrator, I believe that you click TYPE>CREATE OUTLINES. In inkscape I think it is PATH>OBJECT TO PATH. This step  converts your editable text into vector paths that are closed filled paths with no strokes. The text converted to outlines should look something like this:


NOTE: If you aren't too picky about the way the text will be drawn, (for example if you are going to use "move-in" instead of "draw" to animate your text) you can just skip to step 8 and save your Text as an SVG right now. There is an old video tutorial from videoscribe version 1 showing the way that would look: text- to SVG simple version




If you want your text to draw better, continue with the following steps:
4) If this step seems too confusing, just skip it: If your new paths seem completely overloaded with anchor points (lets say.. more than about 20 or 25 per letter) it might make your final file size a little larger. That may not be a concern unless you are using many many text SVGs in a pretty long scribe. If you are really being careful to optimize everything, you may be able to reduce the number of anchor points using OBJECT> PATH> SIMPLIFY in illustrator,  or PATH>SIMPLIFY in inkscape.

5) Now that you have your vector paths, it may be a good idea to lock those layers so you don't accidentally select or move anchor points during the later steps. After you have locked the existing art,  add a new layer for the next step. I believe that locking can be done in both illustrator and inkscape.

6) On the new layer, you'll be making the reveal stroke(s) that the videoscribe hand will follow when drawing your text. You can use the pen tool or the pencil tool with a BASIC stroke (no paintbrush style or other effects). Use rounded caps and corners. Use a stroke big enough that you can manually trace over each of the letters and the letters will be COMPLETELY hidden under the new stroke. If your finished videoscribe is going to be drawing at a leisurely pace, then you may want to be very precise with your reveal stroke(s)- be careful when drawing over each letter that you do not cover parts of the adjacent letters.  If your final video is going to be drawn quite quickly, you don't have to be as precise. You are basically just adding a path for the hand to follow that APPROXIMATES the motion of writing the letters. it can be one continuous curvy/squiggly line like a sawtooth pattern covering each letter in the proper drawing order. try to cover each letter before moving to the next. If you are using the pen tool , click and drag to create each anchor point and you will get smoother curves in your reveal stroke instead of sharp corners. your reveal strokes can be one long path or multiple smaller paths.  In the attached screenshot, I used the pen tool to click and drag as I made each new anchor point so the path is nice and curvy instead of just sharp angles. I adjusted the reveal strokes to 50% opacity so you can see the text and the reveal strokes in the screenshot. I set the layer color to green and the stroke color to purple for easier viewing The top example uses a very carefully drawn stroke to reveal the text one letter at a time. This can be time consuming to prepare but it draws very nicely if the animation time is slow in videoscribe. The bottom example uses a much simpler up and down squiggle with a large stroke size which is easier to create and it will usually look just fine if it is animated quickly in videoscribe:


I only drew a stroked path over the word "text" in my screenshot. Of course you will want to cover ALL of your letters that you wish to be drawn nicely in videoscribe,

7) After finishing your reveal strokes, set the opacity of the reveal stroke(s) to zero so it is transparent. If you want, you can temporarily set it to about 50% so you can look for places where the stroke doesn't cover the text, and then fix it, but be sure to change the opacity to zero before you save the SVG.

8) Export the finished image as an SVG. In inkscape version 0.48.5 the default save settings should be fine. In Illustrator versions that are older than 2013 most settings seem to work fine, but you can refer to the below screenshot if you want. In illustrator CC (2013) or newer, you really need to use these settings to avoid visual glitches:




9) Import your new SVG into videoscribe and test it. If you have to update your SVG. you will need to be sure to import the NEW version into videoscribe and not just re-import the cached version from "recently used" images appearing on the import menu.

10) if any of your reveal strokes draw in the wrong direction, you will have to go back and reverse the direction of the path in inkscape or illustrator. I believe that clicking the desired "ending" anchor point with the pen tool might fix the direction. or you can google other solutions for your particular drawing program.

11) MATHEMATICAL EQUATIONS: I believe that you can import LaTeX (I'm not very familiar with it) data into illustrator in pdf format as vectors. After importing that vector information, you could theoretically just save it as an SVG using the settings in the screenshot above,  or you could continue with steps 4 through 9. If anyone uses any Maths program that exports pdf or svg files, and you decide to try the above steps, please feel free to comment here.

12) EMBEDDED IMAGES: Theoretically, if you have any type of image file that you can import into illustrator or inkscape, ( like a scanned image of a handwritten letter, or a jpg image of a drawing for example) you can use steps 6 through 9 above to convert it to an SVG that works in videoscribe. Be sure to use "embed" in your save settings or the embedded image will not be saved inside the SVG. Keep in mind that if your embedded image has a large file size, it will increase videoscribes memory usage, so keep your images optimized.


13) If you have vector art that does not draw well in videoscribe because the art contains fills instead of stroked paths, you could use steps 5 through 9 above to make an SVG that will draw well in videoscribe. The process will probably work best with images that look like clean simple line art.

---------------------------------------------------------------------------------------------------------------


The process described above is obviously a bit more work than just typing in the text into videoscribe, but you can make pretty much any font draw well. The faster the words draw in videoscribe, the less accurate your transparent stroke needs to be, and the less noticeable any inaccuracies will be.

This method should work with Chinese, Japanese, Hebrew, mathematical equations, and any other written languages regardless of the direction in which you would like them to be written or read.



-Mike (videoscribe user)

I just posted a small application that might be of help for getting expressions, simple drawing in videoscribe, have a look in: "videoscribe Q&A"- converting pixel graphics (png/bmp/...) to vector graphics.

 

 



As the small program I wrote can not be archieved at videoscribe (legal stuff) I out it on google. you can download it via sites.google.com/site/pixels2svg

Thanks for being patient with us Otto while we worked through the legal side of software we do not write the code for being linked through our site! As he said it is available from the author’s website here: sites.google.com/site/pixels2svg

Disclaimer: We like this software, and it has performed well during ordinary use, but we have not undertaken any in-depth testing and we have not checked it for the presence of malware or any potentially harmful behaviour, so you download and use it at your own risk and we do not accept any liability for any loss or damage it may cause.”

I tried this method with inkscape and i had an issue of having the font very thin and suddenly at the end it shows up normally .. why ?
Fixed it .. just right click on the path .. stroke and fill .. stroke style .. increase it until the path covers the whole text
That's a good point.

It sounds as if Bader Al-Hindi used the first 3 steps and then didn't like the way the SVG was drawn in videoscribe. If I understand correctly, he just added a stroke to the paths which is a good suggestion. I have described it a little more here:
ALTERNATIVE STEP 5A) Instead of doing steps 5,6 and 7 listed in the original post, There is another option to simply "select all", then add a stroke to all of the letter paths and remove the fills. Adjust the stroke size large enough to make the letters look solid.  Videoscribe will still draw around the outline of each path but the letters will fill in at the same time. This method MIGHT make some fonts look too thick and not legible enough, but at least its fast and easy.


ALTERNATIVE STEP 5B) Instead of doing steps 5,6 and 7 listed in the original post, There is another option which is slightly more complicated that alternative step 5a. COPY and paste your text so you have two copies perfectly aligned in the same location on the work space. Leave the bottom copy just the way it is with filled paths. select the the top copy and change it to strokes with no fills. Make the strokes just wide enough to cover the color fills. The strokes will also extend outside of the filled paths too, but don't worry. Then change the opacity of all the new strokes in the top copy to 0%, so only the bottom layer with the filled text is still visible. When drawn in videoscribe the transparent strokes should reveal the letters.  If you use this method, videoscribe will still be tracing around the outside edges of each letter but the whole letter will be drawn in the process (instead of just a thin outline). You may or may not be satisfied with the results but I think it is a bit easier than steps 5-7 (the process of manually drawing the reveal strokes) in the original post.

I haven't actually tried the two alternative methods yet, so they are hypothetical. I may come back and provide samples or change the post if I find they do not work as expected.

-Mike (videoscribe user)

Hey all! 

Is there any plans to get the recent versions of Inkscape to work with VideoScribe? 

I'm a new user and am loving this program so far! 

Keep up the great work :) 

You can read tip 7 in the following thread for setting that MIGHT work in the newest inkscape:
http://help.videoscribe.co/support/discussions/topics/11000012336

I haven't verified if whether or not they prevent all the problems.

The older inkscape mentioned above works without problems.

-Mike (videoscribe user)

 

Thanks Mike. 

I did try to install the old version of Inkscape but it's giving me an error on my Mac when trying to open (asking for X11). I'll try the new version and see how that goes. 

Yes, you need XQuartz/X11 installed on your Mac to run either version of Inkscape. The instructions for installing Inkscape and XQuartz can be found here https://inkscape.org/en/download/mac-os/


When using the latest version of Inkscape you just need to make sure that the units are set to pixels in the document properties. I don't think it remembers your selection so you may need to change this for each image you make.


image



Login to post a comment