Wednesday, March 19, 2014

AfterEffects mp4形式の動画の合成に挑戦

動画素材.comさんの記事「アルファチャンネルの無い動画を比較的にキレイに抜く場合どうするか」を参考にして透過の無いmp4動画の合成がどんな感じにできるか挑戦してみた。
なので、リンク先の記事を読んで出来ちゃった人はこっから先は読む必要なしです。
管理人が自分の動画で出来るか試しているだけですので。

アルファチャンネルって何?ていう初心者の方はまずは
After Effects ヘルプ / アルファチャンネル、マスク、およびマット
同じく動画素材.comさんの「アルファチャンネル(透過)をムービーに入れて書き出す設定」
なんかを読むといいと思います。

Photoshopでもpngだと背景は透明の状態にできるから画像合成がしやすいけど、jpgとかだと自動的に背景の透明部分がホワイトになっちゃうから合成がちょっとめんどいよねそんな感覚の動画版。(なんか違うような気もするけど、まあいいや)

試してみたところ、左のmp4形式の動画が右のようにすることが出来ました。
結果を先に言ってしまうと、輪郭のはっきりしたオブジェクトを合成する際にはかなり使えるとおもいます。






さっそくやってみます。

1.読み込んでコピー

新規プロジェクトに使用するmp4動画を取り込んで、適当にコンポジションを作って、読み込んだレイヤー(動画)をコピーして2つにします。




2.上のレイヤーに「白黒」のエフェクトをかけます。

上部メニューから「色調補正」「白黒」と進みます。

こんな感じのグレーになりました。



3.コントラストをハッキリさせるために、さらに「輝度&コントラスト」などのエフェクトをかける。

先に進むとわかりますが、さきほどのグレーの状態だと透明が中途半端になってしまいます。
なのではっきりとした白と黒の動画になるようにエフェクトの「輝度&コントラスト」「トーンカーブ」等をかけま真っ白の部分と真っ黒の部分に色分けをします。
今回は、「トーンカーブ」を使ってこんな感じのコイン部分を真っ白にしました。
トーンカーブのカーブがひどいことになってますね。
あと、コインの周りに汚れがでてしまいましたが、後で取るので問題ありません。



4.下のレイヤー(動画)のトラックマットを変更する。

さきほどコピーして放置していた下のレイヤーのトラックマットのモードを「ルミナンスキーマット」にします。こうすることで、上のレイヤーの黒い部分を透明にできます。(上のレイヤーの白い部分を透明にしたい時は「ルミナンスキー反転マット」を選べばいいだけのこと)
表示上は何が変わったかわかりずらいかもしれませんが、大丈夫ですので先に進みましょう。



5.合成をする背景を用意する。

今回は、特に目的もないので単色のブルーのレイヤーを用意しました。
ブルーのレイヤーを一番下にもっていったところ、黒い部分が透明なっていることがわかります。

さらに、次の作業のために上の2つ動画のレイヤーを選択してプリコンポーズします。



6.「チョーク」でフリンジ(ふちに出来た汚れ)を取る。

5の画像を見てもらえればわかると思いますが、コインの周りにぐちゃぐちゃと汚れのようなものができてしまいまっています。これを取り除こうと思います。
プリコンポーズしたレイヤーを選択して、上のメニューの「エフェクト」「チョーク」と進みます。
動画を確認しながら、[チョークマット]の値を増減させてみましょう。

この動画では[チョークマット]の値を14.80にしたらフリンジがわからなくなりました。
動画素材.comさんの記事では「色相・彩度」などもフリンジを目立たなくするのに使えると書かれていますね。


完成です。


ポイント
1.透明にする部分としない部分を白と黒の2つにはっきりと分ける。
2.エフェクトの「チョーク」をかけるときに職人になったつもりで細部までこだわりを持つ。

7.ちなみに、パーティクルのようなものでも出来るか試してみたところ・・・


[チョークマット]の値をいろいろ試してみたのですが、あまりうまくいませんでした、パーティクルのようにボヤッとしたものを合成するには何か別の方法を考える必要があるみたいです。(だれか教えて)

最後に動画素材.com管理者ES...さんのご著書を紹介させていただいて終わりとさせていただきます。


まるごとFREEでつかえる 動画素材123
ES… ( Molojun )
ビー・エヌ・エヌ新社
売り上げランキング: 23,667


まるごとFREEでつかえる 動画素材123 NEO
ES...(Molojun)
ビー・エヌ・エヌ新社
売り上げランキング: 21,000

Thursday, March 6, 2014

illustratorやPhotoshopで紙吹雪を作ろうというtips


実はこのブログを「Photoshop 紙吹雪」「illustrator 紙吹雪」という検索ワードで来られる方がぼちぼちいらっしゃいます。どうも、以前の記事の「ニコニコモンズ 紙吹雪」がgoogle先生でかなりの上位に表示されてしまっているみたい。検索して来てみたらこんな紙のように薄っぺらいブログでで申し訳ない。(上手い)

なので、せっかくなんで稚拙ながら紙吹雪の作り方でもやってみようと思います。
簡単に作れるけど、そんなに凝ったもんじゃないのでご了承ください。




【illustrator編1 個別に変形を使う方法】 


1.適当に新規ドキュメントを作る。
 ここは説明いらないね。


2.長方形(正方形でもいいよ)をいっぱい描く。
 後でバラバラにするから、オブジェクトの複製(mac:command+D  win:ctrl+D)をうまく使って描きまくろう。



3.色を塗る。
 さっき描いた四角にバランスよく色を塗る。ここが一番めんどいね。
 (本当は最初に色を塗ったものを複製しまくって、整列をしたほうが楽かもしれないね)

追記:ランダムでいいのなら便利なスクリプトがありましたのでこちらの記事を参考にしてみてください。
Illustrator:wundes.com に公開されているイラストレーターの便利なスクリプトを試してみた。


4.個別に変形を使う。
 四角を全部選択して、上のメニュー「オブジェクト」→「変形」→「個別に変形」と進もう。



 個別に変形ウィンドウが出てくるので、まずは右下の[ランダム]と[プレビュー]にチェックをいれよう。後はプレビューを見ながらお好きな感じにバラけさせよう。


5.「効果」をかけて完成。
 これだけでも無理をすれば紙吹雪に見えなくもないけど(強引)もう少し、それっぽしてみよう。
 紙吹雪をいくつか選択して、上のメニューの「効果」→「ワープ」と進んで、「円弧」や「旗」などをかけたよ。あと別に必要ないけど薄いグレーの線幅もつけてみた。
後は、色が重なってしまっているところやちょっとした配置を調整して完成です。
 (大きいのと小さいのが重なっているときは大きいのを手前にしてあげたほうがいいかも。)



【illustrator編2 散布ブラシを使う方法】 


1.新規ドキュメントを作る。

2.長方形を一つ作る。色は後で変えれるからなんでもいいよ。


3.ブラシウィンドウに散布ブラシとして登録する。
 長方形をドラック&ドロップでブラシウィンドウに持っていくと新規ブラシウィンドウが開くから、散布ブラシにチェックを入れてokを押そう。


4.散布ブラシオプション
 そうすると散布ブラシオプションウィンドウが出るはず。(出ない人は、登録した長方形のサムネをダブルクリックしてね)
取り敢えず、[彩色]の方式を「色合いのシフト」にしてok。この項目は一度描いた紙吹雪の色を後で変えれるようにするためのもの。



5.ブラシツールで描いてみる。
 ブラシツールを使って、線を描いてみよう。こんな感じになって「どこが紙吹雪だこの野郎!」とお怒りの方、慌てないでください。これからですこれから。



6.再びの散布ブラシオプション
 今描いた線を選択した状態で、ブラシウィンドウのサムネをダブルクリックして、再び散布ブラシオプションを出そう。
 設定を画像のようにしてみよう。もちろんプレビューを見ながら、好きな設定にしていいよ。
ポイントだけ説明すると、右側は全部[ランダム]にしよう。回転の基準も[パス]にしてあげたほうがいいと思います。あとパラメータには黒▲と白△があるから注意してね。
設定ができたら、またokを押そう。「このブラシは・・・」という注意がでたら、「適用」を押してね。



7.色を変える。
 ブラシなので、線の色を変えるとまとめて変えれるよ。

 個別に変えたい時は、線を選択した状態で上のメニュー「オブジェクト」→「アピアランスを分割」と進んで、「グループ解除」をすれば長方形が個別に選択できるようになります。基本これの繰り返しでそれっぽく紙吹雪はかけると思います。


8.あとはお好きに
 最初の登録するブラシを色んな形にすればより紙吹雪っぽくなると思います。
(横着をして個別に色を変えてないのがバレバレだね)



【Photoshop編 配布されているブラシをお借りする(手抜きtips)】


1.紙吹雪用のブラシを配布しているサイトを探す。

2.見つける。「gaialot_brush3」Gaialot Lab.様。

3.ニヤニヤしながら、ブラシを自分好みの設定にする。

4.自己嫌悪に陥る。

補足:つまりフォトショップの場合は、実際の画像から切り抜くか、やっぱりブラシ登録をして散布させるのがいいと思います。
関連:紙ふぶき-confetti(Lotus*様)


【aftereffect編 png画像を作る(蛇足)】 


1.ayato@webさんの「制作例 19:舞う花びらの表現」を参考に紙吹雪の動画を作る。

2.png形式で出力して、透過画像素材として使う。

3.とはいえ、png画像は合成しやすいので、aftereffectで画像素材を作ってしまうことは意外とある

紙吹雪クラッカー(5個入)
カネコ
売り上げランキング: 231,681