アナログ絵はLive2Dで動かせるのか？【前編】
「自分が描いたキャラクターが動き出したら・・・」
なんて妄想を具現化してくれるツール「Live2D®」。
このLive2D、デジタルのキャラクターイラストを動かしていくことになるわけですが、その原理は細かく分けられたパーツごとにモーションを設定をしていくことでキャラクターが動き出すというものです。
そこで、この技術を応用すればアナログで描いたイラストも動かせるのでは？と閃きました。
物は試しということで、やってみましょう！
アナログ絵をLive2D用に加工する
初めに断っておきますが、このアナログ絵をLive2Dで動かすという作業はわりと手間がかかります。
デジタルで絵が描ける人はデジタルでパーツごとにレイヤーを分けながらキャラクターを描いて、そのままLive2Dに持っていく方が断然楽だと思います。
アナログで描いたものを最終的にはデジタルデータに変換していくわけですので、デジタルで描ける人からすれば2度手間になるわけですね。。。
ですがアナログ絵ならではの良さというものもあると思いますし、アナログで描くのが好きな人でもLive2Dの面白さに触れるきっかけになるかも・・・ということでやってみる価値はあるはず！
それでは作業に移ります！今回動かしてみるのはこのアナログ絵↓
画材: ボールペン、色鉛筆
色鉛筆による髪の毛の表現なんかが特にアナログっぽさが出てると思います。
この絵をスキャンしてPCに取り込んでいきましょう。
アナログ絵からパーツを切り抜くための下準備
スキャンして取り込んだら早速Photoshopで開いてLive2D用のデータに加工していきます。
まずはレベル補正で紙の余白をデータ上で完全な白に変えます。このとき色鉛筆のグラデーションが消えないよう注意します。
また、後から処理がしやすいように黒も濃い目に。
次に余白の部分を透過させたいのですが、そのまま白い部分を色域指定してしまうと、顔の中まで透過してしまいます。
こんな感じで顔まで透けてしまいます。
なので顔や髪の毛など、白要素が入っていても透過させたくないものは先に選択範囲外にしてしまいましょう。
髪の毛部分と余白部分を分けて選択した状態で、
髪の毛の細かな部分だけを色域指定で選択！
これでキャラクターの塗りがある部分だけ切り抜くことができました！
色鉛筆による髪の毛の独特な表現を残したかったので、毛先の部分は細かく切り抜いています。
パーツごとにレイヤー分けする
ここまででパーツ分けの下準備が完了といったところです。続いてイラストをパーツごとに切り抜いていきます。
まずはこの絵をLive2Dでどう動かしたいかを想定し、どの部分をパーツとして切り抜く必要があるか考えます。
赤い丸の部分を動かしたい
長い髪の毛がなびいて、ピアスも動いて、瞬きさせて、、、と部分ごとに動かし方を考えてみました。
さっそく切り抜いていきます。
髪の毛の束を一つ一つのパーツとして切り抜いていきます。
ボールペンの黒い線を基準に、クイック選択ツールなどを使ってカットしていきました。
目や髪の毛など、動かしたい部分を一つ一つ切り抜きます。
白い部分が残ってたりしますが、ここは後で細かく調整します。
こうしたアナログ絵や一枚絵からイラストを切り抜くときに気を付けないといけないのが、パーツを切り抜いたその後ろ側です。
そのまま絵を切り抜いていくと、後でモーションを付けたときに切り抜いたパーツの後ろに何もない空間ができてしまいます。地肌や奥まった部分が見えてもいいようにしないといけません。
今回はコピースタンプツール等を活用して、髪の毛や目に隠れていた肌の部分を描き足しました。
髪の毛なんかも、ゆらゆらと揺れたとき隙間ができないように幅を増やしています。
切り抜いたパーツをレイヤーに分けて、加工完了です。
画像は切り抜く前と変化なしに見えますが、顔の後ろの髪の毛などを描き足してあり、パーツがすべて分かれている状態です。
完成したデータをLive2Dへ
パーツ分けしたデータをPSD形式で保存し、Live2Dで読み込みます。
ここからモーションを付ける作業に入ります。
が、長くなってしまったので今回はここまで！
アナログ絵からのモーション作成は、ここにたどり着くまでの工程が長くなってしまいますね・・・
ですがここから先はデジタルイラストを動かすのとそこまで変わらない作業になると思われます。
次回、Live2Dで実際にモーションを設定していきます。
後編へ続く！
(トップの画像、実は少し動いているのですがそのやり方も後編で・・・)
文 : PicoN!編集部 黒田
