ニコニコ動画における手書きMADの作り方

Hi! ハローハロー!!
Peerthで”いちばんめだつひと”たーくんです!

ニコニコ動画には手書き MAD というおもしろいジャンルがあります。

どのようなものかというとアニメをPCの簡単なペイントソフトで描き起こし再現するというものです。
良作となると、ペイント独特の雑なタッチにもかかわらず激しい動きのあるアニメーションという組み合わせが見ていて気持ち良さを感じる作品が出来上がったりします。

描いてみた』『手の込んだ手抜き』『完全に一致』などのタグがつけられていて、視聴者からの評価も中々高かったりして、最近のボクのお気に入り動画の一つなんすよ。

 

さて、アニメの気持ち良さについてはいつかまとめようと思っているので、それまでは以下のリンクを見て下さい。詳しく分析されています。

アニメの視覚的気持ち良さについてはこちらをどうぞ↓
アニメの快楽 -自立するオープニングアニメーションに見る「映像的快感」の正体-

手描きMADとか作りたくなるんですけれども、残念ながらボクにはそのような技術を持ち合わせていないので、小手先のテクニックでなんとかならないものかと考えるのです。

んで、作ったのが先週投稿した動画の稲妻アニメーションだったりする訳です。

[nicodo]sm20684817[/nicodo]

 

さて、ここからが本番ですよと。

ニコニコ動画における手書き MAD (アニメーション)の作り方

さて、今日は簡単なトレースアニメーションの作り方を紹介しますよ、と。
稲妻効果を作る時の技術は完全にトレース(なぞり描き)なので、時間をかければそれっぽいものが作れるはずです。
なんちゃって『手描き MAD 』も作れちゃうかもしれないすね。といってもボクにはあんな枚数描く根気は毛頭ございませんので、前回作った『とある稲妻の効果素材S』を例に作り方を紹介しますよと。

 

使用する(した)ソフト

あったらいいな機材

ぶっちゃけ映像ソフトなんてもんは書き出しもしくは共有でイメージシーケンスを作れればなんでもいいです。
ただ、画像編集ソフトはペイントだとキツいかもしれません。出来ればレイヤー機能のあるPhotoshopが理想的、フリーだとGINPでもいいかもね。

 

基本的な流れ

  1. 必要な映像を切りとる
  2. 元ネタ動画を連番の画像ファイルにする
  3. 1枚ずつトレースし色を塗る
  4. 元ネタ動画と同じになるように画像を並べる

 

 

1)ムービーを切り出そう!

まず元ネタとなる映像から必要な部分を切り出します。もちろんなるべく高画質のものが良いですね。 ネット上から落としたものは、コーデックが色々とあるので作業のために変換が必要なんだけど、MacのFinal Cut Pro Xだと勝手にやってくれてるみたいで最適な状態で編集できます。ちょーべんり。

ここでは『とあるアニメのオープニング』を使いますよ。

2013-05-03 23.36.16

 

2)イメージシーケンスに書き出そう!

元ネタ動画から、連番の画像ファイルを抽出します。
画面上部メニューバーの[ファイル]→[共有]→[イメージシーケンス] (※イメージシーケンスが無ければ、[共有]→[出力先を追加]でイメージシーケンスを追加できますよと)
で保存先を指定すれば、映像を連番で書き出してくれます。

映像は基本的に1秒間に30枚の画像で出来ています。このイメージシーケンスで書き出しというのは、映像を全て静止画にして、尚かつ便利なのが連番のファイル名にしてくれるのです。

今回の作業は稲妻部分を描くので編集で稲妻部分だけを切り出してから、イメージシーケンスで書き出しします。ここまではそんなに大変じゃないよ。

2013-05-03 23.46.23

 

3)画像をトレースしよう!

書き出した画像を1枚ずつ見ていくと、同じ画像が連続するのがあるはずです。全て1枚ずつチェックして被ってるのは削除します。そして必要なものを選別します。

稲妻部分だけをイメージシーケンスにしても全部で150枚近くあります。おなじ画像なのに何度もトレースするのは無駄なので選別するわけですけど、それでも63枚の静止画になる訳ですね。

ここからが面倒な作業になります。
これを1枚1枚トレースするのです。

先程書き出した画像を Photoshop で起動します 2013-05-04 0.19.13

 

稲妻部分を分かりやすくする為にトーンカーブで調整するもよろし。
2013-05-04 0.19.46

 

多角形ツール、もしくは投げ縄ツールでテキトーに選択します。2013-05-04 0.22.55使いやすいツールで選択するのが一番だけど、自動選択ツール系でやるよりかは1枚1枚手で描いた方が綺麗になると思います。

 

選択できたら白で塗りつぶし。2013-05-04 0.22.16

 

これまたテキトーにレイヤースタイルでそれっぽく効果を加える。2013-05-04 0.23.58

 

んで、できたのがこれ2013-05-04 0.24.18

分かりやすく背景を黒にしてみた。2013-05-04 0.24.20最後にファイルを背景が透明になるようにTIFFかもしくはpngで別名保存しましょう。

 

この作業を63枚全てにする訳ですが、とてもじゃ一人では時間的に出来ないので、今回は手伝ってもらいましたが、まぁ大変な訳っすよ。

 

4)映像編集ソフトに画像を並べよう!

並べる2013-05-04 0.34.32あとはムービーに書き出して出来上がり

詳しい作り方はこちらに載っているので御参考に↓
手描きMADwiki⇒http://www40.atwiki.jp/tegakimad/

 

こちらが完成版になります。

[nicodo]sm20708732[/nicodo]

 

そしてこの素材を使ったものがこちらの映像です。

とある科学の超電磁砲SのOP曲sister’s noiseで涼宮ハルヒの消失のOPつくったー

[nicodo]sm20684817[/nicodo]

YouTube版もあるよ⇒http://www.youtube.com/watch?v=PCIEH7kNh20

 

ね。簡単でしょ?

お わ り

“ニコニコ動画における手書きMADの作り方” への8件のフィードバック

  1. mimiのアバター

    初めまして、mimiと申します

    素敵な動画にとても楽しそうな記事でしたので
    こちらのページを参考に私も手描きMADを
    作ってみたのですが、
    (4)の映像編集ソフトにに画像を並べよう!
    でつまづいてしまいました…

    たーくん様(すいません何て御呼びすれば良いか;w)
    の解説はとても分かりやすくて参考になるので
    もしよろしければFinal Cut Pro Xでの
    制止画読み込みから書き出しまでの手順も
    伺いたいです…!

    リンク先のwikiも拝見しましたが初心者の私には解決できず…
    突然のリクエストで驚かれてらっしゃるかもしれませんが、もしお時間ありましたらブログの記事の片隅でも結構ですのでお返事いただけるととても嬉しいです
    勿論ご迷惑でしたらスルーして下さいね!^^;

    それでは、失礼致します

    1. 田島 貴将のアバター

      mimi様
      コメントありがとうございます。
      “(4)の映像編集ソフトにに画像を並べよう!でつまづいてしまいました”
      とのことですが、すみません。かなり説明が省かれていましたね。申し訳ないです。
      そのうち、加筆するか、新たに記事を書くかもしれませんが、いつになるかわかりませんので、取り急ぎこちらに書かせて頂きますね。

      (4)の詳細
      ・一枚一枚描かれているということなので、何十枚、もしくは、何百枚ものpng(もしくはTIFF)画像になっているかと思います。
      ・この画像を、そのまま、Final Cut Pro Xのタイムライン(画面下側の画像が並んでいる所)にドラッグドロップすればひとまず画像は並べられます。
      ただし、画像のファイル名は必ず連番(連続した番号)にすること!
      ・画像をドラッグドロップしてタイムラインに入れると、画像が順番に5秒ぐらいずつ均等に並んでいるかと思います。
      ・あとは画像を必要な長さにするといいでしょう。
      たぶん、このやり方で手描きMADをやられているとなると、1枚1フレームぐらいになるのかな?結構大変な数だと思いますが、並べて長さを調整するだけで、アニメーションになるので感動は大きいかと思います。頑張ってください^^

      そのうち詳しい記事も書きますね^^

  2. mimiのアバター

    お返事ありがとうございます…!
    こんなに早く返答頂けると思ってなかったので
    少しお返事遅れましたが
    と…とても嬉しいです…(泣)

    opパロディーなので2500枚ほど描いたんですが
    全て選択してタイムラインにドラッグしただけじゃダメなんですね…
    並べる…む、難しそうですが
    とりあえず今教えて頂いた通りに頑張ってやってみます!

    本当に困っていたので、本当に嬉しいです…( i _ i )
    きっと私みたくMac初心者の子はとても助かると思います

    面倒おかけして何だか申し訳ない気もしますが、
    詳しい記事も楽しみにしてますね
    あ、でも、無理はなさらないで下さいね!;

    お返事、本当にありがとうございました^^*

    1. 田島 貴将のアバター

      基本並べて、1枚の絵を1フレームの長さに短くすればokです。
      キーボードの[B]キーを押してブレードで切るか、もしくは画像の端をドラッグで短くするだけの簡単作業です。
      そんなに難しくはないですよ。

      1. mimiのアバター

        できました…!
        かなり初歩的な事で悩んでいたんですね私は…;

        何とか形に出来そうですが、
        再生すると映像が劣化して何故か小刻みに上下にカクカク動きます…

        タイムライン上で手動スクロールした際には劣化も変動もしないのですが、田島さんの稲妻のように奇麗に動いてもらうには何か作業が足りないのでしょうか?

        連番png、サイズはイメージシーケンスした際と同じ640×480で統一しています

        自分ではどうにもお手上げで;
        お力お借り出来ましたら幸いです
        (> <;)

        1. mimiのアバター

          何度もすみません;
          原因が分かりましたのでこちらの返答は不用です

          一方的なコメントばかりにも関わらず親切にして頂いて本当にありがとうございました!

          田島さんのこの記事がなかったら作り始める事もなかったので本当に感謝しています。当たり前の事ですが、後は自力で頑張りますね^^

          それでは、失礼致します

          1. 田島 貴将のアバター

            返信が遅れまして申し訳ございません。
            キャンプに出かけておりましたので、コメントを確認する事ができませんでした。

            御自分で解決できて良かったです。

            今後も映像を作ってください。応援しています。

            もし宜しければ完成した動画も教えて頂けませんか?どうぞ宜しくお願い致します。

  3. mimiのアバター

    お久しぶりです。
    御陰さまで何とか完成しました!
    ネタしかない動画で内容的にお知らせしようか
    かなり迷ったのですが;w
    コレもご縁!と割り切ってお知らせします。
    キャンプにも勝る野生動画なので…ご注意下さい
    http://www.nicovideo.jp/watch/sm22859226

    動画って楽しいですね!
    田島さんのブログに会えて本当良かったです^^
    (呼称、たー君可愛いらしくて私好きですよw)

    それでは、恥ずかしい動画を告発しましたので
    早々に失礼致します…

mimi へ返信するコメントをキャンセル

TarCoon☆CarToon(タークゥーン カートゥーン)-official web site-をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む