【VideoScribe】SVGで自作アニメーションを作る方法〜Illustrator編〜




 

VideoScribeで動画制作していると、

自分で手書きアニメを作ってみたい

と思うこともあるでしょう。

それは十分に可能で、

SVGファイルを活用すると、手描きアニメーションを再現できます。

 

SVGファイルとは?

「SVG」とは何の略でしょうか。

それは、

Scalable Vector Graphics

で、Wikipediaによると、

XMLベースの二次元ベクターのイメージファイル形式

です。

 

XMLコードを編集することで、グラフィックス表現ができるファイル。

「ベクター形式」なので、いくら拡大しても画質は劣化しません。

2001年にW3C勧告となって標準化され、20年近い歴史があるファイル形式なのです。

SVGには「ストローク属性」があり、書き方の情報を格納できます。

したがって、SVGなら手描きアニメーションをVideoScribeで動かせる、というわけ。

 

VideoScribe向けのSVGファイルの作り方

SVGファイル作成には「ベクター系描画ソフト」を使いましょう。

VideoScribe公式ページでは、以下の2ソフトが紹介されています。

わたしは日頃からAdobeにお世話になっていることもあり、IllustratorでSVGを作成してみました。

 

「ペンツール」または「鉛筆ツール」で描く

まずはイラストレーターでSVGファイルを書きます。

ここでの注意点は使うツール。

書き順を染み込ませたSVGを制作するためには、

  • ペンツール
  • 鉛筆ツール

のいずれかがマスト。

つまりは「ベジェ曲線」で描けるツールに限るんですね。

似たものに「ブラシツール」がありますが、残念ながらベジェ曲線で出力されず、VideoScribe向けではありません。

 

「ペンツール」ならばベジェ曲線をコントロールしやすく、狙い通りに線を描きやすいのが特徴。

ただ、操作になれぬうちは残念な線ばかり誕生します。

Image from Gyazo

一方「鉛筆ツール」はマウス操作で感覚的に、ペンを握って描くように線をかけます。

ベジェ曲線に不慣れな方は鉛筆ツールがおすすめ。
Image from Gyazo

SVGファイルで出力

さて、描いた図形をSVGで出力しましょう。

イラレでは以下2つの方法で出力できます。

  1. アートボード全体を書き出し
  2. 選択範囲を書き出し

 

アートボード全体

まずはアートボード全体。

上メニューの「ファイル>書き出し」から「書き出し形式」へ進みます。
Image from Gyazo

 

「名前を付けて保存」を選び、ファイル形式を「SVG」にし、最後に「アートボードごとに作成」へチェック。

すると、オプションウィンドウが出てきます。

スタイル プレゼンテーション属性
画像 埋め込む
レスポンシブ チェックはずす

上のように設定をし、OKボタンを押して、SVGで書き出し。

 

アートボード一部の選択範囲をSVGで書き出す

続いて、選択オブジェクトをSVGで書き出す方法のご紹介。

 

「選択ツール」でオブジェを選択して、右クリック。

選択範囲を書き出し

を選びます。

Image from Gyazo

そして、保存場所を選び、形式をSVGにし、プレフィックスをつけて書き出しましょう。

細かい設定は「歯車マーク」から。

先程と同じく

スタイル プレゼンテーション属性
画像 埋め込む
レスポンシブ チェックはずす

でOKです。

 

VideoScribeにSVGファイルを読み込む方法

あとはVideoScribeにSVGを読み込むだけ。

右下の「Add Image」から読み込みましょう。

Image from Gyazo

すると、イラストレーターで描いた順番で手描き表示できるではありませんか。
Image from Gyazo

すごいですね、凄まじいです。

 

ただし、塗りは手書きされません。

塗りを手書きで表現したい場合、下記のアーティクルを参考に試行錯誤してみてください。

それでは!

Ken

 

【参考記事】

コメントを残す

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