【ウゴツール 】手描き風動画！線をぐにゃぐにゃさせる方法【After Effects】

手描き風動画って何だかキャッチーで柔らかみがある印象を受けません？

そんな動画にさらにキャッチーさや、柔らかみをだす為に、線をぐにゃぐにゃ？モゾモゾ？モゴモゴ？ざわざわ？させてみませんか？

こんなやつ↓

こういったものを作る方法を考えると、元絵をちょっとズラしたやつを何枚か描いて。。。となりそうですが、
とってもめんどくさいですよね！！

今回は、そんなことをせず簡単にツールを使って線をモゴモゴ？させる方法 を解説いたします。

1. ウゴツールを使う（フリーソフト）

windowsをお使いの方には「ウゴツール」というフリーソフトがあります。
こちらは書くだけで、すぐに線がモゴモゴ動き出します。
それをGIFファイルで書き出せばOKという超絶簡単仕様になっています。

ただし、簡単仕様なので、いくつかデメリットもあります。

1)GIFファイルでの書き出しなので、動画編集ソフトによっては静止画になる
Adobe Premire proではGIFファイルを読み込んでも、対応して動いてくれるんですが、
そもそもGIFファイルは静止画の連続なので、動画編集ソフトによっては静止画になってしまう場合があります。

ソフトの設定で解決する場合や、GIFファイルを動画ファイルに変換するソフトなどを別途使用しなくてはいけない場合もあります。

2)大きいサイズで作成できない。
最大サイズが800×600なので、例えば、フルHDのサイズでは作成ができません。
編集ソフトに取り込み後、大きくする等の作業が必要となります。

3)既存の画像ファイルを読み込めない。
読み込み機能がないので、すでに描いてある絵を読み込むことができません。
ウゴツール上で新しく描く必要があります。

このようなデメリットがあります。

とはいえ、作成自体は非常に簡単なので、WEBページ上の画像などに使う絵などには最適ですし、一工夫すれば動画にも組み込めるので、興味がある方は一度使ってみてはいかがでしょうか？

ウゴツール　ダウンロード

Adobeの動画編集ソフト、 「After Effects」 の「タービュレントディスプレイス」というエフェクトを使えば、線をモゴモゴ動かす表現ができます。

こちらは画像と共に解説をしていきたいと思います。

1)線を動かしたいイラストを読み込む

2)「レイヤー」→「新規」から「調整レイヤー」を選ぶ



3)作った調整レイヤーのクリップを選択状態にしたまま、「エフェクト」→「ディストーション」から「タービュレントディスプレイス」を選ぶ


4)タービュレントディスプレイスの数値を変更します。
「量」を0
「サイズ」を10
「複雑度」を10
にして、キーフレームを打ちます。



5)2フレーム目に移動し、「量」のみを-8にします。



6)4フレーム目に移動し、「量」のみを4にします。



7)作成した３つのキーフレームを全部選択し、右クリックします。

出現したメニューから、「停止したキーフレームの切り替え」 をクリック。


8)altキーを押しながら、「量」のストップウォッチマークをクリックすると、すぐ右下に新しくメニューが出てきます。
そのメニューの一番右の三角形のマークをクリックします。
出てきたメニューから「property」から「loopOut (type ="cycle　〜）」を選択します。



これで一度再生してみましょう。

どうですか、線がモゴモゴ動いてませんか？

また、揺れが早い（遅い）と感じたら、３つのキーフレームを選択し、altキーを押しながらマウスを左右に動かすと、揺れのスピードを調節できます。

以上で動かすやり方の説明でした。

After Effectsのダウンロードはこちら


線の太さなどで見え方は違うと思いますので、「量」、「サイズ」の数値をいじったり、キーフレームの幅を変更したり色々試して、しっくりとくる揺れ方を探してみてください。

これで皆様も、明日からゆるふわ系癒し動画で再生数を荒稼ぎですね！！！←言ってる意味がよくわからない

関連記事