VideoScribeで「手」を自作する方法〜せっかくだから自分の手を使おう〜




 

VideoScribeではアニメーションを「Drawing」にすると、人間(またはその他の生物)の手で、キャンパス内のオブジェクトを描けるアニメーションを作成できます。

Image from Gyazo

VideoScribeでは多種多様な、グローバルな人種の手が揃っていますので、手のバリエーションに飽きはきません。

しかしながら、です。

当然やってみたくなるのが、

「自分の手」を使ってアニメーションを作ることです。

なんとありがたいことに、VideoScribeでは「手を自作する機能」が備わっていました。

 

VideoScribeで自作の手を使う方法

次の3ステップを踏んでみてください。

 

手を撮影する

まずは写真を撮りましょう。

ペンを握って文字を書いている様子を「白背景」で撮影します。

ホワイトボードがあればホワイトボードに向かってペンを持って書いている様子を撮影すればいいですね。

 

ただ、世にはホワイトボードが近くにない方もいるでしょう。

そういう時は白背景を作り出し、写真撮影しましょう。

わたしもホワイトボードが近くになく、A4のコピー用紙を3枚用意し、そこで白背景を作り出して撮影しました。

なぜ白背景が必要かというと、後々の背景を画像編集ソフトで切り抜くからですね。

 

そして、撮影するのは1枚だけではなく2枚。

それじゃあ2枚目はどうすればいいかというと、

同じポーズだけど「ちょっとだけずらした」写真を撮るのです。

誰にもわからないぐらいでいいので、腕を横にずらしてみましょう。

それぞれがどっちがどうだかわかるよう、名前つけて整理しておくと後々捗ります。

例えば、

  • hand1
  • hand2

などですね。

両者は微妙に手を動かしただけなので、傍から見るとどっちがどうだかわかりません。

ネーミングで区別しましょう。

 

背景を透過させる

続いて、画像編集ソフトで背景を透過させましょう。

今回はAdobeのPhotoshopを使ってみます。

先ほど撮影した写真をPhotoshopに読み込み、手とペンの範囲を選択。

「自動選択ツール」でポチポチとクリックすると、手とペンだけ選択できるでしょう。
Image from Gyazo
終わったら選択範囲を反転させ、

Image from Gyazo

「delete」します。「内容」は「背景色」、「描写モード」は「通常」でOK。

Image from Gyazo

これで背景が白になり、透明にならない方もいるでしょう。

そういう時はレイヤーが「背景」になっていないか確認してみてください。

Image from Gyazo

背景になっていると、いくらデリートしても透明になりません。

レイヤーでダブルクリックして「背景」から「レイヤー」に変更してからデリートすると、背景が透過されるでしょう。

Image from Gyazo

 

下に影をつける

お次は手に影をつけます。

背景を切り抜いた手にドロップシャドウのエフェクトをかければいいですね。

レイヤーウィンドウから「fx」と進んで、ドロップシャドウ。

Image from Gyazo

すると、ペンを持つ手に影が入るでしょう。

Image from Gyazo

ただし、影のつけすぎにはご注意ください。

影を濃くしすぎると不自然な手になりますので、あくまでも影は気持ち程度でいいのです。

 

クロップ

さて、お次は余分な余白をカット。

Photoshopのクロップ機能で、写真のサイズを変更しましょう。

Image from Gyazo

 

PNGで書き出す

さて、クロップまで終わりましたら、最後に画像を書き出しましょう。

「Web用に保存」から

  • PNG-8
  • PNG-24

のいずれかを選んで背景を透過できるフォーマットを選んでください。

Image from Gyazo

VideoScribeの公式情報によると、手の画像サイズは

800×1500 px 以内、解像度は300 dpi 以内

ならば読み込めるようです。

ってことで、画像サイズを「横 800 px」とします。

Image from Gyazo

そうすると縦サイズは自動で比率を変えぬよう変化するでしょう。

 

はい、手の画像いっちょ上がりです。

この「背景透過〜切り抜き〜PNG書き出し」までを1枚目と同様、2枚目でもやっちゃってください。

 

VideoScribeに読み込む

最後は、2枚の手の写真をVideoScribeに読み込むだけ。

手のマークをクリックし、

Create a New Hand

を選びましょう。

Image from Gyazo

そしたら、手の画像を2枚アップロードできる画面になりますので、1枚1枚アップロードしていきます。

 

ただし、ここで最後に作業が発生します。

単に画像をアップするだけではなく「ペン先を合わせる」作業が必要です。

アップロードすると「十字架マーク」が出てきます。

その十字架の中心をペン先に合うよう、マウスでカーソルを合わせてあげましょう。
Image from Gyazo
これで、手を自作する作業は完了!

Image from Gyazo
いやあ、すごい、VideoScribe。

自分の手が動くアニメーションを簡単に作成できるとは思いませんでした。

当初は

「アハハハハハ、自分の手を作れるってさあ」

と軽い気持ちでトライしてみたんですが、実際にやってみると、気分が高揚してしまったのです。

Image from Gyazo

「おお!俺の手があのペンを持って動いとる・・・・!!」

 

VideoScribeには日本人の手は残念ながらありません。

そのため、日本人ユーザー向けのホワイトボードアニメーションを作成している方は、アジア人に近い手を選んできたと思います。

しかし「手自作機能」を使えば、まさに自分の人種、というか自分の手を作成でき、視聴者に親近感を湧くような表現ができるかもしれません。

1回自分の手を保存すると、プロジェクトをまたいで同じ手を使えるようになりますから、自作の手は一生ものです。

ぜひチャレンジしてみてくださいね。

 

それでは!

Ken

 

【参考文献】



AEの作業を効率化!
After Effectsのショートカットポスター

Adobe動画制作ソフトAfter Effectsで便利なショートカットキーを把握できるショートカットキーポスターをどうぞ。




コメントを残す

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