手描きコマアニメーションの作成

　課題　

hr.icon

課題　コマアニメーションの作成

アニメーションの基本中の基本であるコマアニメーション（frame-by-frame animation）の制作手法を習得する。

腕試し程度であり、チュートリアルに沿って作成、もしくはオリジナル作品でも可能。

GIFデータにすることも考えて１～数秒程度の長さ

下記URLのチュートリアルを利用して、Photoshopでのコマアニメーション作成方法を習得する。

14.1MBの背景映像データのダウンロードが必要

背景を利用せずに作成してもよい

カスタムブラシ（megapack）は358MBあるので通常のブラシでよい

hr.icon

演習メモ - 2023

（10/17）

ワークエリアを必要に応じて変更

ビデオグループの機能（今回は基本的に削除するが、コマとしてレイヤーを使いたい場合は利用する）

Photoshopでビデオデータを開いたときレイヤーのグループ（例：ビデオグループ１）が作成される場合がある。このグループ内で画像レイヤーやビデオレイヤーを追加した場合は、時系列で配置される。チュートリアルのようにタイムライン上で別々のトラックとしたい場合はグループを削除してから画像レイヤーやビデオレイヤーを追加する必要がある。

初期設定のフレームレート＝12fpsが速い場合は、8fps（10/17の設定、任意）や4fps程度に下げてもよい。

GIFデータにすることも考えて１～数秒程度の長さ（ワークエリア）

Photoshopのブラシサイズと硬さのショートカット

Mac

ブラシサイズ：Control+optionと左ドラック左右

ブラシ硬さ：Control+optionと左ドラック上下

Win

ブラシサイズ：Altと左ドラック左右

ブラシ硬さ：Altと左ドラック上下

(10/24予定)

Photoshop保存方法、保存形式

静止画レイヤーとビデオレイヤー（時間軸を持つ）の違いを理解する

ブラシオプション

滑らかさ（＝手ブレ補正）　描画が遅れる

流量

オニオンスキン

「乗算」が見にくければ「通常」や「スクリーン」に変更

前のフレームや後ろのフレーム数の変更

作成後からフレームレートを変更するとコマが飛ぶので、最初からどの程度のフレームレートが良いかはテストしてから決めておく

PremiereやAfter Effects等を利用して、後からフレームレートを変更することはできる

書き出しのサイズはFull HD（1920x1080）ではデータ容量が大きい場合は1280x720に変更（任意）

Photoshopは長尺のコマアニメーションには向かない

ロトスコープ手法で制作してもよい（通常はPhotoshopよりはAfter Effects等で制作することが多い）

映像データを開く

YouTube映像や既存映像を利用してもよい（課題制作としてのみ、外部公開は不可）

もしくは、別ファイルとして映像データを開いた後、レイヤーの複製先を指定することで統合できる

スマホで撮影したものをトレースして作成

ロトスコープデモとしては、ネットの写真画像を３コマ程度なぞるだけ

調整レイヤーの色相・彩度を追加して色味を変化させても面白い

YouTube Studio（自分の動画）のオーディオライブラリの音楽を合わせてみてもよい　※あくまで実験程度

背景を利用しない場合

新規ビデオフォーマット（1080pや720p）で作成

タイムラインを表示して「ビデオタイムラインを作成」

hr.icon

提出

提出用ScrapboxにGIFデータをアップロードする

https://gyazo.com/47749e638e43390999e503c9564c6698

hr.icon

参考：公式ヘルプ

Adobeの公式ヘルプにPhotoshopでビデオやアニメーションを扱う場合の情報が掲載されている。

hr.icon

参考：ロトスコープ

下記アーティストのようにロトスコープを専門とするアーティストもいる。

奥下和彦

Gonzalo Cordero de Ciria

https://www.youtube.com/watch?v=MMDInhQTy4s&list=PLzNP0DnKwEZnMbO7J3kwQCl3C6g9g0EDN

hr.icon

参考：ビデオレイヤーではなく、通常のレイヤーを１フレームにして制作する方法

今回の教材中では、一定の長さを持つビデオレイヤーのフレーム毎にブラシツールで描いていたが、この方法ではあとから個別のフレームの長さを変更することができない。手描きアニメーションでは絵毎にフレーム数を変化させることも多いため、ビデオレイヤーではなく、通常のレイヤーを１フレームとして描いていくほうが作品表現を生み出しやすいこともある（下図）。この方法は絵の数＝レイヤー数となる。

https://gyazo.com/6dee3ce7df33d22f1471a64b83221b2a

上記タイムラインを作成したPhotoshopデータ

hr.icon

Photoshop以外の手描きアニメーション方法

旧来のアナログではなく、アプリケーションによって手描きのコマアニメーションを作成する方法としては、以下のようなツールを用いて作成することも可能。特に手描きによる作成では、iPad等のタブレット端末やペン型デバイスを併用して行うことが最も効率的である。

以下の映像ではiPadのアニメーションアプリBEST 5の紹介。

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

hr.icon

（メモ）

M1 MacのPhotoshopはそのままではmp4データを読み込むことができない。Rosettaエミュレーションモードを利用してPhotoshopを起動する。以下はIllustratorの方法だが、Photoshopも同様。

Rosetta2のインストール

通常はx86アプリをインストールする際に「〜を開くには、Rosettaをインストールする必要があります。今すぐインストールしますか？」が表示されインストールすることができる。

ターミナルから以下を入力してインストールすることもできる

softwareupdate --install-rosetta　または　sudo softwareupdate --install-rosetta

WindowsのZIPファイルの解凍方法