クリスタ(CLIP STUDIO PAINT/クリップスタジオ）でアニメーションを作ったら、クリスタに限らず、
最終的にはどのみち書き出し・出力が必要になってきますよね….
動画として完成させたり、他のツールで編集できるよう出力しておいたりなどなど….
少年B カクちやんやってみたけど背景透過にならなかったり、色々あって細かいところがどうすればいいかわかんないんだよね…
り~ちんうん、
何が目的で書き出すのかや、PC環境などによっても変わってくるよ
ということで、今回はその、
クリスタアニメーションでの書き出し方/出力方法
これを設定内容や用途含め5通りのまとめでいってみます。
カクちゃんおお！いってみろくださいw
※クリスタアニメーションの作り方・使い方についてはこちらを↓
❶、クリスタアニメーションで書き出しできる方式と形式
クリスタは『アニメーション書き出し』から色々な出力保存ができますが、
まず、クリスタPROとEXでは書き出しできる『大枠の内容』に少し差があります。↓
| 書き出し項目 | PRO | EX | 形式/拡張子 |
|---|---|---|---|
| 連番画像 | ◯ | ◯ | BMP/JPEG/PNG/TIFF/Targa |
| アニメーションGIF | ◯ | ◯ | GIF |
| アニメーションスタンプ | ◯ | ◯ | APNG(.png) |
| ムービー | ◯ | ◯ | Win:AVI/MP4/ Mac:MP4/MOV |
| アニメーションセル出力 | ー | ◯ | BMP/JPEG/PNG/TIFF/Targa(.tga) |
| OpenToonzシーンファイル | ー | ◯ | .tlv/.tpl/.tnz |
| タイムシート情報 | ー | ◯ | .xdts/.csv |
PROのアニメーションで出力できないもの
- 【アニメーションセル出力】
- 同じ絵のコマを省いた動きのあるセルのみの出力や、アニメーションフォルダー外のレイヤー出力など
- 【OpenToonzシーンファイル】
- ジブリで使われてきた「Toonz」が基になってる無料の2Dアニメーション制作ソフトで、それ用のファイルの書き出し
- 【タイムシート情報】
- アニメーションのタイムライン情報の書き出し
このように、PROでは出力できないものもあるので、そこは注意点。ふまえておきたい部分です。
他、PROとEXは結構違いあります。
※PROとEXの違いについての詳しくはこちらを参照↓
※アニメーション部分のみにフォーカスしたPROとEXの違いはこちらも参照↓
❷、クリスタアニメーションの書き出し方
ここでは、アニメーション自体や、画像・セルの書き出しである、下記❶〜❺について詳しくまとめてみました。
- 連番画像での書き出し
- アニメーションGIFでの書き出し
- アニメーションスタンプの書き出し(APNG形式)
- ムービー書き出し
- アニメーションセル出力
2-⓪,アニメーション書き出しの基本
アニメーション書き出しの基本ですが、最初は全て共通で、
- クシスタ画面上部バー『ファイル』から
- 『アニメーション書き出し』
- 書き出し方式の選択
- 書き出し設定
- 書き出し
全てこの流れになります。↓
※画像上部タップで拡大、画像タップでもとに戻る
2-❶,【連番画像】での書き出し方
PRO/EX共通で可能。
対応ファイル形式
- BMP/JPEG/PNG/TIFF/Targa
書き出し内容・用途
コマごとに統合した画像として全て書き出せる方式です。
2コマ打ちや3コマ打ち等で、同じコマがある場合も別画像としてナンバリングされ、
全ての各コマ（フレーム数分）を1画像ごと統合して出力できます。
（2Dカメラワーク含む）
↓
- 他のツールで全コマを画像として読み込む
- 画像単位で再利用する などなど….
【背景透過PNG】にしたい場合
- 背景用紙のレイヤーを目のマークでOFF
- 背景のアニメーションフォルダを分けたい場合目のマークでOFF
つまりそれらを【非表示】にし【PNG形式】で書き出す必要あり。
※アニメをバラで書き出す場合、圧縮されない形式であるTarga(.tga)形式で書き出すのが一般的なようです。
（Targa(.tga)形式でも「背景透過」にできます。）
ただ、PNG形式よりも更にグッと重くなるので状況に応じて選択したいところかと。。。
また、Jpeg/Tiff形式の場合、背景画像を非表示にしても背景透過にはできません（白い背景つく）
なおかつJpegは保存するたびに劣化してくのでそこも考慮してく必要あり…..
連番画像書き出し手順と設定の仕方
ファイル＞アニメーション書き出し＞で、
『連番画像…』をクリックし、
『連番画像書き出し設定』のダイアログを開く。
開いた連番画像書き出し設定ダイアログで各設定ができます↓
- 書き出し先
- どこに保存されたかわからなくならないよう指定 笑
- 開始番号
- 連番にする開始番号の指定
（読み込み先は0からなのか1からなのかに合わせておく）
- 連番にする開始番号の指定
- 書き出し画像の種類
- 目的に合わせて選択
- 出力範囲の選択や、フレーム・下描きレイヤーも含むかなども選択できる。
- 2Dカメラ
- 適用にチェックを入れると、カメラワークで設定したごとの絵面画像で統合される。
- チェックを外してるとカメラワーク無視の全部同じ動きのない絵面画像になる
- 枚数設定等
- アニメーションのフレーム数、フレームレートと同じにしておく
フレーム数の多さ（アニメーションの長さ）で書き出しの時間が長くなる場合もあるので、終わるまで待ち、
完了してから確認する。
書き出した画像は下図のように、全てのコマで出力されます↓
同じ絵を使ったコマも全て書き出されるので、ものすごい画像枚数になったり、時間もそれだけかかり、容量もくいますが、
2Dカメラフォルダ内の画像もそのコマの絵面で統合して書き出したい場合などには有効ではありますよね…
背景絵や背景用紙を非表示にしてPNGかTgaで書き出せば背景透過のバラで書き出すことも可能↓
※画像上部タップで拡大/画像タップで戻る
※一覧で見たときその環境の背景色で表示され白背景あるように見えたりしますが、個別に開いてみたり、各アプケーションに読み込んで画像を重ねたりしてみると背景透過できてるのを確認できます。
2-❷,【アニメーションGIF】の書き出し方
PRO/EX共通で可能。
ファイル形式
- GIF
書き出し内容・用途
アニメーションGIF形式の動くイラストにできるので、Web上で気軽にアップする場合などに適してるが、
- クリスタVer2.0までは透過GIFアニメーション出力『非対応』。
- クリスタVer.2.1~（’23.07.27リリースされたVerから）は透過GIFアニメーション出力に『対応』。
※Ver.2.1～より透過GIFアニメーション出力対応↓
クリスタVer.2.0まででの『アニメーション自体で』背景透過にしたい場合は、
『APNG形式かAVI形式』で書き出す必要あり。
（以下順に記載してます）
アニメーションGIF 書き出し手順と設定の仕方
ファイル＞アニメーション書き出し＞『アニメーションGIF…』をクリックして設定ダイアログを開く。
設定ダイアログで各項目を指定します↓
- 出力範囲
- 開始位置フレームと終了位置フレームで指定する
- フレームレート
- 基本的にはそのアニメーションのフレームレートと同じにする
- ループ回数は
- 無限に繰り返す指定や、回数で指定できる
- ディザリング
- 疑似階調表現のON/OFF
チェック入れないと結構画質荒れる笑
ただ、ファイルサイズは大きくなる…..
- 疑似階調表現のON/OFF
書き出しが完了したら、ブラウザ等（ChromeとかSafariとか）で表示再生確認してみる。
※買い切りのクリスタでこの機能を追加したい場合は、アップデートプラン（1,100円/年額～）に申し込めばそのほかの新機能含めて追加可能。↓
▶︎CLIP STUDIO PAINT EX 
（イラスト＋漫画・作画アニメも本格対応）
▶︎CLIP STUDIO PAINT PRO 
（イラストメイン機能）
2-❸,【アニメーションスタンプ(APNG)】の書き出し方
PRO/EX共通で可能
ファイル形式
- APNG形式
（Animated PNG形式）(.png）
内容・用途
比較的新しいファイル形式で、軽いのにキレイにできる。
んが、まだ特定の環境でしか再生対応されてないのが現状…
主にFirefox、Chrome、Safari等では対応されていて、APNG形式で書き出せるツールも増えてはきているようではある。
- LINEアニメーションスタンプではAPNG形式にしなければならない。
- また、クリスタのアニメーションでも背景透過にする手段として有効な形式。
APNG形式で背景透過にしたい場合
- 背景/用紙レイヤーは非表示・または削除する。
※透過表示確認する場合、表示対応されているブラウザでも、その媒体のもとの色によって透過になってないように見えてしまう場合もあるので注意。。。
APNG形式の書き出し手順と設定の仕方
ファイル＞アニメーション書き出し＞
『アニメーションスタンプ(APNG)…』をクリックして設定ダイアログを開く
アニメーションGIFの指定内容とほぼ同じです。
- 出力オプション『余白を削除する』
- 描画されてない部分をカットしてくれる。この場合サイズは小さくなる。
（LINEアニメーションスタンプでは余白削除が必要でクリスタでもそれに対応してくれている）
- 描画されてない部分をカットしてくれる。この場合サイズは小さくなる。
- 出力オプション『減色する』
- チェック入れると減色されファイルサイズを小さくできるが、画質劣化にもつながる…
※LINEアニメーションスタンプの場合はファイルサイズにも制限あるので、オーバーしないよう、最初に規定チェック必須。↓
保存したらAPNG形式ファイルを表示再生できるツール、ブラウザ等で確認する。
2-❹,【ムービー書き出し】の仕方
PRO/EX共通で可能
ファイル形式
- Mac
- QuickTime Movie形式(.mov)
- MP4形式(.mp4)
- Windows
- AVI形式(.avi)
- MP4形式(.mp4)
内容・用途
上記のように、使う機器によって書き出しできる形式も違い、互換性やできること、書き出し方も違ってくる。
主に動画として音声付きで投稿する場合や、別の動画編集ツールに読み込む場合などの書き出し方式。
ムービー書き出しで背景透過にしたい場合
- Windows：AVI形式『透過を有効にする』にチェック入れて書き出す
- Mac：現在できなくなってます….
詳細は以下を…
ムービー形式書き出し手順と設定の仕方
ファイル＞アニメーション書き出し＞
『ムービー…』をクリックし、書き出し形式を指定する。↓
Winの場合はAVI形式も選択できます。
QuickTime Movie/MP4の場合
MOV形式 MP4形式 ムービー書き出し設定ダイアログ↓
- オーディオの設定
- 96kbps〜192kbpsの範囲を選択できる
（音声が重要なら重くなるけど高めにしておいた方がいい）
- 96kbps〜192kbpsの範囲を選択できる
- 2Dカメラを適応
- 2Dカメラを使ってる場合はチェック入れる
- フレームレート
- 映像での一般的なフレームレートは24fps以上ですが、ここはもとのアニメーションで作成したfpsと同じにする
設定ダイアログを見た通り、
.mov/.mp4 の場合【透過を有効にする】という項目はありません。
（この形式では現在透過処理対応できなくなってます。）
よって、Mac&この形式ではムービー形式透過で書き出すことはできない。
↓
Mac環境で【透過でのエフェクト処理をしたい場合】は、
- 『クリスタ内でやりきる』
- 『PNG形式かTarga形式』の背景非表示で分けて書き出し、別のツールで読み込み再編集する
- または以下の『アニメーションセル出力』で書き出し、別のツールで読み込み再編集する
のどれかでやる必要がある。
AVI形式の場合
- ムービーバージョンを指定
- 【透過を有効にする】が可能
- チェックで有効にできる
- 書き出しを指定後、圧縮方法を指定する
そのほかはmov/mp4と同じ。
指定の場所に保存されるので、再生して確認してみる。
2-❺,【アニメーションセル出力】の仕方
EXのみ可能
ファイル形式
- BMP/JPEG/PNG/TIFF/Targa
内容・用途
アニメーションセル単位（動きのあるセルの単位）での出力や、アニメーションフォルダー外のレイヤー出力などもでき、
『タイムシート』と組み合わせて他のツールでのタイムライン再現や細かい再編集が可能。
なので制作の拡張に有効。
アニメーションセル出力の手順と設定の仕方
ファイル＞アニメーション書き出し＞
『アニメーションセル出力...』をクリックし、設定ダイアログを開く。
アニメーションセル出力設定ダイアログ↓
- ファイル名
- 連番やセル名、フォルダー名＋セル名などなど指定できる
- ファイル形式
- 背景透過が必要なら『Targa(tga)形式』か『PNG形式』
(背景用紙レイヤーは非表示にしとく）
- 背景透過が必要なら『Targa(tga)形式』か『PNG形式』
- 出力範囲
- 作画フレームか全体かを指定できる
そのほか、
PaintMan向け出力も対応されているので、必要に応じた指定ができる。
書き出しが完了したら確認してみる。
編集に必要なセルごとにバラで出力できます↓
※画像上部タップで拡大/画像タップでもとに戻る
重くなるけどTarga(.tga)形式も同じ↓
※個別に開いてみたり、各アプケーションに読み込んで画像を重ねたりしてみると背景透過できてるのを確認できます。
で、
読み込み先ツールや、タイムシートでどのように扱うのかに合わせた設定で出力が必要になってきます。
アニメーションセルで書き出しの場合、『タイムシート』を使って読み込み先でリマップする場合が多いと思うのですが、
その場合クリスタで出力の前に、『番号の正規化』をすると便利かと…↓
更に、背景透過のセル、背景セル、カメラワークつけた背景などは分けて出力し、分けて読み込みたい場合が多いと思う。
その場合、アニメーションフォルダの目のマークの非表示で分けて出力し、
出力設定の『ファイル名』や『ファイル名の先頭』などでわかりやすくしておくと良いかと思う。
例えば、
- アニメーションフォルダ名をA,B,Cなどにする
- 出力設定の『ファイル名』を『アニメーションフォルダー名＋連番』、ファイル名の先頭の欄を空にする
↓
この場合各セルの名前は、
- A0001〜
- B0001〜
- C0001〜
になり、タイムシートもわかりやすいかなと…
何をどう使うかの環境や好みなどによってもやりやすさは変動すると思うのですが、
Macの場合タイムシートは『.csv形式』しか使えないのでやややりづらい 笑
Windowsの場合は『.xdts形式』を使え、主要ツールとの連携互換も多く、タイムラインを再現しやすいかと思う。。。
※クリスタアニメーションセル出力したものをタイムシートと合わせてAfter Effectsで読み込むやり方はこちらも参照（Macでも『りまぴん』ならコピペで配置できる！↓
❸、アニメーション出力で背景透過にしたい場合
上記の中からのまとめにもなりますが、
クリスタ アニメーション背景透過出力の基本
- PNG形式 / Targa形式 / APNG形式などで背景を非表示にして出力
- ムービー形式ならAVI形式で『透過を有効にする』にチェックして出力
クリスタアニメーションで背景透過出力可能な形式
- 連番画像書き出しでのPNG/Targa(.tga)形式
- アニメーションセル出力でのPNG/Targa(.tga)形式
- ムービー書き出しでのAVI形式
- APNG形式での書き出し
- Ver.2.1以降はGIF形式でも可能
※クリスタVer.2.0までのアニメーションGIFの場合は背景透過にできないので上記の❶〜❹のどれかで対応する
（※JPEG/TIFF形式はそもそも背景透過にはできない）
やり方の詳細は上記の各書き出し方を参照。
クリスタアニメーションで背景透過書き出ししたいということは、
長いアニメーションにつなげて編集・完成させたい場合や、合成・再編集したい場合が多いと思います。
PROからEXへは損せずにアップグレードできるのと、トータル的にもEXの機能があったらやれること広がるので、迷っているならおすすめです↓
❹、後からキャンバス基本設定を変更したい場合
例えば『演出フレームのみ排除して書き出したい』などの場合には便利かなと…..
演出フレームを後から排除する場合
編集＞『キャンバス基本設定を変更』＞演出フレームのチェック外す
上図のようにキャンバス基本設定を変更できるダイアログを開け、全体を変更することも可能になっています。
いざ書き出す際に、最初のサイズやフレーム枠等を変更したい場合も出てくるかもしれない…….
ただこの場合、
基準サイズや作画サイズなどを変更すると、解像度も変わってしまうので『サイズ自体の変更』はやめておいた方が無難…..
そして上記のように、書き出し設定でフレーム枠を『全て排除する』ことは可能になってます。
なのでこのシチュエーションはあまりないかもですが、
- キャンバス基本設定は後から変更もできるにはできる
- 演出フレームもつけて作成した場合後からそれだけを排除することもできる
という程度に知っておいて損はない部分かなと….
【番外編】PSD形式で書き出してAEでアニメーションにする
クリスタはpsd形式(Photoshop形式)ファイルに書き出しもでき、フォトショと互換性もあるので、
描いた絵のレイヤー構造を維持したま、After Effectsで読み込むこともできます。
なので簡単なアニメーションをAEで作成することも可能なんですよね。
書き出し方は、
ファイル＞別名で保存＞Photoshopドキュメント
でpsd形式にできます。
そのPSDファイルのレイヤー構造を維持してAEで読み込めばあとはAEで動かすことができる。
作画でアニメ制作ならクリスタ自体で描いて動かす方がやりやすいし、それを更にAEで編集するなら上記のようにアニメーションセルで、書き出してAEに取り込むのがいいですが、
描いたイラストからちょっとうごかす、変形させて動かす、エフェクトで合成するなどの場合はそのままpsdでAEに取り込んでやる方が早い。
以上です！
※クリスタアニメーションの【作り方の基本と使い方の理解がもう一歩すすむまとめ】↓
※クリスタアニメーションで【音声トラックをつけるには？】↓
※タイムラインに【セルを一括で指定するやり方（コマ打ち一括指定）】【フレームレートの変更】などもできる↓
※クリスタとフォトショの互換性・併用のしかたなどについてはこちらをば↓
ってことで
楽しいクリエイトあれ！
しゃらんるあぁあああああああ
コメント