【VideoScribe】SVGの塗りを手書き表示する方法




 

VideoScribeにSVGを読み込めば、自作の「手書き表現」が可能です。

しかし、問題点が1つ。

それは、

塗りが手書きならない

ということ。

Image from Gyazo

塗りだけは一瞬で表示される簡素なアニメーションのまま。

どっからどうみても、違和感が残ります。

 

【VideoScribe】SVGの塗りを手書き表示する方法

そんな時もご安心を。

VideoScribeとイラストレーターを活用すれば、塗りまで手書き表現できます。

  1. 塗りがまだされていない図形
  2. 塗りが既にある図形

の2パターンで解説します。

 

塗りを追加する

ベジェ曲線で塗りを再現します。
Image from Gyazo
VideoScribeのSVGは「先に書いたものが先に描画される」ルールです。

線をかいてから、塗りを「ペンツール」または「鉛筆ツール」でかくと、

線 → 塗り

で表現できるでしょう。

 

具体例をお見せします。

ベジェ曲線(ペンツール)で塗りを表現。

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

Image from Gyazo

うん、十分塗りを再現できていますが、塗りが線がかぶると違和感が残ります。

「塗り」と「線」を別々のレイヤーにわけると作業しやすいです。

VideoScribeでは、下レイヤーから順番に描画するルールを採用しています。

 

塗りが既にある図形

次はすでに塗りが入っているパターン。

そういった場合、ペンツールまたは鉛筆ツールで、透明の線を上から描きます。

すると、塗りがストローク表現されます。

 

塗りの上に重ねる線は

  • 色あり
  • 不透明度 0%

にしましょう。

軌跡を確認するため、最初は色があっても構いません。

最後はこちらを透明にします。
Image from Gyazo
線ありで「不透明度を0%」にするんですね。

Image from Gyazo
最終的に、図形の外見上は線が入っているように見えません。

これをVideoScribeに読み込むと、あら不思議。
Image from Gyazo

超自然な塗り表現に!

塗り線を太くしたいなら、透明線を太くすればいいでしょう。

 

いやあ、こちらの方法の方が好き!

図形からはみ出た分は表示されませんからね。

 

以上です!

Ken

 

【参考記事】

コメントを残す

メールアドレスが公開されることはありません。