- AnimeStudio -Tutorial Photoshopで簡易アニメ

Photoshopのレイヤーを使ってパラパラマンガのような簡易なアニメーションを作ってみましょう。
Photoshopを使わない場合は画像フォルダを使うへ進んでください。

素材を準備

素材の画像を用意します.

Photoshop等で落書きをしてください。不透明な背景の上に、動画にするレイヤーを3枚以上です(数字ではつまらないので棒人間かなにかを描いてください)。

ファイルに保存してください。

※画像の大きさに注意してください。Photoshopでデジカメの写真など高解像度の画像を扱った後に大きさを指定しないで新規に作ると巨大な画像が作られます。Photoshopでは巨大な画像は自動的に縮小表示されるのでその大きさに気付かないことがあります。作成する動画の大きさに合わせて数百ピクセル程度の大きさを指定して作成してください。画像が大きすぎるとスクリーンには画像の左上角のなにも描かれていない部分が表示され、表示されていないように見えます。「画像が表示されない」というトラブルで多いのがこの画像が大きすぎるのが原因のケースです。

※紙に描いた絵をスキャナーで取り込むときも解像度の設定に気をつけてください。スキャナーの初期値は300dpiといった高解像度になっているので、そのまま取り込むと巨大な画像になります。Photoshopでは巨大な画像は自動的に縮小表示されるのでその大きさに気付きにくいのです。50〜100dpi程度に下げてスクリーンの大きさに合わせてください。画像が大きすぎるとスクリーンには画像の左上角のなにも描かれていない部分が表示され、表示されていないように見えます。「画像が表示されない」というトラブルで多いのがこの画像が大きすぎるのが原因のケースです。

新規タイムシート

新しい編集画面を作ります。タイムシートと呼びます。
※チュートリアルの画像は基本機能版のものです。

AnimeStudioを起動してください。※画像は基本機能版なので拡張機能部分は表示されていません。

フレームレート(一秒間に何コマ表示するか)を指定します。とりあえず24コマ/秒にしておきます。

ちなみにディスプレイの表示が毎秒60コマ、テレビは毎秒30コマ、映画のフィルムが毎秒24コマです。アニメーションは秒24コマで制作するのが一般的ですが、秒24枚全ての動画を描くわけではありません。テレビアニメでは同じ絵を3コマ使って秒8枚で描くのが普通です。

横幅高さでスクリーンの大きさを指定します。用意した画像データの大きさに合わせてください。

ちなみにテレビで放送される商業作品はだいたい横幅1280ピクセル高さ720ピクセル程の大きさで作られているようです。

※キーボードからの入力には「(半角英数)直接入力」モードを使います。直接入力とは入力した文字を変換・確定するのではなくキーを打った数字がすぐに入力されるモードです。入力した文字の下に波線が表示されたり、入力欄の外に文字が表示される場合は直接入力になっていないので切り替える必要があります。直接入力モードに切り替えるにはキーボードの半角/全角キーを押します。またはAlt+`(バッククオート)で切り替わります。直接入力ではない状態で入力してしまった場合はEscキーで入力を取り消してから切り替えてください。

画像フォルダを指定

用意したPSDファイルを画像の入ったフォルダとして指定します。

フォルダ選択…ボタンを押します。

PSDファイルを選択して、

開くをクリックします。

指定したファイルがリストに追加されます。

上のフォルダリストで選択されているPSDファイルのレイヤーが下のセルリストに表示されます。

行の上側の[ ]で挟まれた数字がセル番号になります。

レイヤーを加える

画像ファイルを指定してレイヤーを作ります。

フォルダリストでPSDファイルをクリックして選択してください。

新規レイヤーボタンを押してください。

リストに追加されます。これを背景のレイヤーにします。

レイヤーの名称は画像フォルダの名前を[]で囲ったものになっています。レイヤーに固有の名前を付けるには、レイヤー名をゆっくり二回クリックします。

もう一度新規レイヤーボタンを押してレイヤーを加えてください。今度は動画のレイヤーにします。

このリストはレイヤーの上下関係を表しています。順番を変えるには、上下にドラッグして入れ替えます。

右側のタイムシートにレイヤーの列ができています。

この縦一列が一枚のレイヤーを表しています。

レイヤーを加えると列が右に増えていきます。右側の列が上側のレイヤーです。

セル番号を入力

タイミングを指定します。

タイムシートは横一行が一つのフレーム(コマ)で、上から下へ進行します。

濃い灰色の行が終端の印です。最初は長さが無いので最初の行が終端になっています。

動画レイヤーの最初の3行をマウスドラッグで選択してください。

キーボードで数字2を入力してください。

※キーボードからの入力には「(半角英数)直接入力」モードを使います。直接入力とは入力した文字を変換・確定するのではなくキーを打った数字がすぐに入力されるモードです。入力した文字の下に波線が表示されたり、入力欄の外に文字が表示される場合は直接入力になっていないので切り替える必要があります。直接入力モードに切り替えるにはキーボードの半角/全角キーを押します。またはAlt+`(バッククオート)で切り替わります。直接入力ではない状態で入力してしまった場合はEscキーで入力を取り消してから切り替えてください。

キーボードのキーを押してください。

次の3行が選択されます。

入力した行までタイムシートが伸びます。

同じように3を入力して、キーを押してください。

同様に動画の枚数まで繰り返して、最後はキーの代わりにEnterキーを押してください。

入力した数字はセルリストの番号に対応しています。

レイヤーの枚数より大きい数(この場合は5以上)を指定すると全てのレイヤーが統合された画像が表示されます。統合された画像はPSDファイルに含まれていますが、作成したPhotoshopの設定によっては含まれてない場合があります。統合された画像は(古いPSDファイルとの互換性のため)半透明部分の色の階調が荒くなります。

背景のセル番号も入力します。

左側の列のタイトル部分をクリックで選択して1を入力してEnterキーを押してください。

タイトル部分を選択して入力すると全てのコマがそのセル番号になります。この場合はタイムシートは伸びません。

数値を入力しなければそのレイヤーは表示されません。

プレビューを見る

スクリーンの映像を確認します。

プレビューボタンを押してください。

プレビューウィンドウが開いてタイムシートで選択しているコマが表示されます。タイムシート上のクリックで行を選択するとそのコマが表示されます。

シークバー上のクリック/ドラッグでも表示するコマを変えられます。

実行ボタンを押すとアニメーションが実行されます。

繰り返しをオンにして実行ボタンを押すと繰り返し実行されます。

停止ボタンで止めてください。

選択範囲を実行ボタンを押すとタイムシートで選択している範囲(シークバーで灰色で表示されている範囲)のコマを実行します。

戻るボタン進むボタンまたはキーボードの←→でコマ送りできます。

マウスのホイール操作で連続的なコマ送りができます。

タイミングを調整

タイミングの調整などの編集をします。

タイムシートの+-をクリックするとそのセル番号を伸ばしたり縮めたりできます。タイミングを変化させてプレビューを確かめてください。

既に入力してある部分を消すには、範囲を選択してBackspaceキーを押すか0を入力します。

レイヤーの全てのコマを消すには、タイトルをクリックで選択してBackspaceキーを押すか0を入力します。

フレームを削除してタイムシート全体を縮めるには、削除したい範囲のフレーム番号を選択してBackspaceキーを押します。

タイムシート右上に編集に使うメニューがあります。

または、選択範囲の右クリックでメニューが出ます。

ムービーに出力

ムービーを作成します。または連番の画像ファイルを作成します。

作成…ボタンを押してください。

フォーマットはAVIムービーで、ファイル保存場所とファイル名を指定して保存してください。

作成したムービーを実行してください。

※こうして作ったムービーをムービー メーカーAdobe Premiere Elements等のムービー編集ソフトでつないで作品を作ります。AnimeStudioのタイムシートは短いカット毎に分けて作ります。一つのタイムシートを延ばしていって長いムービーを作るのではありません。特にスクリーンがHDサイズの場合など、タイムシートを長くすると32ビットアプリケーションで使えるメモリーをすぐに使い果たして動かなくなるので注意してください。

描き直す

動画を追加/修正します。

新しい動画レイヤーを追加してください。または、動画レイヤーを描き変えてください。

変更したファイルを保存してください。

フォルダリストでPSDファイルをクリックして選択してください。

更新ボタンを押してください。

リストが新しくなります。

セルを上下にドラッグするとセル番号を入れ替えられます。

タイムシートを直してプレビュー作成…してください。

次は画像を個々のファイルに分けて保存する場合です。