パペットをゼロから作成する（Photoshop）

#映像演習・実習Ⅰ-2023

#character_animator

https://www.youtube.com/watch?v=wKK3Asxs6d4

1. はじめに

上のYouTube映像を参考にして、Photoshopのブラシツールよる手描きキャラクターの作成方法を解説する。

https://gyazo.com/bcbb04c3e72c1983ca254afeea366529

特に、14個の口形素を全て作成することは初心者には負担が大きいので、Neutral、Smile、Suprised以外は、口を開いた状態のみとする。

https://gyazo.com/f5e0a71a18b7d2324e73c61cdff87bfe

Mouth Templateから口をコピーして利用する方法も後半で紹介する。

https://gyazo.com/ca5b2c8ffe2c71a16b5fd257cfcbaf3c

hr.icon

2. Blank Templateの準備

① Blank Templateのダウンロード

https://www.okaysamurai.com/puppets/

上記URLサイト一番下のBlank Template（下図）からダウンロードする。

https://gyazo.com/bd3b3343c0001ab78b40ce37f6296191

TemplateBlank.zipを解凍する。

今回利用するのは、TemplateBlank.psdのみ。

https://gyazo.com/e46eab1cbd73639186415216ff7a6327

② PSDファイルの名称変更

TemplateBlank.psdを適当な場所へコピーして、名称変更（キャラクター名）する。

下図では、Akira.psd（任意）としている。

https://gyazo.com/819bb2f100f8ab9a7ff2e43086e4a593

hr.icon

3. プロジェクトの準備

① 新規プロジェクトの作成

「ファイルメニュー > 新規プロジェクト」をクリックして、任意の場所（ここではDesktop/Character Animator Projects）にプロジェクトを保存する。

https://gyazo.com/fff90e499c1bc48e4525d6d6ebe4d46f

この時、プロジェクト名称も変更する。下図ではAkira（任意）。

https://gyazo.com/64ea29a3c19531014be703911e1f1726

空のプロジェクトが作成される。

https://gyazo.com/e0ee81bdc51de57289b01f0c6ede4f24

② テンプレートPSDの移動

テンプレートPSD（下図ではAkira.psd）をプロジェクトフォルダ内（下図ではDesktop/Character Animator Projects/Akiraフォルダ）に移動する。

https://gyazo.com/b7de714182df421413d1009b7b393932

③ テンプレートPSDの読み込み

「ファイルメニュー > 読み込み」もしくは、プロジェクトパネルの空いたスペースをダブルクリック。

https://gyazo.com/cfee37b84ba84b7ce7f0b56394f51587

Akira.psdを選択して、右下の「読み込み」ボタンを押す。

https://gyazo.com/65a2ddb2e3cefc5cede5ff8175dea8c3

プロジェクト内にパペットとして読み込まれる。

https://gyazo.com/453b207bfcc8edf4b674b3ed16526251

④ シーンの作成

パペットを選択した状態で、プロジェクトパネル左下の「新しいシーンに追加」アイコン（下図）をクリックする。

https://gyazo.com/5fb4c9ac67696619f322bbe90674b48a

プロジェクトパネルにパペットを含んだシーンが作成される。

同時にシーンパネルに白背景（空の状態）とタイムラインが生成される。

https://gyazo.com/3fd2620b79451e9f35b5a4d58ff3f167

hr.icon

4. オリジナルPSDの編集

プロジェクトパネルのパペットを選択した状態で、左下の「オリジナルを編集」アイコンをクリックする。

https://gyazo.com/f1fcc4334cd5548f06e74d065fe43045

Photoshopが起動して、レイヤー構成されたPSDデータ（元はTemplateBlank.psd）が表示される。

https://gyazo.com/6b969dbc9b81554831371cbd844ac424

hr.icon

5. face backgroundの描画

※今回のイラストレーションでは全てブラシや鉛筆ツールを利用して描画する。シェイプツールで描くこともできるが、その場合はシェイプ＝レイヤーになるのでレイヤー名称と不要なレイヤーの削除等の操作が必要になる。

face backgroundレイヤーを選択した状態で、ブラシや鉛筆ツールを利用して顔のベース部分を描く。

https://gyazo.com/c790bd73fdd222ded1d3c4d5c197c134

「ファイルメニュー > 保存」（Cmd + S）を行い、Character Animatorに戻る。

パペットデータが自動更新されて、Photoshopで描画した顔ベースがカメラライブ入力で追従することを確認する。

https://gyazo.com/de58431ce0c8c41ce3ed9500d0418f58

hr.icon

6. 眉毛（Eyebrow）の描画

+Right Eyebrowレイヤー、+Left Eyebrowレイヤーをそれぞれ描く。

RightとLeftはキャラクター正面からの方向であり、反対になっていることに注意する。

https://gyazo.com/5d0850ce9a42845572180767e16b78df

必要に応じて、Photoshopデータを保存して、Character Animatorで眉毛の状態と動きを確認する。

https://gyazo.com/2a1c97526e93969b8ec0159f59e08c08

hr.icon

7. 目の描画

① 目を構成する3要素

PhotoshopデータのRight EyeとLeft Eyeのグループを開く。

https://gyazo.com/fd6e274e5f0960673dff9c8f31494565

目には以下の３つ要素が含まれる。

Blink：閉じた状態

Pupil：瞳

Eyball：眼球

② Blinkの描画

Right Blink、Left Blinkをそれぞれ描く。

https://gyazo.com/311e64fcb1f8d76fcb227de4f7118d67

③ Eyeballの描画

Right Eyeball、Left Eyeballをそれぞれ描く。

https://gyazo.com/3cdb3c9147714f14ce97c51a057dbc0e

この時、Right BlinkとLight Blinkが邪魔な場合は必要に応じてレイヤーを非表示にする。

④ Pupilの描画

Right Pupil、Left Pupilをそれぞれ描く。

Charactere AnimatorではEyeballの範囲内で自動的にPupilを動かすため、PupilはEyeballの内側で真ん中に描く。

※PupilがEyeballよりも大きい場合はマスク処理等の設定が必要（ここでは扱わない）

https://gyazo.com/9b8521db0a69fe80ed3ebfd92f6ab7f4

Photoshopデータを保存して、Character Animatorに切り替えて目の動き（瞬き、瞳の移動）を確認する。

https://gyazo.com/b59354da41b15bd84e8adcdabe848abd

hr.icon

8. 口の描画

① 4つの口形素の描画

Neutral、Smile、Suprised、Ahのレイヤーにそれぞれ描画する。

https://gyazo.com/4ca3ce04fe10579a13d880da88281cd0

https://gyazo.com/ab55274a2f74aeaa0222bda9d1228c46

② 複数の口形素タグの設定

Character Animatorでは14個の口形素に対応しており、ここで作成した4つだけでは他の要素が空のため非表示となる。PhotoshopのAhのレイヤーの画像を他の要素に複製することも可能だが、Ahレイヤーに対してCharacter Animator上で口形素のタグを複数設定することで実現できる。

Photoshop上でD Ee F L M Oh R S Uh W-Ooのレイヤーを削除する。

Mouthグループ内にはNeutral、Smile、Suprised、Ahの４つのみとする。

https://gyazo.com/7d8e72e05a80ba44588ea3ac343e5ae8

Photoshopデータを保存した上で、Character Animatorのリグモードに切り替える。

左のレイヤーからAhレイヤーを選択した状態で、右のタグからM S D Ee Aa Uh Oh R W-Oo F Lをクリックして複数タグ付けする。

https://gyazo.com/c93e1fe5a4d734ebe464d576b3ff749f

録画モードに切り替えて、口の動きを確認する。

動かない時は、マイク入力がONになっていることを確認する。

https://gyazo.com/b829566a4be72e2fa304c957fa853f8b

参考（ダメな方法）

下記URLのようにレイヤー名称にスペース区切りやカンマ区切りを設定することで実現する方法がネット上に見られるが、機能しなかった。

口グループ（Mouth）の使い方・解説【Adobe Character Animator】｜Adobe Character Animatorの教科書

hr.icon

9-a. Mouth Templateの利用（授業で行う方法）

① 準備

Akira（任意名称）.psdを開いている状態から進める。

顔の色を明るめ（色相・彩度等を利用）に変更しておく。

https://gyazo.com/27eebc86ed656e715f0239a4f7256aaf

② ChadパペットのMouthデータの複製

ホームからチャッド（Photoshop）を読み込み、プロジェクトパネルからチャッドの元データを開く。

https://gyazo.com/0f6e7f4c85ebebc5c9ee1b89e131608e

Chad.psdからレイヤー複製した場合は、選択しているレイヤーの上に複製されるので、複製前にAkira（任意名称）.psd上でMouthグループを選択しておく。（無理に必要ないが、後工程でわかりやすくなる）

https://gyazo.com/96cc48fa650fba93f377e4f3916af85a

ChadのPhotoshopデータの+Mouthレイヤーを右クリックして複製する。

https://gyazo.com/cf543fe31cdfb3637b92eb652c2ccb6a

複製の保存先ドキュメントをAkira（任意名称）.psdに変更して、OKボタンを押す。

https://gyazo.com/dc1161727c782b686329745fa9534118

ここからは授業資料の作成が間に合っていないので、口頭で説明する

https://gyazo.com/0c34e4a9bfc414851af49b79dc367fd0

hr.icon

9-b. Mouth Templateの利用

紹介のみ、古いバージョンのためうまくいかない

自分で口を描く以外にも、他のパペットデータからMouthデータのみ利用する方法がある。

ここでは、Okay Samurai Puppetsサイトで公開されているMouth Templateを利用する。

① Mouth Templateのダウンロード

https://www.okaysamurai.com/puppets/

上記URLサイト一番下のMouth Template（下図）からダウンロードする。

https://gyazo.com/5361f2e52ebafc2c3c791ec26f1ed77b

ダンロードしたTemplateMouth.zipを解凍する。

今回は、CHMouthPackフォルダの中のMouth2.psdを利用する。

https://gyazo.com/3bf4996ae039ba889e4ea89e8841c098

② +Mouthグループの複製

Mouth2.psdをダブルクリックして、Photoshopで開く。

このとき、パペットのPSDデータ（下図ではAkira.psd）は開いたままにする。

https://gyazo.com/52b6456b184fbbb057d69eb64ad8cf12

Mouth2.psdには下図のようなグループが含まれる。

ここでは「+Mouth」グループのみを利用する。

https://gyazo.com/e20e18b8d895f8d8489f94fbdda39782

「+Mouth」グループを右クリックして、メニューから「グループを複製」をクリックする。

https://gyazo.com/5ceeb3a37201af9ce79066d4fa54559e

下図の保存先をパペットのPSDデータ（下図ではAkira.psd）に変更して、OKをクリックする。

https://gyazo.com/a8540a83ae5c5411d31ad776c612ce24

Akira.psdにMouth2.psdの+Mouthグループが複製される。

元のMouthグループは削除しておく。

https://gyazo.com/1a836ab3fdb3a506524426cb90d80cab

手描きで描いた口も保存しておきたいので「ファイルメニュー > 別名で保存」からAkira2.psdのように名前を変更して保存する。

https://gyazo.com/eaa09f129166269cd38c2d964369d873

③ 口の移動

レイヤーパネルで「+Mouth」グループを選択する。

移動ツールのオプションから自動選択のチェックを外す。

口の画像上でドラッグしてグループごと移動する。

https://gyazo.com/e75c035f6433bf664f83b907fd0c4fcc

参考

移動ツールはオプションの設定により挙動が変わるので注意

【PhotoShop】知らなかった！移動ツールを使用する場合の注意

④ 口の縮小

レイヤーパネルの「+Mouth」グループを選択された状態で、「編集メニュー > 自由変形」（Cmd + T）で自由変形モードにする。

下図のようにバンディングボックスが表示されるので、角の四角ハンドルをドラッグしてスケールする。縦横比を変えて変更したい場合はSHIFTキーを押しながらドラッグする。

https://gyazo.com/b9582533e3f561253a165b338c07ad11

変形を確定する場合はオプションの丸（下図上部）をクリックする。

画面が小さい場合はバツと丸が表示されていないが、ENTERキーを押すことで確定できる。

その後、Photoshopデータを保存する。

https://gyazo.com/ef89dd6dd5991413f88eb8056b4bd445

Character AnimatorでAkira2.psd（任意）を読み込み、新たなパペットでシーンを作成して動きを確認する。

https://gyazo.com/72ec0a201716437f33973d31360f2486

hr.icon

10. 毛の描画とダングルの設定

① +hairレイヤーの作成

これまでの作成したどちらのPSDデータでもよいのでPhotoshopで開き、face backgroundレイヤーの上に+hairレイヤーを作成する。

https://gyazo.com/2aba267c0dedc3f74e63e87301ed7698

② 毛を描く

毛の動きにも影響するので、少しだけ頭に重ねて描く。

下図ではわかりやすくするためにface backgroundレイヤーの透過率を一時的に80%にしているが、保存する前に100%に戻しておく。

https://gyazo.com/557b430bb3cbff2ed9fea7896a08265c

複数必要な場合は、+hair2、+hair3のようにレイヤーを追加して描く。

Photoshopデータを保存して、Character Animatorのリグモードに切り替える。

https://gyazo.com/f42a4431cd6cc7deed85bdba560fb3bd

hairレイヤーを選択した状態で、下図のハンドルをドラッグして頭に接続する。

ドラッグ中に接続位置にくると頭が緑色に表示される。

このハンドルがダングル（物理シミュレーション）の根元になる。

https://gyazo.com/4000b95ee5d0249622f6f76d61eff3e2

ダングルツールを利用して、毛の先にダングルハンドルを追加する。

https://gyazo.com/97863d865807eb44159b7d026f7e70d4

録画モードに切り替えて、顔を揺らすと毛が揺れることを確認する。

https://gyazo.com/6c4cedbd39ac8a0b92e1cc14b2ef87b0

hr.icon

参考作品（インタラクティブアートより）

Interactive Puppet Prototype with hacked Kinect, 2010.

MFAH: Shadow Monsters

What is Digital Art?

hr.icon