ホワイトボードアニメーション

【Doodly応用】外部画像のパス(書き順)を設定する方法

2021年3月26日

こんにちは、井村尚弥です。ブログにお越しいただきありがとうございます😃

この記事ではDoodlyでアニメーション動画を作成する際に、外部からインポートした画像データにDraw Path、パス(書き順)を設定する方法を解説します。

Doodly Standardの画像が少なかったり、画像イメージが海外のものなので使いにくいという方は、日本の画像サイトで使えるものをDoodlyでも使いたい!と思うはずです。

外部データをそのまま取り込むとどうなるか

しかし、外部データをインポートした場合、書き順が設定されておらず描画方法に違和感を感じます。この辺の感覚は人それぞれなのでインポートしただけのDrawingがどのようになるかやってみますね。

今回はイラスト屋から画像をお借りします。

Doodlyで画像をインポートします。

こんな感じにスクリーンに表示されます。

 

 

そして、インポートしただけのDrawingは以下のようになります。

どうですかね?左上から斜めに”塗っている”ような描き方になっているのがわかります。「これでいいよ」という方もいれば、「もっとちゃんとしたい!」という方もいらっしゃると思います。後者の方はこの後の記事もご覧くださいね。

本記事の信頼性

  • ネットビジネス歴8年以上
  • 月間最高200万円
  • これまでの収益3000万円以上
  • メルマガ読者1500名
  • 本業はICT/DXの大企業でDX推進担当
  • 副業でビジネスを実践中
  • 副業時間の平均は5時間超
  • 副業ビジネス大好き人間
>>井村尚弥のプロフィール

注意

もし、まだDoodlyを検討中の方は期間限定のキャンペーン中なので、あなたのアニメーションツールに導入した上でこの続きをご覧ください。

特典付きでDoodlyを最安値で購入する!

 

Reveal Pathの設定

画像の書き順を変更する場合は、画像をEditします。選択画像のえんぴつマークをクリックしてください。

すると画像の編集画面に遷移します。右側のサイドバーの上部には編集中のプレビュー、下半分には編集内容を記録するようになっています。

Fadeで作業効率を上げる方法もある

ここから細かい編集方法を解説していくわけですが、「そんな面倒な作業をしたくないけど、今の状態は変えたい!」という方もいらっしゃると思います😅

そんな方は「Fade」を使ってください。

サイドバーの下部にある”Reveal Mode”を「Fade」にするだけです。するとこんな感じで表示されるようになります。

時間の制約やお好みでFadeも柔軟に使ってみてください。

Reveal Pathの詳細設定の仕方

では本題のReveal Pathの詳細設定を説明していきます。あとで実際に描画設定を行なっている動画をお見せしますので、まずは手順だけご確認ください。

step
1
まず最初に先ほど説明した画像のEditボタンを押して画像の編集画面にいきます。

step
2
そして、右側サイドバーの下段にあるReveal Pathの「+New path」をクリックして、「Path2」を出現させます。

step
3
描画線の太さが非常に細いので15〜30くらいの値に変更しておきます。

step
4
あとは自分で筆でなぞる感じでスタート地点から順番にクリックして、「ドット(点)」を置いていきます。

クリックすると、描画している範囲が赤くなります。次々にドットをポチポチしていきます。

男性の髪の毛の輪郭だけなぞった段階でこうなります。

右側のプレビュー画面で実際のDrawing状態を見ることができます。

Path Sizeで描画する線の太さとドット位置を調整しながら効率よく塗りを行う

輪郭はある程度細めの線で描くこともできますが、

step
5
塗りを行う際はなるべく太い線でドットを置くようにすると効率よくDrawingができます。

しかし、線の太さを変えて塗りをしようとすると、ほぼ間違いなく無駄な余白ができます。

このときに何度も何度も往復するのは効率悪いので「ドットの位置を調整」して無駄なく塗りを行うことができます。

調整して左側の無駄な余白を消します。

Zoomで詳細描画を調整する

私は大雑把なのであまり細かいことはしないのですが、もしあなたが細かい調整をしたい場合は、Zoomで画像を大きくして細部にわたってDrawing設定を行うこともできます。

必要な方はぜひやってみてください。

あとはひたすら塗り絵をしていくだけ

順番としては、

  • 輪郭を確定させる
  • 中身を塗る

という順番でひたすら作業していくだけです。

今回は実際に作業する様子を画面録画しましたので特別に公開させていただきます。

Save&Returnで確定する

step
6
最後に必ず「Save&Return」を押して作業を保存するようにしてください。

間違っても隣の「Return without saving」を押さないようにしてくださいね。。。😅

実際に作った動画はこんな感じになります

この違いをご覧になり、自分のアニメーション動画を作る際や、代行でアニメーション動画を作成する際など高品質なアニメーションを納品する場合には特にこのReveal Pathを使ってみてください。

Reveal Pathを設定しない場合

Reveal Pathを設定した場合

まとめ

最後までご覧いただきましてありがとうございました。

この記事ではDoodlyで高品質なアニメーション動画を制作する上で必要になる外部からインポートした画像に対してのReveal Path(絵の書き順や塗り)について解説させていただきました。内容としては、

メモ

  • Reveal Pathの設定画面
  • Reveal PathをやらずにFadeで済ます方法
  • 実際にDoodly内で事例を元にReveal Path設定を説明
  • 輪郭を描く際は細めのPathですること
  • 塗りをする際は太めのPathにすること
  • 実際の描画している画面収録動画を公開してやり方を参考にできる
  • Reveal Pathを設定する場合としない場合の明確な違い

を説明させていただきました。

かなり細かい部類の話となりますが、Doodlyで他のアニメーターとの違いを鮮明にするためにこのような設定は今後必須となる可能性がありますので、この機会にReveal Pathを習得してあなた自身やお客様へ高品質なアニメーション動画を制作していってください。

何かまた質問があればお気軽にコメント欄や問い合わせからお知らせください。

まだDoodlyを手にしていない方はこちらから最安値で手に入れてください

最後にまだDoodlyを手に取っていない方向けのご案内です。

現在Doodlyでは年間240ドルかかるライセンス費用を1回67ドル支払うだけで生涯使うことができるライフタイムアクセス権を提供しています。どのタイミングでキャンペーンが終了になるかわかりませんので今のうちに手に取っておいてください。

特典付きDoodlyのご案内

  • Doodly実践者による日本語Doodly完全マニュアル(3月下旬納品予定)

特典付きでDoodlyを最安値で購入する!

ご購入後問い合わせページからメールアドレスと注文番号をお知らせください。折り返し特典をお渡しさせていただきます。

なお、Doodlyに満足いかなければ30日以内であれば返金してくれます。私も別の商品を返金依頼してすぐに手続きしてもらいました。詳しい情報が知りたい方は以下の記事も参照してみてください。

こちらもCHECK

Doodly(ホワイトボードアニメーションツール)を格安で購入する方法!

続きを見る

ではでは!

期間限定で無料ダウンロードできます

老後2000万円の貯金、コロナによる不景気、年金問題など先行き不安なことが多くありますが、あなたは何か対策は打たれていますか?

もし、「副業やインターネットで稼ごう」と考えているなら、ネットサーフィンして怪しい商材に引っ掛かる前にあなたの「強み」を「利益」に変える方法を解説したレポートを無料でダウンロードしてください。

無駄なお金を失うことなしに「自分でお金を稼ぐ」自信が付きます。

  • この記事を書いた人
  • 最新記事

井村尚弥

ネットを使って稼ぐのが大好きな副業フリーランサーです。現在はブログ、コンテンツビジネス、アフィリエイト、メルマガなどマーケッターとして活動しています。 個人が自分の経験、特技を活かしてネットで稼ぐ方法をシンプルにして実行しやすく教えています。 コンテンツビジネスの始め方>>

-ホワイトボードアニメーション

© 2021 ユープレナー式起業術ブログ