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

  • (This is an updated version of the foll wing thread: Can I make other fonts "draw" well?)


    Problems Addressed:

    A) Some fonts don't draw nicely in  Videoscribe.

    B) Insufficient spacing between words

    C) Irregular spacing between letters.

    D) Videoscribe can only draw western fonts and left-to right languages correctly. No support for Arabic, Chinese, Hebrew etc.

    E) Complex maths formulas or diagrams are very tedious to input, or symbols are lacking


    Solution: (this topic was updated for version 2.3.5 of videoscribe, but it may work in other versions as well. Videoscribe now includes the ability to import fonts from your computer and they may draw better than they did in version 1 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 should work very well.)


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

    NOTE2: versions of illustrator from 2013 or newer will require special save settings that are discussed in this thread (to avoid unsightly bugs)  Inkscape is free at inkscape.org. DOWNLOAD AND USE VERSION 0.48.5 because newer versions cause unsightly bugs 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 into your 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. 



    2) I believe that you can import LaTeX (I'm not very familiar with it) data into illustrator in pdf format as vectors( and then skip to step 4 or 5). You can also import png or SVG images. However, large file sizes or files with extraneous data might cause problems in videoscribe.


    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 filled with no strokes. The text converted to outlines should look something like this:



    4) If your new paths seem completely overloaded with anchor points (lets say.. more than 15 or 20 per letter) you may be able to reduce them using PATH>SIMPLIFY in inkscape if you are feeling adventurous. experiment with the settings for best results. If this step seems too confusing, just skip it.


    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 steps


    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 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 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 adjusted  the reveal strokes to 50% opacity so you can see the text and the reveal strokes. I set the layer color to green and the stroke color to purple for easier viewing:


    Of course you will want to cover ALL of your text that you wish to be drawn nicely in videoscribe, even though I only covered some of the words in my screenshot.


    7)  After finishing your reveal strokes, set the opacity of the reveal stroke(s) to zero so it is transparent.


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


    9) import into videoscribe and test. 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 reveals draw in the wrong direction you will have to go back and reverse the direction of the path in inkscape or illustrator. adding more anchor points to the "end" of the path may work or you can google other solutions for your particular drawing program.


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


    This process 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)


    1 person has this question
  • Well done Mike!


  • Thanks!

    a couple of notes"
    1) sorry if there are a few sentences that don't quite make sense as you read them. I revised many times and a few phrases or words were not proofread sufficiently. Hopefully the meaning is still clear.

    2) It is worth mentioning that you COULD actually just use the first 3 steps and then save your text as an SVG. The result is that videoscribe will draw the outline of each character and then the fill will appear. If the text is sufficiently small and fast in your project, that might still look pretty good.  There is an old video tutorial from videoscribe version 1 showing the way that would look: text- to SVG simple version

    3) if your text will be drawn fast in videoscrib...you can probably be more loose and sloppy with your reveal strokes than I was in my screenshots. Just make sure all character get covered. I'd recommend testing your first few attempts in videoscribe to see how they look before taking the time to make a whole bunch of SVGs

    -Mike (videoscribe user)


     

  • I've done this but the problem is that VideoScribe still only draws the outline of the Arabic characters and the colour gets filled in afterwards. 


    How do I get VideoScribe to look like it is drawing the whole character in one go, rather than the outline of every character. This is really frustrating.

  • please attach one of your SVGs so support (or I) can try to identify the problem.

    -Mike (videoscribe user)

     

  • here it is

  • here's a file which I added a transparent set of strokes over the top of the orginal text - as described in the article.

  • Thank you for attaching the SVG.

    I see what is causing the problem. I believe that after you made your reveal stroke (step 6), you converted your reveal stroke to an outline, so instead of videoscribe drawing a good reveal stroke, it is drawing around the outline of the reveal stroke.

    Please delete the outlined reveal stroke from this SVG, then draw a new reveal stroke as a simple stroked path and change the opacity of that stroked path to zero and re-save it.

    I hope that helps,
    Mike (videoscribe user)

     

  • No - it doesn't work - exactly the same outline is happening. On the 2nd layer, I didn't convert to outlines.

    svg
    (52.2 KB)
  • It seems as though you might be doing something differently than the guide.

    If you have not converted the reveal path to outlines, then another possibility is that you used:
    1) the blob brush instead of the pen or pencil tool,
    2) the paintbrush instead of the pen or pencil tool, or
    3) the pen or pencil tool, but with a STYLE applied to it  instead of using a basic stroked path
    4) a different program other than illustrator or inkscape that produces unexpected results.

    when saved as an SVG those things might have been converted to the filled outline that you are getting.

    Here is a screenshot of your reveal stroke (the blue outline) in your SVG (you may have to do something like right-click and "view image" if you wish to see it full size):


    and here is an example of how it should look (the blue path on top of the black text):




    -Mike (videoscribe user)
  • Mike

    I'm not using Adobe Illustrator - I'm using Inkscape - so the diagram is not helpful.

  • OK - I worked it out now. That does work. Thanks.