関節を動かすことを前提にした、動画用のキャラクター素材の作り方【Photoshop編】

以前このブログでNive2の初心者講座を書きましたが、その第８回目の記事でキャラクターの関節を動かす方法を解説させていただきました。
そして先日、こういった素材を作る方法についてご質問を受けたため、今回は素材を作る手順を、PhotoShopとGIMPを使う場合でそれぞれに解説させていただこうと思います。
今回は、PhotoShopを使います。（GIMPは次回）

【対象】
PhotoShopの基本操作ができる（普通に絵を描いて、保存ができる程度）人

まずはこちらをご覧ください。↓

女の子が手を振っているだけの簡単なアニメーションです。
今回はこちらをサンプルにして解説いたします。

【素材作成のポイント】

• イラストの可動部分を決めて、レイヤーを分けて描く
• 各レイヤーごとに透過PNGで素材を描きだす

このアニメーションは、左図のように可動部分を3つのパーツにわけて、背景が透明な3つの画像を組み合わせて動かしています。

TVアニメのように何枚も絵を描いてキャラクターを動かして見せるのはとても大変なことです。ですがこのように、絵の一部を動かしてあげるだけでも、ただの静止画と比べだいぶ「動いている」印象を出すことができます。

※ただし、このアニメーションの方法は大きな動きには向きません。 動作が大きければ大きいほど、不自然さが目立つようになります。

素材作成の手順【PhotoShop】

それではさっそく素材を作っていきましょう。
※PhotoShopのバージョンによっては手順が異なることがあります（執筆者はCS6使用）

1　新規ファイル作成

PhotoShopを起動し、[ファイル]メニューから[新規]を選択します。

左図のようなダイアログボックスが開きます。
ファイル名：自分がわかりやすい名前を付けてください
幅、高さ：イラストは実際に動画内で使う大きさよりも大きめに作る方が良いと思います。（多くの場合、画像は縮小表示した方が綺麗に見え、拡大すると粗くなるためです）


設定ができたらOKを押します。

2　新規レイヤー作成、下書きを描く

レイヤーパネルの右下にある、新規レイヤーのアイコンをクリックして、レイヤーを作ります。

背景レイヤーの上に、透明の新規レイヤーが作成されました。
ここに下書きを描いていきます。

ちなみに、「レイヤー１」と書いてあるテキストの部分をダブルクリックすると、レイヤー名を変更できます。

左図は下書きを書き終えたところです。（画像クリックで拡大します）

3　可動部分を別レイヤーに分けて清書する

下書きを参考にしながら、新しいレイヤーに清書します。

このとき、可動部分の腕と手は別レイヤーで描きます。

左図は、清書を終えた状態です。（画像クリックで拡大します）

レイヤーはそれぞれ、「body」「arm」「hand」 と名前をつけました。
前後関係を考えて、手前になるレイヤーが上になるように清書してください。

また、レイヤーの上下関係はレイヤーパネルから直接ドラッグで変更できます。（[レイヤー]メニュ→「重ね順」でも変更できます。）

4　レイヤーごとにスライスを作る

PhotoShopでは、画像を描きだす領域を定める範囲を、スライスで定義することができます。

ここでは、レイヤーの内容の大きさに合わせたスライスを作成します。

レイヤーパネルから「body」レイヤーを選択した状態で、[レイヤー]メニューの[レイヤーに基づく新規スライス]を選択します。

左図のように、ドキュメントが細い枠で区切られた部分がスライスです。

同じように、「arm」「hand」レイヤーもスライスを作ります。

茶色に囲まれた部分が、現在選択中のスライスです。

左図は、３つのレイヤーのスライスを作成した状態です。

5　スライスごとに画像を書き出す

まずは「hand」を書き出してみます。
レイヤーパネルの各レイヤーの左にある目のアイコンをクリックして、「hand」以外のレイヤーを非表示にします。

次に、[ファイル]メニューから[Web用に保存]を選びます。

「Web用に保存」ダイアログボックスが開きます。

画面左に表示されているプレビューから「hand」スライスを選択した状態にし、画面右上のプルダウンメニューから「PNG-24」を選択します。さらに、その下の「透明部分」というチェックボックスにチェックを入れておきます。
これで、背景が透過した画像を書き出すことができます。

設定できたら、「保存」ボタンを押します。

「保存」ボタンを押すと、さらに左図のようなダイアログボックスが開きます。

画面下の「スライス：」のプルダウンメニューから「選択したスライス」を選んで、任意の場所に保存してください。

6　重なっているスライスは、重なり順を変えてから書き出す

実はスライスにも、レイヤーのように重なり順があります。

スライスが重なっている場合、書き出したいスライスを一番上にしてから書き出さないと、画像が中途半端に切れたりバラバラになってしまうことがありますので注意してください。

それでは次に「arm」のスライスを書き出したいと思います。まず「arm」以外のレイヤーを非表示にしておきます。
ツールバーから「スライス選択ツール」を選びます。

スライス選択ツールでスライスをクリックすると、選択されているスライスを変更できます。
「arm」のスライスを選択した状態にして、右クリックを押します。

すると、左図のような右クリックメニューが出るので、「最前面へ」をクリックします。

※左図の矢印の位置は間違いです。
申し訳ありません。「最前面へ」をクリックしてください

「arm」のスライスが前面になりました。
あとは、先ほどと同じように透過PNGで書き出ししてください。

「body」のスライスも、書き出す前に同じようにスライスを最前面にしてから透過PNGで書き出します。

書き出したファイルはこのようになりました。

これで素材が完成しましたので、あとは動画作成ソフトで動きをつけてあげれば完成です。

関節の動きのつけ方に関しては、「NiVE2でボカロPVを作る・8　【初心者集中入門講座】 」を参照ください。また、他の動画ソフトでの動きのつけ方に関しては、各自でお調べくださるようお願いいたします。

終わりに

これで今回は終わりです。次回は、PhotoShopを持っていない人のために、フリーソフト「GIMP2」での書き出し方法をご紹介する予定です。
今回は説明をシンプルにするために可動パーツを少なくしましたが、頑張って可動パーツを増やして、いろいろな部分を動かしてみるとまた楽しいかもしれません。
ただし作る労力は増えますが。

上記アニメーションでは、頭部、前髪、左右もみあげ、左右ツインテール、リボン、左右肩、胸、とパーツを区切ってみました。
通常はここまでパーツを区切る必要はないと思いますが、ご参考までに。