AviUtl・Adobeillustrator・AdobePhotoshopでイメージキャラクターを作成する方法③illustratorで作成したパーツを書き出そう!

パーツをひとつひとつ書き出していく

前回の記事では、イメージキャラクターを形にするための準備段階までやってきました!今回はパーツの書き出しについて少し触れていこうと思います!

ここで注意する点は少ないのでサクサクっと行っちゃいましょー!

ちなみにこの段階ではまだ目・眉・口のパーツを書き出す必要はありません。なぜならここで作成するのは【のっぺらぼうの肉体】だからです。
私の場合は目パチ・口パク・眉パーツは別のillustratorデータで作成しました。(大きめのデータで作成したので使い回しができてその点めっちゃ便利でした!)

動かさなくて良い塊と動かすパーツを分けていく

例えば前回の記事で私は「色んなポーズを取らせるとその都度動画を入れ替えなきゃいけなくなるから面倒だし、やーめっぴ!」と言って途中から方向性を変えています。

今思えば「面倒」ってなかなか酷くないですか!?

全身版を作ったタイミングではまだその面倒くささに気付いていなかったので胴体と肘から手までを別々に分けて書き出していたのですが…。↓

今思えばどうせポーズも変えないですし腕も動かすことがないので、胴体と腕を一体化した状態で画像化しておけば良かったなと思っています。(接合部分の位置調整が難しくなるため)

このように動かす必要のない部分で重なり順に問題がなければひとつのパーツにまとめた方が分かりやすいです。
逆に動かしたいパーツの場合は左右対称なら片方だけ、そうでなければ各パーツごとに細かく書き出す必要があります。

ちなみに目・口・眉はまだ書き出ししなくてOKとお伝えしましたが…鼻の影だったりまぶたの部分の影だったりは輪郭の一部として書き出しを行いました。(そこは動かす必要が無かったため。)

例えば匂いを嗅ぐ表現などを行いたい場合は、鼻だけを独立して書き出した方が良いですね。そしてその鼻を上下に動かす…と。

風を受ける方向を考えて書き出す

前回の記事でもご紹介しましたが、風を受ける方向を考えて書き出すようにしましょう。
まずはこちらをご覧ください↓

A
B

AとBの動画では後ろ髪の揺れ方が違うのが分かりますか?
実は使っているパーツの画像が異なります↓

Aの動画では後ろ髪を半分に分けて画像として書き出しを行いました。(上の例で言うと紙1・紙2など。)

書き出すのは別にどちらか1つで良いし、何なら「紙」じゃなくて「髪」なんですけれどね。自分が気にならなければ、なんでもアリなんですよね。

そして左半分は左に向けて揺らし、右半分は先ほど風揺れTを適用したパーツを反転させて反対方向へ向けて揺らすことで、まるで前方から風を受けているかのような動きを再現できています。
一方でBの動画は一方向から風が吹いているかのような動きをしています。

前髪や他の毛は正面から風を受けているのに、後ろの毛だけが片方から風を受けているようでなんだか不自然ですね。

なので、こうなってしまうかも?と思った方、それは嫌だ!と思った方はパーツを半分にクリッピングしてから画像として書き出しましょう

クリッピングのやり方は簡単で、
必要な分だけ図形で囲ってオブジェクトもろとも選択
その後ctrl+7(command (⌘)7でクリッピングできます。

アートボードをパーツぴったりに合わせて書き出す

髪の毛や衣装を揺らすための風揺れTですが、動きが結構独特です。
真ん中にぽつんとパーツがあって、その周りにすごく余白がある状態で風揺れをさせると意図しない動きになってしまうことがあります。

そのためアートボードはパーツのサイズぴったりに合わせて書き出す必要があります。

例えそうでなくても余計な余白はデータを重くする原因なので、少しでも画像を軽量化するために無駄な余白が出ないようにしておきたいところですね。

こちらの例でも余計な余白は含まれていません。

アートボードをパーツぴったりサイズに合わせて書き出す方法

風揺れTは独特な動きをするため、パーツにぴったり沿った画像でないとうまく動かない可能性があります。それゆえパーツぴったりにアートボードのサイズを合わせて書き出さなければなりません
※これらの作業をする前に一旦データの保存をしておきましょう!なぜならアートボードのサイズを何度も変更したことにより「そもそもどこがアートボードだったっけ…?」状態になってしまいがちだからです!(※経験者は語る)

作成したパーツを【ALT(⌥ Option)キーを押しながら】一旦何もない空間まで持っていきます。↓

メニューバーのオブジェクト → アートボード → 選択オブジェクトに合わせる
を選択すると、選択したオブジェクトに合わせてアートボードのサイズと位置が変化します。
この時パーツにぴったり沿うサイズになるので、そのままWeb用に書き出し【Ctrl+Alt+Shift+S(⌘ Command + ⌥ Option + ⇧ Shift + S)】を行えばOKです。

オブジェクトをアートボード外へ運ぶ時は忘れずに【ALT(option)キーを押しながら】行いましょう。これはオブジェクトを複製するショートカットキーです。
すべてのパーツを書き出し終えたら保存せずに終了しましょう。完成したものをガチャガチャと動かしてしまったけれど、一瞬でなかったことに出来ます!(事前に保存してますからね。…してますよね!?)

まとめ

今回は風で揺らすためのパーツを書き出ししていきました。風で動いた時の後ろ側までどれだけ想定して作成できたかは、次回風揺れTを適用した際に判明いたします

ふふふ、楽しみですね~!

タイトルとURLをコピーしました