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向けではありません。
「ペンツール」ならばベジェ曲線をコントロールしやすく、狙い通りに線を描きやすいのが特徴。
ただ、操作になれぬうちは残念な線ばかり誕生します。
一方「鉛筆ツール」はマウス操作で感覚的に、ペンを握って描くように線をかけます。
ベジェ曲線に不慣れな方は鉛筆ツールがおすすめ。
SVGファイルで出力
さて、描いた図形をSVGで出力しましょう。
イラレでは以下2つの方法で出力できます。
- アートボード全体を書き出し
- 選択範囲を書き出し
アートボード全体
まずはアートボード全体。
上メニューの「ファイル＞書き出し」から「書き出し形式」へ進みます。
「名前を付けて保存」を選び、ファイル形式を「SVG」にし、最後に「アートボードごとに作成」へチェック。
すると、オプションウィンドウが出てきます。
| スタイル | プレゼンテーション属性 |
|---|---|
| 画像 | 埋め込む |
| レスポンシブ | チェックはずす |
上のように設定をし、OKボタンを押して、SVGで書き出し。
アートボード一部の選択範囲をSVGで書き出す
続いて、選択オブジェクトをSVGで書き出す方法のご紹介。
「選択ツール」でオブジェを選択して、右クリック。
選択範囲を書き出し
を選びます。
そして、保存場所を選び、形式をSVGにし、プレフィックスをつけて書き出しましょう。
細かい設定は「歯車マーク」から。
先程と同じく
| スタイル | プレゼンテーション属性 |
|---|---|
| 画像 | 埋め込む |
| レスポンシブ | チェックはずす |
でOKです。
VideoScribeにSVGファイルを読み込む方法
あとはVideoScribeにSVGを読み込むだけ。
右下の「Add Image」から読み込みましょう。
すると、イラストレーターで描いた順番で手描き表示できるではありませんか。
すごいですね、凄まじいです。
ただし、塗りは手書きされません。
塗りを手書きで表現したい場合、下記のアーティクルを参考に試行錯誤してみてください。
それでは！
Ken
【参考記事】
