【エロゲ】動画構図学習・参照編①【さくらの雲*スカアレットの恋】

ここ数年ずっと悩んでいること,それが

動画の構図が毎回同じになってしまう!

ということです.どうしたらこんな格好いい構図できるのか!?と普段から悩んでいました.圧倒的にインプットが足りていないと思ったので今回から新シリーズとしてかっこいいと個人的に思う動画を取り上げて,どのような構図となっているかを考察していきたいと思います.

今回の題材


「さくらの雲*スカアレットの恋」OPデモムービー

 

令和から大へタイムスリップした主人公が探偵事務所で数々の事件に立ち向かう話です.(エロゲです)

 

注目ポイント

  • 「タイムスリップ」と「探偵」という二つのテーマが表現にうまく落とし込まれていること
  • コンポジション同士の移り変わりがぶつ切りになっていないこと
  • 背景がイラストではなく図形を多用しテーマ色に絞った表現をしていること
  • 一枚絵としても十分絵になる構図を惜しげもなく連続で展開していること

個別注目シーン

企業ロゴの出し方

f:id:ShimoisFrost:20210106000108p:plain

0:01

探偵ということで虫眼鏡をかざすとロゴが出てきます.
しっかり虫眼鏡の中は拡大されているという細かさ.
実装しようとするとちょっと面倒.

f:id:ShimoisFrost:20210106000514g:plain

0:03

虫眼鏡が引っ込んだとたんイラストが上下に出現します.
イラストは作中でいうところの大正時代なので歴史を感じさせるようにして背景テクスチャにも和紙のテイストがフェードで入ってきます.一瞬だけ水色の背景が出現するのはシーンの切り替わりがわかりやすくなりますね.

 

主要キャラクターを作品テーマに沿って紹介する0:04

f:id:ShimoisFrost:20210106000849p:plain

0:04

虫眼鏡ががめん手前から出現して5つ重なりますが,恐らく出現時は3Dモデルで
この花びらが出ているシーンではシェイプレイヤーにわざわざすり替えて表現されています.
というのも虫眼鏡の輪郭同士を重ねるためには3Dオブジェクトでは実現不可能と考えられるからです.
虫眼鏡の輪郭を重ねてそこから花びらを出現させるというおしゃれ.
手が込んでいます.この幾何学的な花びらから

f:id:ShimoisFrost:20210106001226p:plain

0:05

キャラクターが顔をのぞかせます.普通5人登場人物いたら5個虫眼鏡を別々に当ててしまいませんか?重ねた隙間から紹介するってなんておしゃれな.正直ここの演出だけでも今の自分には思いつきません.

タイムスリップする0:10

f:id:ShimoisFrost:20210106001633p:plain

0:10

タイムスリップを表現したいときは奥行き方向に広がりを持たせるのは汎用的な表現かもしれません.動画の中では横と縦は空間的な広がりで使われるため,普段使わない空間軸である奥行き方向を時間軸になぞらえるのはある意味自然なのかも.
タイムスリップの際は物理法則をゆがめるということで自転車等空中に投げ出されていたり,色ずれが起きていたりしますね.ここは異様な空間なんだということが一目でわかります.なるほど.

f:id:ShimoisFrost:20210106002420g:plain

0:13

タイムスリップした先は1920年です.またここでも探偵というテーマに沿ってなんと時計張りが虫眼鏡で表されます.テーマに忠実すぎる…虫眼鏡便利すぎる…

f:id:ShimoisFrost:20210106002813p:plain

0:19

単純に主要キャラクターを並べるだけだとつまらないので図形と組み合わせて表示.
図形のほうの色が濃い部分はキャラクターが隠れて見えなくなるという工夫があることで構図に変化が生まれて単調さが消えます.ちょっと工夫した合成モードを使っていそうです.

 

タイトルロゴ0:21

f:id:ShimoisFrost:20210106003030p:plain

0:21

背景は六角格子,虫眼鏡の中だけ桜が待っています.いくつかの六角格子の中は桜の木が映っており,背景に三つの空間が共存するというトリッキーな構図となっています.

 

キャラクター登場0:23

f:id:ShimoisFrost:20210106003305p:plain

0:23

中途半端なシーンを持ってきましたが,個々のクリッピングマスクの数がえぐいことになってます.白線の六角形用で一つ,女の子用で一つ,中央の四角で囲われたテキスト用で一つ.このうち女の子用のクリッピングマスクは楔形図形をたくさん飛ばすコンポジションを作成なければならない気がします.手間かかってます.

f:id:ShimoisFrost:20210106004414g:plain

0:29

画面右側の赤いページの出現の仕方はカードワイプです.カードワイプは画面全体に施そうとすると使いどころがむずかしいなと感じていましたがこのように局所的な部品を表示するくらいで使うととてもおしゃれですね!
同様に画面左側のセリフ部分の図形もカードワイプです.
画面右側のプロフィールの出現の仕方は今風ですね.


サビ手前0:50

f:id:ShimoisFrost:20210107010256g:plain

0:50


曲のピアノの音に合わせてシーンが激しく切り替わります.背景において一度に出てくる色の数を絞っています.百年の恋

よ萌え咲かれ,のテキストは一度普通に出した後に白字黒枠で出しなおしているのは,百年の恋よ,と萌え咲かれ,をバランス良く配置しなおすためなのでしょう.なるほど.
桜が画面を舞っていますがこれも切り替わりと同時に白単色から桃色に変わっています.

f:id:ShimoisFrost:20210112231422g:plain

0:54

図形のクリッピングを大胆に使っています.
まずは桜の図形でズーム
→桜の木をズームアウト気味に出す
→大胆にカット切り替え

意外と大胆に動画のカットを切り替えるのって勇気いりませんか?
変なところでやると手抜きにも見えがちなので何となくトランジション入れたくなってしまうのですよね…

よーく見ると白色パーティクルとして散っている桜の花びらの形がカットと同時に変わっています.

f:id:ShimoisFrost:20210112232931g:plain

0:58

ここでも大胆なシーンチェンジがあります.
コマ送りすると画像同士がつながっていないですが
いきなり2Dから3Dへ移るとドキッとしますね!
ここ本当に好き.

f:id:ShimoisFrost:20210112233133p:plain

1:04

 

f:id:ShimoisFrost:20210112233352p:plain

1:05

 

f:id:ShimoisFrost:20210112233429p:plain

1:06

この三枚,あえて静止画で撮ったのは理由がありまして1秒刻みなのにもかかわらずどこで止めても静止画として絵になるのすごくないですか!?
0:54あたりのトランジションは大胆に行っているため一時停止してみると構図が成立していない瞬間があります.
こちらの三枚では壁紙にもなりそうな絵が惜しげもなくわずか三秒の間に展開されているのです.えぐい.
自分なら上のうち一つでも思いついたら5秒くらい引っ張りそうです.

f:id:ShimoisFrost:20210112234342g:plain

1:10

ここも絵になるモーショングラフィクス二連打……
女の子探偵が円の図形でクリッピングされてると思ったら上から見た街頭でした!とかおしゃれすぎ!

総括

一枚絵としても十分見れる構図を短時間で連発されると圧巻です!
ただそんな構成を決める際に役に立つのが「テーマ」であり,表現方法としては「道具」「模様」が有用なのかなと考えました.
今回のテーマは「タイムスリップ」と「探偵」.
連想される道具は「タイムスリップ」なら「時計」であり
「探偵」なら「虫眼鏡」や「手帳」,「写真」ということになります.
これらの道具およびアイコンを構図としてちりばめる,という軸さえできればおのずとテーマに即した良い構図ができやすくなるのではないかなと思いました!

AviUtlからAfterEffectsへ その3【エフェクト】

エフェクト

連載企画の第三回になります.今回はAeにあるエフェクトを一つずつ紹介します!
言い回しがAviUtlと違うものが多いため,前回同様比較表にしました.

f:id:ShimoisFrost:20191124234359p:plain

ハイフンは存在しないものです.できないことが多いじゃないか!と思ったかもしれません.しかし,他の方法で代用できるということで※として後で解説します.

Aeのエフェクト

本ソフトではエフェクトは,まずカテゴリで分類されてから小分けに収納されています.

f:id:ShimoisFrost:20191124235326p:plain

表中のカテゴリはこの左側の欄のことです.カテゴリ分けされてるだけ慣れると探しやすいです.また,エフェクトを名前で検索することもできるので最初は位置がわからなくても大丈夫です.

-----------------------------------------------※の説明は後日加筆します-----------------------------------

AviUtlからAfterEffectsへ その2【レイヤーの役割】

レイヤーの役割

連載企画の第二回になります.今回はAeにあるレイヤーの特徴を一つずつ紹介します!
恐らくAviUtlからくると,まずここで詰まってしまうのではないかなと思います.大丈夫です,ここでレイヤー別で翻訳表を見てもらえば一発で整理がつくはずです.その表がこちら!

f:id:ShimoisFrost:20191121012350p:plain

では一つずつ解説します.

動画・画像 テキスト

AeでもAviUtlでもこれらは同じ扱いとなります.しかしAviUtlとは違う点が一つあります.それは,PSD形式を読み込めるということです.PSDとはPhotoshopのプロジェクトファイル形式です.アルファチャンネルにも対応しています.つまりどういうことかというと,

Photoshopで保存したものを書き出すことなくAeに反映させることができる

ということです.
書き出しの手間がかからなくなるだけ?と思ったかもしれませんがこれのすごいところはそこではないのです.なんとPSDで修正を加えたファイルはその修正分がAeのほうに再読み込みなしで反映されます!

例えばPhotoshopで切り抜きしたものをPSD形式でAeに読み込んで,編集しようとしたら…

f:id:ShimoisFrost:20191121013403p:plain

photoshopで切り抜き漏れ発見!

このように往々にして切り抜き忘れが見つかったりします.いちいちファイルをAeから消して直したものを読み込みなおすのは面倒です.そんな時,PSD側で切り抜き修正を行ったファイルを保存しなおすだけで

f:id:ShimoisFrost:20191121013756p:plain

Photoshopの変更が反映される

このように変更が反映されます.自前で切り抜きを行う際の強い味方となるでしょう.
よく考えたら記事では自動で反映されたかどうか見せられませんね,うまく説明できてないかもしれませんが自動で反映されてるのは本当ですよ!

図形

これはシェイプレイヤ―というものになります.ここも二つ違う点があります.一つは平面を出すときは別種類の平面レイヤーがあるということです.

f:id:ShimoisFrost:20191121014255p:plain

もう一つはシェイプレイヤは内部にコンテンツと呼ばれるパーツで構成されていることです.少しややこしいのですが,シェイプレイヤという一つのレイヤ内に複数の図形を存在させることができます.まずシェイプレイヤ内の追加を押して

f:id:ShimoisFrost:20191121014521p:plain

f:id:ShimoisFrost:20191121014657p:plain

出てきた中で長方形を選びます.すると長方形が…

f:id:ShimoisFrost:20191121014844p:plain

出てきません.

Aeの図形は「パス」「塗り」「線」の三要素でできています.長方形をクリックして出てきたのは「パス」に当たるものだけ,というわけです.なので図形を出すために先ほどの欄から「塗り」「線」も繰り返し選んでください.すると図形が出ます.

フレームバッファ・フィルタオブジェクト

Aeの調整レイヤはフィルタオブジェクトに近い概念です.

f:id:ShimoisFrost:20191121015434p:plain

調整レイヤは「自分より下のレイヤすべてにエフェクトを与える」レイヤです.この使い方はフレームバッファと同じになります.ここで調整レイヤに明るさを上げるエフェクトをかけると…

f:id:ShimoisFrost:20191121015622p:plain

このように全体を明るくすることができます.次に,フレームバッファでよく使うであろう画面のズームをやってみます.調整レイヤでスケールを上げてみます.フレームバッファでは拡大率を上げると画面がズームされたようにできますが

f:id:ShimoisFrost:20191121015914p:plain

何も変わりません.スケールを上げたのに.
ということで調整レイヤは概念的には透明なレイヤにフィルタだけ重なってかかっているもの,と考えてください.フレームバッファと異なり画面を一枚の画像として取得しているわけではありません.

実はAeにはフレームバッファはありません.でもフレームバッファないとズームするとき面倒だよ,という人にはフレームバッファを無理やり作る方法があります.それは調整レイヤにトランスフォームというエフェクトをかけてあげることです.これを使うと

f:id:ShimoisFrost:20191121020337p:plain

このようにトランスフォーム内のパラメータでスケールを調整できます.相変わらず調整レイヤのほうのスケールはいじっても何も変わりませんが.

音声波形表示

あまり使うことがないと思うので簡単に.前述の平面レイヤーに音声波形表示というエフェクトを適用すると音声波形にできます.

シーン

でました.めちゃくちゃ重要です.Aeではコンポジションと呼ばれているものです.AviUtlではシーン1にシーン2,のようにシーン同士の読み込みができないというエラーがありました(AviUtl 1.0の話です).ですがAeではもちろんそんなことはなくコンポジション同士で読み込みをしたり,そもそものタイムラインをすっきりさせることができます.

f:id:ShimoisFrost:20191121021116p:plain

このようにmainという名前のコンポジションにそれぞれ個別の名前を付けてコンポジションを作ることができます.歌詞ごとに作れば後々チェックもしやすいでしょう.このように無制限に作ることもできますので(自分でみてもこれはおぞましいですが).

直前オブジェクト・フィルタ効果の追加

これらはAeでは存在しない概念です.

時間制御

これはAeではタイムリマップと呼ばれる概念です.一応はエフェクトの一種として扱われています.

f:id:ShimoisFrost:20191120022502g:plain

ここのユージの顔はタイムリマップで再生時間をイージングすることで制御しています.

グループ制御

Aeではグループ制御は親子関係,という概念で行われます.親レイヤー,子レイヤーがそれぞれ存在し,親レイヤーの移動やスケールに合わせて子レイヤーも移動やスケールします.ヌルオブジェクトは,文字通り何もないオブジェクトです.

f:id:ShimoisFrost:20191121021858p:plain

このようにヌルレイヤーを親,背景や顔のはめ込みを子に指定することで子に指定したレイヤーを親のヌルレイヤーの操作のみで管理することができます.

カメラ制御

カメラは別日の記事で出します!Aeの強みだと思いますのでじっくり解説します.

 

今日の記事は以上です.

AviUtlからAfterEffectsへ その1【概要と目次】

概要

 AviUtlからAfterEffectsに乗り換えたい人向けに解説記事を書きます.自分自身,AviUtlを使って2年,そこから乗り換えて更に3年たちました.今まで使ってきた感触を記事で配信することで,多くの人にAeでPCをメモリ不足で落としてもらいたいと思います(?).

目次

この内容は長くなると思われますので,連載形式としてページを分けます.
また,全記事においてAviUtlとの比較を書いていきます.

  • 本企画の目次,Aeだからできること【これ】
  • レイヤーの紹介と役割
  • エフェクト紹介
  • Ae vs. AviUtl 徹底比較!
  • 付録:AviUtl,Ae用語翻訳表

では,よろしくお願いします!

Aeだからできること

AviUtlを使っている皆さんは,わざわざAeに変える必要がないのでは?と思っているかもしれません.そんなAviUtlユーザーの皆さん!動画編集をやっている皆さんにこそ,今から見せるAeの可能性に惹かれると思います!

リッチな3D表現

AviUtlでは影だけが投影されていたものがAeでは明るさも反映されます!
Image result for Aftereffects ライト

マスクによる変形

AviUtlではクリッピングするしかなかったですが,Aeではマスクという機能でレイヤーの形状を変形できます.

f:id:ShimoisFrost:20191120021246p:plain

バカルテットの下側は図形で,頭側は図形から飛び出すようにクリッピングしています.

エフェクト別キーフレーム管理

AviUtlでは一つのレイヤーに対して一通りのキーフレームしか打てません.Aeではエフェクト別に違うタイミングでキーフレームを打てます.

f:id:ShimoisFrost:20191120021904p:plain

ちなみに,再生速度もイージングできます.

フレームの補間による疑似スローモーション

f:id:ShimoisFrost:20191120022502g:plain

口がゆっくりと開いていきます.もとからこういう素材なのではなくAeで補間されています.

 

さあ,Aeで動画編集の新しい表現にしゃれ込みましょう!

スライス表現【ディスプレイメントマップ】

概要

動画をあさっていたところ以下のような表現を見つけました.

youtu.be

 

こちらの動画の27秒あたりに背景に出現するスライスされた文字.

この表現,意外と散見しますので具体的な方法を考えてみました.

表現したものがこちらになります.

f:id:ShimoisFrost:20190301003046g:plain

今回は文字で行いましたがもちろん画像にも適用可能です.

では作り方を見ていきましょう.

 

解説

タイムラインは以下の通りです.

f:id:ShimoisFrost:20190301003438p:plain

f:id:ShimoisFrost:20190301003440p:plain

テキストレイヤに対して"ディスプレイメントマップ"と呼ばれるエフェクトを適用することでズレの表現を行っています.

ディスプレイメントマップ

ディスプレイメントマップでは,ほかのエフェクトとは異なりマップレイヤと呼ばれるレイヤが別で必要となります.

このマップレイヤの色情報(今回は輝度を使いました)をもとに適用元の画像の位置をずらすというエフェクトです.

タイムライン上ではmatレイヤがマップレイヤとなっています.

今回のmatレイヤは以下のものを使いました.

f:id:ShimoisFrost:20190301003904p:plain

こちらは黒と白の平面レイヤを一枚ずつ用意して,片方のレイヤにブラインドエフェクトを50%適用して作成しました.

このレイヤをディスプレイメントマップに読み込ませます.

ディスプレイメントマップでは,読み取る色情報(今回は輝度)の大小で動く方向を決定しています.

f:id:ShimoisFrost:20190301004131p:plain

わかりやすいようにマップレイヤと適用元のレイヤを重ねてみました.

マップレイヤにおいて値が小さい(つまり黒色)領域は右方向へ,値が大きい(つまり白色)領域は左方向へずれているのがわかると思います.

これを利用し,ずらしたい方向を制御することができます.

ディスプレイメントマップ内における最大水平置き換え,最大垂直置き換えはこのズレ量を制御するパラメータです.ずれる角度を調節する際にはこれらの値から角度を逆算する必要があるのであしからず.これで本筋のディスプレイメントマップの簡単な使い方紹介は終了です.

 

境目のピクセルのゴミを消去する

f:id:ShimoisFrost:20190301004550p:plain

普通にディスプレイメントマップをテキストに適用すると境目にピクセルの線が出てきてしまって好ましくないです.なのでこういう時にはマットエフェクトで消してしまいましょう.

f:id:ShimoisFrost:20190301004756p:plain

これで完成です.

ディスプレイメントマップはとっつきにくいエフェクトではありますが,使うと表現が一段階上になると思います.自分も簡単なところから活用していきたいです.

【初心者向け!】画像における色の概念と補正方法の考察

 本記事は音MAD Advent calenderに参加しています.多くの良記事がまとめられているので合わせてご覧ください.画像の勉強をしようと思ってもどこから勉強すればわからないと思います.なので今回はおいしいところをかいつまんで,すっきりしましょう!

以下,お品書きです!

 

 

前書き

 皆様,はじめまして.普段Z会MADばかり投稿している霜(frost)といいます(読み方は"しも"または"ふろすと"のどちらでも大丈夫です).本記事では以下の人を対象として話をします.

対象となる人

  • 画像がそもそも何なのかわからない
  • 色調補正エフェクトを使ったことがない
  • 結局,色調補正が何をやっているかわからない
  • 編集すると何か色合いが悪い
  • そもそも素材にノイズが乗っていて使いづらい

色とは?

色と画像

 映像は色情報の塊です.いい映像を作るためには色のことをよく知ることが大切!ということで「色って何?」,「どうすれば見栄えが良くなる?」ということに関して触れていきます.

 まず色とは何でしょうか.世の中には様々な色があります.浅葱色,臙脂色など日本独自の微妙な色合いもあります.

浅葱色

Fig 1. 浅葱色

臙脂色

Fig 2. 臙脂色

 コンピュータがこの微妙な色合いを表現する際に用いているのは,なんとわずか三色です.この三色,赤(R),緑(G),青(B)の組み合わせだけでコンピュータは様々な色を表現することができるのです.以下ではこの組み合わせをRGBと呼びます.この三色の値は0~255の256値で表されます.つまりコンピュータが表現できる色の組み合わせは256×256×256通りです.これだけの色があれば表現できない色はめったにないかもしれません.

Fig 3. 画像の色

 では色データは画像にどのように使われているのでしょうか.実際に画像を拡大してみるとマス目があります.

Fig 4. 画像のマス目

 画像は画素と呼ばれるマスが横×縦の二方向に配置されています.この画素の数が解像度と呼ばれています.よく聞く1280×720は,横に1280画素,縦に720画素あります,という意味になります.そして画素のマス一つずつに赤,緑,青の三情報が保存されているのです.

 色のパラメータ

 ところでAviUtlを開いて色調補正エフェクトをかけてみると明るさ,コントラスト,輝度,色相,彩度といったパラメータがあります.特に明るさと輝度って何が違うのだ,とわけわからなくなっているのは私だけではないと思いたいです.そこで色に関するステータス,パラメータを少し紹介したいと思います.

色相,彩度,明度

 コンピュータでの色の表し方はRGBの三色ですという話をしました.でも製作するうえで「今の色よりすこし明るくしたいな」というように調整したい場合にRGB値だと,どこの値を変えればうまくいくのか分かりにくいです.そこで色をRGBの組み合わせではなく色相(Hue)彩度(Saturation)明度(Value)の組み合わせで考えようというアプローチがあります.この組み合わせを以下ではHSVと呼びます.

色相は「どんな色?」ということを決める値です.美術の教科書でもよく輪が載っています.

Fig 5. 色相環

 彩度は「どれくらい鮮やか?」ということを決める値です.彩度を0にするとモノクロ映像の出来上がりです.逆に彩度を最大にすると目が痛くなります.

Fig 6. 彩度

 明度は「どれくらい明るい?」ということを決めます.0にすると真っ黒,最大にすると真っ白になります.

Fig 7. 明度

このようにHSVではRGBよりも直観的に色の変化を予想することができます.

輝度

 なるほど,明度は明るさを決めるのかと思ったとき,輝度は何を表しているのか気になります.輝度は「どれくらい明るい?」ということを決めます.しかし,重要なのは輝度が人の目から見たときの影響を考えているということです.例えば以下のように,色相環を並べます.

Fig 8. 色相環

 

 皆さんはこの色の内どの色が一番「暗い色」だと思いますか?直観的には青色が一番暗く見えるのではないでしょうか.しかし,コンピュータからしたらこれらの色の明るさはすべて同じになるのです.

Fig 9. 明度

 これでは直観的な色の補正を行うのに少し邪魔が入ってしまいます.そのため輝度というように人間の感性を参考にした明るさの基準が存在しているのです.具体的に輝度は「緑が一番明るく」「青が一番暗い」というような原則に基づいて計算されます.

Fig 10. 輝度

 ただし,実際に編集する際は明度でも輝度でもあまり変わらないと思いますのでお好きなようにしてください.

コントラスト

 画像を見ていると,なんだかくすんでいるな…と感じることがあります.くすんでいる,というものは色にメリハリがないことが原因の一つです.そこでコントラストをあげることで以下のように少し見栄えが良くなる場合があります.

 

Fig 11. コントラストの増加

 コントラストは色のばらつきを示しています.AviUtlでコントラストをあげると「明るい部分はなお明るく」「暗い部分はなお暗く」なると思います.このように明るい部分と暗い部分の割合をコントラストと呼んでいます.コントラストが高い,ということは明るい部分と暗い部分のメリハリがはっきりしている,ということなのです.

色の編集

 いろいろ前置きが長くなりましたが,やっと実践編です.ここからはAviUtlを用いて色調補正をやっていきます.

トーンカーブ

 いきなり本命の話です.この概念がわかれば後の話も理解が簡単になると思います.トーンカーブは色の変換パターンを設定するエフェクトです.AviUtlでは外部スクリプトで実装されているのでぜひ利用してください.今回は説明のためにAdobe Photoshopトーンカーブを利用します.まずトーンカーブを開くと,いきなりグラフが現れます.

Fig 12. トーンカーブ

 このグラフの縦軸および横軸の値域は0~255です.0~255というと,前述したRGBのことを思い出します.実は横軸は入力(つまりトーンカーブ適用前),縦軸は出力(つまりトーンカーブ適用後)を表しているのです.デフォルトですと,斜めに直線が引かれています.

Fig 13. トーンカーブのデフォルト

 これは,例えば矢印の部分を見てみましょう.横軸の中間の部分,つまり輝度値が128の部分に注目します.この横軸の位置から垂直に上がっていくと,斜め線にぶつかります.ここから左にまっすぐ進んでいくと出力の軸にぶつかります.この図は「128の輝度値を128に変化させます」という意味になります.つまり,なにも変化が起きていないということです.

 これを以下のように操作すると画像全体が明るくなりました.膨らんだ部分の輝度値の画素に相当するところが出力の輝度値に変化するということを示しているのです.この図は「128の輝度値を190に変化させます」という意味になります.

Fig 14. トーンカーブにおける明るさの補正

 これを利用すると,特定の輝度値を任意の値に変化させることが可能になります.例えば暗くなっていて見づらいところを明るくしたいという画像があったとします.

Fig 15. 暗い部分だけ明るくしたい画像

 画像の暗い部分はトーンカーブ適用前における横軸の原点近くを見てあげればよいことになります.この部分を上に膨らませてあげると…

Fig 16. トーンカーブ

以上の様に暗い部分だけを明るくすることができました. 

Fig 17. 補正後


 トーンカーブは万能のエフェクトです.前述したコントラスト,明るさの操作もトーンカーブで行うことができます.大は小を兼ねる,と言いますが,まさにトーンカーブは色調補正における一番根本の操作なのです.

 しかしながらトーンカーブは使いこなす際にいくつか注意する点があります.まず一つにトーンカーブでは左下から右上に線が引かれますが,左上から右下への線をひいてはいけません

Fig 18. トーンカーブによる色調の反転

 なぜなら,左上から右下への線は入力と出力の大小関係が逆転してしまうからです.つまり明るいところが暗くなり,暗いところが明るくなってしまうため明らかに不自然な画像ができてしまいます.

 また,急激なカーブを作ることもおすすめしません.急激なカーブは色の変化を目立たせすぎるので不自然な画像になりがちです.

 以上のことに気を付けてトーンカーブを使用することができれば,表現の幅に広がりが出ると思います.

色調補正

 AviUtlの標準エフェクトの色調補正について説明します.前述したように,色調補正では「明るさ」,「コントラスト」,「輝度」,「色相」,「明度」があります.これについてトーンカーブの操作と比べながら見ていきましょう.

明るさ

「明るさ」は明るい部分から白くなっていく項目になっています.AviUtlで明るさの項目を上げるということは,つまり…

f:id:ShimoisFrost:20181219232134p:plain

Fig 19. 明るさの項目とトーンカーブの関係

以上のように白い部分からまぶしくなっていきます.

コントラスト

 コントラストは,「明るい部分はより明るく」「暗い部分はより暗く」でした.これはトーンカーブで表すと以下になります.

f:id:ShimoisFrost:20181219232508p:plain

Fig 20. コントラストとトーンカーブ
色相,彩度,明度

これらはトーンカーブとは直接関係ないので調節してみてください!

その他スクリプト

 トーンカーブは使うのにとても面倒な部分があります.そこで外部スクリプトで楽をしようというお話です.私が使用している外部スクリプトをいくつか紹介します.

トライトーン

 トライトーンは「色合いを一種だけにしたい」というときに使うエフェクトです.外部スクリプトこちらです.色は本来0~255の256値を持っています.例えばこの画像を…青みがかった画像にしたいとしましょう.この時トライトーンを用いると簡単に画像を単色風味にできます.

f:id:ShimoisFrost:20181219233223p:plain

FIg 21. トライトーンの効果

 原理としては単純です.まず画像をモノクロにします.その後,グレーに当たる部分をトライトーンで指定した色に置き換えることで上記のような画像ができるのです.

コロラマ

 以下の画像を見てください.

f:id:ShimoisFrost:20181219234503p:plain

Fig 23. コロラマ加工

これはコロラマを使って以下の画像を加工したものになります.

f:id:ShimoisFrost:20181219234421p:plain

Fig 22. コロラマ加工前

 コロラマはモノクロにした0~255の輝度値をグラデーションで変化させるエフェクトです.スクリプトリンクはこちらです.トライトーンでは変化させることができる色は一つだけでしたがコロラマでは何種類でも変化させることができます.これを使うことで炎の着色やグロー後の更なる色付けなどができると思います.

ポスタリゼーション

 以下の画像は動画でたまに見る表現です.この表現を出すエフェクトをポスタリゼーションと呼んでいます.

f:id:ShimoisFrost:20181219235225p:plain

Fig 24. ポスタリゼーション

ポスタリゼーションのスクリプトリンクはこちらです.ポスタリゼーションは色の組み合わせを減らすエフェクトです.通常では色の組み合わせは256×256×256です.これをあえて何分の一かに減らすことで特徴的な表現ができるわけです(画像では8×8×8に落としてみました).トーンカーブで同様の操作をする場合以下になります.(説明のために4×4×4に落とす操作にしています)

f:id:ShimoisFrost:20181219235414p:plain

Fig 25. トーンカーブとポスタリゼーションの関係

 ノイズ

 私は制作で実写素材をよく使います.その都度,実写素材にざらざらとしたノイズが載っているのが目に入って気になります.しかしノイズはどうしても入ってしまうものなので仕方がないのです.だからノイズについて知ることでうまく付き合っていくことにしましょう.

ノイズって?

 ノイズは以下のような感じの画像にのっているもののことです(AviUtlのエフェクトのことを指しているわけではありません).

f:id:ShimoisFrost:20181220000309p:plain

Fig 26. ノイズの乗った画像

 特に彩度をあげたりするとノイズが目立つのです…ノイズは撮影機材の影響やら圧縮の影響やらがあるので完全に避けるのは絶対に不可能です.

ノイズ除去

 ノイズの除去にはいくつか方法があります.その中でも最も簡単なものを紹介します.それは「ぼかし」をかけることです.なぜぼかし?と思います.これはノイズの特性が大きくかかわっています.ノイズはもともと,きれいな画像にズレが載ってしまうことで発生する(と仮定する)ものです.

f:id:ShimoisFrost:20181220002052p:plain

Fig 27. ノイズの概念図

 そのズレは元の画素の色よりマイナスのノイズが乗ることで暗くなったり,プラスノイズが乗ることで明るくなったりと様々です.ノイズは一画素ずつにランダムにばらばらな値が乗っかることになります.一つの画素と隣の画素でノイズの乗り方には関係がないと思われます.つまり様々な画素のノイズの平均をとると,ある画素のマイナスのノイズとある画素のプラスのノイズが打ち消しあって,いい感じの画像になるのでは?という考えが浮かびます.「ぼかし」は,まさにある画素とその周囲の画素の色の平均をとる操作です.

f:id:ShimoisFrost:20181220002148j:plain

Fig 28. ぼかしの概念図

 これによってノイズ同士の影響をノイズ自身で打ち消すことができるというわけなのです.ただ普通にぼかしをかけるとノイズは減るけども,そもそもの映像自体が見えなくなるでしょ…と思います.そこでノイズだけをぼかすバイラテラルフィルタという「ぼかし」の亜種がございますので,それを使ってノイズを取り除いて下さい.

f:id:ShimoisFrost:20181220002407p:plain

Fig 29. バイラテラルフィルタ

ノイズが比較的減ったのが確認できると思います.ただ,ぼかし操作なのでやりすぎると画像自体がぼけてしまうのでホドホドに…スクリプトリンクはこちらです.

まとめ

 ここまで,仕上げ方面の話をさせていただきました.色調補正,特に素材に適用するコントラストや彩度の操作は少しやるだけでかなり違ったものになりますのでぜひ試してみてください.色調補正は,いわゆる「詰め」の操作になります.確かにやらなくても動画はできます,投稿できます.しかしながら,やれば一段階上の品質になること間違いなしです!ぜひ,試してみてください!