VideoScribeにSVGを読み込めば、自作の「手書き表現」が可能です。
しかし、問題点が1つ。
それは、
塗りが手書きならない
ということ。

塗りだけは一瞬で表示される簡素なアニメーションのまま。
どっからどうみても、違和感が残ります。
【VideoScribe】SVGの塗りを手書き表示する方法
そんな時もご安心を。
VideoScribeとイラストレーターを活用すれば、塗りまで手書き表現できます。
- 塗りがまだされていない図形
- 塗りが既にある図形
の2パターンで解説します。
塗りを追加する
ベジェ曲線で塗りを再現します。
VideoScribeのSVGは「先に書いたものが先に描画される」ルールです。
線をかいてから、塗りを「ペンツール」または「鉛筆ツール」でかくと、
線 → 塗り
で表現できるでしょう。
具体例をお見せします。
ベジェ曲線(ペンツール)で塗りを表現。

これをVideoScribeに読み込むと以下の通り動きます。

うん、十分塗りを再現できていますが、塗りが線がかぶると違和感が残ります。
「塗り」と「線」を別々のレイヤーにわけると作業しやすいです。
VideoScribeでは、下レイヤーから順番に描画するルールを採用しています。
塗りが既にある図形
次はすでに塗りが入っているパターン。
そういった場合、ペンツールまたは鉛筆ツールで、透明の線を上から描きます。
すると、塗りがストローク表現されます。
塗りの上に重ねる線は
- 色あり
- 不透明度 0%
にしましょう。
軌跡を確認するため、最初は色があっても構いません。
最後はこちらを透明にします。
線ありで「不透明度を0%」にするんですね。
これをVideoScribeに読み込むと、あら不思議。
超自然な塗り表現に!
塗り線を太くしたいなら、透明線を太くすればいいでしょう。
いやあ、こちらの方法の方が好き!
図形からはみ出た分は表示されませんからね。
以上です!
Ken
【参考記事】
動画制作ノウハウを発信します。
コメントを残す