イントロダクション
今回はAviUtlで、所謂『ワイプ画面』と呼ばれる小さな画像内画像を作成する方法を記述していこうと思います。
↑こんな感じで画面内に小さな画面を映すやつですね。通称ピクチャ・イン・ピクチャとも呼ばれているらしいですが。
テレビなんかでよく見る手法ですわね。
応用範囲が広い手法なので覚えておいても損はないと思います。
ワイプ画面の作成方法自体は色々とあるんですが、今回は適当に私が思いついたものを紹介していこうと思います。
個人的にはあんまり使わない手法なんですが、休憩時間中にぼ～っと見ていた動画で使っていたので、どうやって作っているのかを模索していたら割と簡単に出来た感じですね。
ゆっくり実況とかボイロ動画は勿論、実写でも使えますので汎用性は高いと思います。
ってな訳で、ワイプ画像の作成方法を備忘録がてら記述しておきますので、興味のある方は読んでいって下さいませ。
宜しくお願い致します。
AviUtlで出来るワイプ画面の作り方
拡大率を使う方法
一番簡単な方法としては、単純に拡大率を使ってワイプ画面にしたい画像を縮小するものですね。
では、この方法を使って適当なサンプルを作ってみましょう。
手順①AviUtlを起動して新規プロジェクトを作ります。画像サイズは適当でいいですが、私は1920×1080で作成する事にします。
手順②タイムラインのレイヤー1に背景画像を放り込みます。
何でも良いので、背景にしたい好きな画像や動画をレイヤー1に配置して下さい。
手順③タイムラインのレイヤー2にワイプ画面にしたい画像を放り込みます。
画像でも動画でも何でも良いので、レイヤー2にワイプ画面にしたいものを配置して下さい。
手順④レイヤー2の設定ダイアログから、拡大率を調整します。
↑設定ダイアログの拡大率をスライダー等で変更して、お好みの大きさに変更して下さい。
手順⑤ワイプ画面の位置を変更します。
↑メインウィンドウでワイプ画面にしたい画像をドラッグして移動すれば簡単だと思います。
手順⑥ワイプ画面に縁取りをします。
このあたりはお好みですが、個人的には縁取りをした方が見栄えが良いような気がします。
別に要らないという人は手順⑤で完成で大丈夫です。
↑レイヤー2の設定ダイアログ右上にある+マークを押すと、エフェクト一覧が出てきます。
↑その中にある『縁取り』を選択して下さい。
↑設定ダイアログに縁取りが追加されますので、サイズと色を好きなように変更して下さい。
↑完成すると、こんな感じで右下にワイプ画面ができます。
↑あと、画像のトリミングをしたい場合はクリッピングを使うと良いかもしれません。
※AviUtlの仕様上、エフェクトは上から順にかかっていきますので、クリッピングを使う時は縁取りの上に配置しておかないと、ちゃんと縁取りされませんので注意して下さい。
↑クリッピングを使うと、こんな感じで自由にワイプ画面をトリミングできますので、好きな感じにしてみて下さい。
図形を使う方法
次に図形を使って、特殊な形状のワイプ画面を作る方法を記述していきます。
手順①AviUtlを起動して新規プロジェクトを作ります。画像サイズは適当でいいですが、私は1920×1080で作成する事にします。
手順②タイムラインのレイヤー1に背景画像を放り込みます。
何でも良いので、背景にしたい好きな画像や動画をレイヤー1に配置して下さい。
手順③タイムラインのレイヤー2にワイプ画面用の図形オブジェクトを生成します。
↑タイムライン上のオブジェクトが何もない場所で右クリック→『メディアオブジェクトの追加』→『図形』を選択して、図形オブジェクトを生成して下さい。
デフォルト設定で円が選択されていますので、そちらをそのまま使いましょう。
手順④タイムラインのレイヤー3にワイプ画面用のキャラ画像を放り込みます。
手順⑤図形とキャラの位置と大きさを変更します。
↑設定ダイアログの拡大率を使用して、レイヤー2の図形とレイヤー3のキャラ画像の大きさを変更したら、適当に位置をドラッグして調整して下さい。
今回は中央付近に配置しましたが、どこでもいいです。レイヤー2の円がワイプ画面用の縁になりますので、キャラの顔が入るようにだけしておいて下さい。
手順⑥レイヤー3に『上のオブジェクトでクリッピング』を適用します。
タイムライン上でレイヤー3のキャラ画像を右クリックすると↑上記のメニューが出てきますので、『上のオブジェクトでクリッピング』を選択して下さい。
↑完成するとこんな感じで円形のワイプ画面が出来ると思います。
↑縁取りの形状に関してはレイヤー2の設定ダイアログから図形の種類を変更する事で、色々と変える事ができます。
↑5角形にすると、こんな感じにできますね。
↑先程のものに回転スクリプトを使えば、こんな感じで動くものもできます。
応用編
先程の図形で作ったものの縁取りを他の形状にしたい場合は図形に新しいものを登録するか、透明情報入りのPNG形式の画像を用意して、そちらにクリッピングすれば使用できます。※図形の種類を新規登録する方法はこちらからどうぞ。
↑もみじの画像にクリッピングするとこんな感じで微妙なものになりますが、好きな形状のワイプ画面を作れますので、適当にカスタマイズしてみて下さい。
あとはキャラの背景を付加したり、縁取りをかけたい場合はレイヤー構成を変える事で可能になります。
↑レイヤー1が背景画像。レイヤー2が縁取り用の図形。レイヤー3が上のオブジェクトでクリッピング用の図形。レイヤー4がキャラの背景画像。レイヤー5がキャラ画像となります。
レイヤー2と3は同じものですが、レイヤー2の方にだけ縁取りエフェクトをかけて下さい。レイヤー3の方にまでかけると縁が大きくなるだけです。
レイヤー4と5には『上のオブジェクトでクリッピング』を適用して、レイヤー3の形状でクリッピングします。
↑完成すると、ワイプ画面の中のキャラ背景と縁取りが追加されます。
↑回転スクリプト＆扇クリッピングを併用する事で回転する装飾とかを作ってみても良いかも知れません。
↑先程のものにグループ制御とノリノリスクリプトの3番を更に併用すると、拡縮するフレームなんかも作れます。
他にも周囲を動く光のラインで装飾するとか、輪郭をランダムに動かすとか色々と思いつきますが……キリがないのでこのあたりにしておきます。
手をかける程に見栄えが良くなりますから、適当に試してみて下さいませ。
では、本日はここまで。
お疲れ様でした。
他のAviUtl関連の記事はこちらからどうぞ。
他のAviUtlプラグイン紹介記事はこちら。
AviUtlスクリプト紹介記事はこちらです。
新規でブログを作りたい方はこちらのレンタルサーバーがお薦めです。⇒≪新登場≫国内最速・高性能レンタルサーバー【ConoHa WING】
今回の経費＆記事作成時間＆日記
記事作成時間：約5時間
ここ最近、裏でやっていたblenderのキャラモデリングですが、あまりにも進捗がないので一時中断して別のものをモデリングする事になりました。
何というか、下絵とか何もデザインせずに気まぐれに作ってましたからねー。
正直、明確な最終地点が解らないので、作っては消しを繰り返してるばかりで実質的なモデリングの進捗がなかったのが敗因かも知れません。
という事で、地味に詰んでしまった為、師匠達と今後のモデリングについて相談してみた結果。
ここらで習作と割り切って何かの既存のアニメキャラでもモデリングしてみる事になりました。
元々存在しているキャラなら新規デザインとかしなくても良いですし、いきなりオリジナルキャラを作るよりもハードルが低いのがメリットですね。
まあ、版権の都合上、販売できないのが最大のデメリットではあるのですが……そもそも、技術的にまだその領域に達していないですし、スキルアップと割り切れば、そんなに悪い時間の使い方ではないような気がします。
ボチボチ頑張ってみようと思います。
では、最後に恒例の累計出費＆記事作成時間を発表していきますか。
総制作時間：約1792時間
累計支出：60,962円