2013年8月17日土曜日

【NiVE2】 素材のアルファ値でマスクをかける 【特殊効果入門】

今回は、前回の記事【NiVE2】描画エフェクト(塗り・グラデーション・4色グラデーション)について【特殊効果入門】の補足のような内容になります。

素材のアルファ値(透明度)を抽出してマスクをかける方法です。
マスクをかけることによって、素材のアルファ値を無視してレイヤー全面を塗りつぶしてしまう描画エフェクトをかけても、素材のシルエットで切り抜くことができます。


 まずは左図をご覧ください。左側の女の子と文字のレイヤーを、右側のようにシルエットでグラデーションをかけたいと思います。

(女の子とテキストレイヤーの空白部分は透明です)

しかし、単にレイヤーにグラデーションエフェクトを適用しただけでは、このように矩形にグラデーションがかかります。

シルエットを抽出するには、さらにトラックマットというエフェクトをかけます。

トラックマットで透明部分にマスクをかける

グラデーションエフェクトをかけたレイヤーを選択し、メニューバーから[エフェクト]→[チャンネル]→[トラックマット]をクリックします。

【トラックマットエフェクトについて】
任意のレイヤーの情報をマスクに変換し、レイヤーに合成するエフェクトです。
トラックマットについての詳しい説明はまたの機会に行うとして、ここでは、同一レイヤーの透明部分にマスクをかける方法をご紹介します。


タイムラインからトラックマットの項目を展開し、[マットレイヤー]を自レイヤーに指定します。

[マットに使用]の項目を「1:アルファ」に します。

[サイズが異なる場合]の項目は、この場合自分自身のレイヤーでマスクするため関係ありません。そのままにしておきます。

[反転]の項目にチェックを入れると、マスクが反転します。



左図は、トラックマットを適用した後の女の子レイヤーの様子です。
グラデーションがシルエットの形になっています。

ちなみに、エフェクトをかける順番はとても重要です

描画エフェクトの後にトラックマットがかかるようにしてください。

左図は、参考までに同じ方法で塗りエフェクトとグレインエフェクトをシルエットで抜いたものです。


今回はこれで終わります。

NiVE2追加講座目次へ→

2013年8月16日金曜日

【NiVE2】描画エフェクト(塗り・グラデーション・4色グラデーション)について 【特殊効果入門】

今回は、NiVEの塗りつぶし系の描画エフェクト3つ「塗り」「グラデーション」「4色グラデーション」について見ていこうと思います。

これら3つがどんな効果を持っているかについては、エフェクトの名前と、左図をご覧いただければだいたいわかると思います。

エフェクトの適用

メニューバーの[エフェクト]→[描画]の中に3つともあります。

適用するレイヤーを選択し、エフェクトを選びます。

下記より、それぞれのエフェクトの設定項目について見ていきます。

1.塗りエフェクト

レイヤーを任意の色で塗りつぶします。

設定できる項目は「色」と「不透明度」のみです。

【色の設定】
色の設定については特に説明する必要はないと思います。
「色」の項目の隣にある赤い領域をクリックすると、色の設定ウィンドウが開きます。

【不透明度の設定】
不透明度の設定ですが、残念ながらこの設定では塗りの色が薄くなるわけではありません

塗りを適用したレイヤーごと透明になってしまいます。左図は、塗りエフェクトの「不透明度」をそれぞれ50と0に設定した状態です。
(トランスフォームの不透明度は100のままです)


感覚的&個人的は、不透明度を50に設定したら、塗りの色だけが薄くなって(左図のようになって)ほしいと思うのですが、そういう設定にはできないようです。

左図のような表現をするには、塗りエフェクトのレイヤーの下にエフェクトを適用していないレイヤーを重ねる必要があります。

2.グラデーションエフェクト

レイヤーをグラデーションで塗りつぶします。
開始の色と終了の色を設定でき、好きな色のグラデーションを作れますが、2色以上のグラデーションを作ることはできません

【開始色、終了色の設定】
色の設定については、塗りエフェクトと同じです。
開始色から終了色へのグラデーションにが作れます。
【開始位置、終了位置の設定】

初期設定では、レイヤーの左上が開始位置、右下が終了位置となっています。

初期設定では斜めのグラデーションですが、左図のように開始位置と終了位置の横座標のみを合わせると、垂直グラデーションになります。
もちろん、縦の座標のみを合わせると水平のグラデーションになります。

【不透明度の設定】
塗りエフェクトと同じで、エフェクトの不透明度を下げるとレイヤーごと不透明度が下がります

左図は、開始不透明度と終了不透明度を両方とも0にした状態です。レイヤーごと完全な透明になってしまいました。

しかし、開始の不透明度と終了の不透明度が別々に設定できるので透明→不透明のグラデーションが作れます。
上の図では、何もエフェクトを設定していないレイヤーの上に、開始色と終了色を同じ(ホワイト)に設定し、開始の不透明度を0、終了の不透明度を100に設定したレイヤーを重ねたものです。


3.4色グラデーションエフェクト

レイヤーを4色のグラデーションで塗りつぶします。

グラデーションエフェクトと同じで、色の数を増やしたり減らしたりすることはできません

【色の設定】
初期の色は左図の通りです。
色の設定方法については、特に解説の必要はないと思います。

【ポイントの設定】
各色が始まる位置を設定します。

参考までに書いておきますが、ポイントの初期値はレイヤーの縦、横サイズの1/10を基準として、四隅からその値分内側にポイントされているようです。
ポイントの初期値についてはそんなに気にしなくても大丈夫です。
【ブレンド】
4つの色を混ぜる境の量です。
初期値は100です。値が大きいほど境があいまいになります。

【不透明度】
先に紹介した2つのエフェクトとは違い、4色グラデーションの場合はエフェクトの色のみ不透明度が変わります
ですので、不透明度を下げると元のレイヤーの画像が見えます。
また、先に紹介したグラデーションエフェクトのようなポイントごとに不透明度を設定することはできません

【ブレンドモード】
グラデーションのブレンドモードを変更できます。
要は、合成方法の設定です。
いろいろなモードがあるので試してみてください。


(先に紹介した塗りエフェクトとグラデーションエフェクトにはこの項目はありませんが、レイヤーのブレンド自体を変更することで下のレイヤーとブレンドすることもできます。)

ブレンドモードについては【NiVE2】 レイヤーのブレンドモードの変更 【基本操作補足】で紹介していますので、そちらも合わせてご覧下さい。

塗りつぶし系エフェクトについての補足

この記事では「塗り」「グラデーション」「4色グラデーション」について紹介いたしましたが、これらを含めた「描画」エフェクトについて、ひとつ留意しておく点があります。

これらのエフェクトは、元の素材のアルファ値(不透明度)を無視します

左図の女の子の画像は、人物の周りが透明のPNG画像です。
これに「塗り」エフェクトを設定した場合、透明の箇所も一緒に塗りつぶされてしまいます。(下図右)
個人的な希望としては、左のように透明の部分は保持したまま人物のみを塗りつぶして欲しいのですが、そういう仕様にはなっていません。

ですが、エフェクトをかけたレイヤーを人物のシルエットの形に抜く方法もあります

塗りエフェクトと一緒にトラックマットという別のエフェクトを使うことで実現できますが、長くなってしまったので、この方法については次回の更新で紹介させていただこうと思います。→(【NiVE2】 素材のアルファ値でマスクをかける 【特殊効果入門】
それでは、今回はこれで終わります。



NiVE2追加講座目次へ→

2013年8月15日木曜日

【NiVE2】 レイヤーのブレンドモードの変更 【基本操作補足】


レイヤーのブレンドは、PhotoShopやSaiなどを使い慣れている人にはあえて説明する必要がないと思います。

よくわからない、という人のために簡単に説明すると、元になるレイヤーを別のレイヤーで合成することです。そしてその合成方法によってさまざまな結果が得られます
NiVEにもレイヤーをブレンドする機能が備わっていますので、今回はブレンドモードの変更方法を紹介します。

今回は女の子の画像と炎のような背景を用意しました。

左図は、炎のレイヤーの上に女の子のレイヤーを重ねた状態です。

特に何もしていないので、画像はまだ合成されていません。

これから女の子のレイヤーのブレンドモードを変更して、炎レイヤーに合成してみます。

レイヤーのブレンドモードを変える

タイムラインで女の子のレイヤーから、[レンダラ]を展開します(左図参参照)
[ブレンド]の項目を見ると、[0:通常]と表示されています。
ここをクリックすると、他のブレンドモードを選択できます。

(ちなみにブレンドの下のシャドウやライトの項目は、3D効果設定になりますが、今回のブレンドモードの話とは関係がないので説明は割愛します)
左図をご覧いただくと、たくさんのブレンドモードが用意されていることがわかります。

もちろんこれらをすべて覚える必要はありません。
どのモードがどんな効果があるか、すべてのモードに対して詳細に把握している人は滅多にいません。
慣れている人でも、経験から得た感で使っている人がほとんどです。


ブレンドの各モードについては、下記に挙げるサイトに効果が解説されていますので、詳しく知りたい方はこちらを参照ください。いずれもPhotoShopのブレンドモードの解説ですが、NiVEにおいても効果が大きく変わるものではありませんので、問題なく読めると思います。

●ブレンドモード詳説
●Photoshopのブレンドモードがよく分からない人のための手引き その① 
●Photoshop / 描画モード (Adobe PhotoShopのヘルプページ)

これらの説明を一通り読むのももちろん有効ですが、実際にいろいろと適用して、どんな効果が得られるか自分の目で見てみるのが一番だと思います。 

レイヤーの不透明度を変えてみたり、ブレンドするレイヤーを別のモードで重ねてみたりすることで、また一味違った結果が得られることもあります。

それでは、今回はこれで終わります



NiVE2追加講座目次へ→

2013年8月14日水曜日

【NiVE2】 プレビューパネルでの操作について(後編) 【基本操作補足】


今回は、プレビューパネルでの操作について、カーソルが指す場所の情報タイムラインの場所と再生プレビューに関する操作右クリックメニューについて見ていきます。

カーソルが指す場所の情報

プレビューでマウスカーソルが指している場所の情報がリアルタイムに表示されます。
(1)…カーソルが指している場所の色が表示されます。
(2)…(1)で表示されている色を数値で表示されます。
R:赤、G:緑、B:青で、数値が大きいほど強く、明るくなります。各色の最大値は255です。
(3)…透明度(アルファ)が数値で表示されます。0~255の間で表示され、0だと完全に透明、255は完全に不透明です。
(4)…カーソルが指している場所の座標が表示されます。Xが横軸、Yが縦軸の数値で、コンポジションの左上がXY共に0になります。

タイムラインの場所と再生プレビューに関する操作


(1)…最初のフレームに戻ります
(2)…1フレームだけ戻ります
(3)…通常プレビューを開始します。プレビュー中、RAMプレビュー中は停止ボタンに変わります。
(4)…1フレームだけ進みます
(5)…最後のフレームに移動します
(6)…RAMプレビューを開始します。
(7)…プレビュー画面に表示しているフレーム(時間)を表示しています。
読み方は「時:分:秒:フレーム」です。上の図では、すべて0ですので、プレビューパネルにはコンポジションの最初のフレームが表示されていることがわかります。

※通常プレビューとRAMプレビューについては、NiVE2でボカロPVを作る・6 【初心者集中入門講座】で解説していますので、そちらを参照ください。


右クリックメニュー

(1)イメージを中心に表示
プレビュー画面がパネルの中心に表示されます。

(2)拡大率
プレビューの拡大率を変更します。
12.5%、25%、50%、100%、200%、400%から選択できます。
また、[画面にスケールを合わせる]を選択すると、プレビューパネルの大きさに合わせた拡大率に自動で調整されます。

(3)背景色
プレビューパネルの背景色を変更できます。

(4)画質
プレビューの画質を変更できます。
(実際の書き出しに影響は出ません)

画質を落とすことで、NiVEのパフォーマンス向上が期待できます。

画質はフル画質、1/2、1/3、1/4、1/8から選択できます。(左図参照)

(5)コンポジションの設定
コンポジションの設定ウィンドウを開きます。コンポジションの長さ、名前、フレームレート、サイズなどが変更できます。また、ブラーの精度に関係するシャッター角度、シャッターフェーズ、サンプリング数もここで変更します。ブラーの精度設定については【NiVE2】 モーションブラーの使い方 【特殊効果入門 2】で解説しています。


以上で、プレビューパネルで行える操作について一通り見ることができました。
プレビューパネルについての解説はこれで終わります。



前編へ→
中編へ→
NiVE2追加講座目次へ→

2013年8月13日火曜日

【NiVE2】 プレビューパネルでの操作について(中編) 【基本操作補足】

前回は、プレビューパネルからプレビュー表示に関する操作ボタンについて見ていきました。

今回は、レイヤー操作に関する操作ボタンについて見ていこうと思います。
前回プレビュー表示に関する操作は、実際の書き出しの際に見え方に影響は出ないものでした。
ですが今回はレイヤーを操作するので、これらの操作を行うと、当たり前ですが実際の書き出しやモーションに反映されます。

プレビューパネルでのレイヤー操作は、タイムラインパネルで数値を変更させていくよりも直感的です。
プレビューパネルでは細かな数値入力はできませんが、大ざっぱに位置や大きさを決める場合は大変便利です。
また、複数のレイヤーを選択して一気に移動やスケール変更ができます
注意しなければならないのは、レイヤーにキーフレームを設定している場合です。キーフレームの設定がされているレイヤーをプレビューパネルで操作すると、タイムランパネルのインジケータが指す場所に自動でキーフレームが追加されます

レイヤー操作に関する操作ボタン

(1)レイヤー移動
(2)レイヤー回転
(3)レイヤースケール
(4)カメラレイヤー操作

(1)レイヤー移動

ドラッグで選択レイヤーを移動させます。

Shiftを押しながらドラッグすることで、水平または垂直に移動させることができます。

(2)レイヤー回転

マウスドラッグで選択レイヤーを回転させます。
右ドラッグで時計回り(右回転)、左ドラッグで反時計回り(左回転)します。

(3)レイヤースケール

マウスドラッグで選択レイヤーのスケールを変更できます。

上ドラッグまたは右ドラッグで拡大、下ドラッグまたは左ドラッグで縮小します。

また、Shift押しながらドラッグすることで、レイヤーの縦横比を維持しながらスケールを変更できます。

(4)カメラレイヤー操作

カメラレイヤーの操作をします。カメラレイヤーは、3Dレイヤーを撮影する仮想のカメラです。


【3Dレイヤーについて】
NiVEでは3Dを扱うこともできます。このブログでは3Dレイヤーについて解説したことがないため、ここで少しだけ説明します。

レイヤーを3D化するには、タイムラインレイヤーの3Dレイヤーの切り替えスイッチ(立方体のアイコン)を押すだけです。(左図参照)

3D化したレイヤーは縦(Y)、横(X)のほかに、奥行き(Z)という情報が与えられます。
3D化したレイヤーのトランスフォームを見ると、2Dレイヤーと比べ複雑になっているのがわかると思います。

左図は、女の子と焼肉の画像と黄色のカラーイメージを3Dレイヤーにしてそれぞれ配置し、カメラレイヤーで視点を変えたところです。

焼肉の画像を女の子よりも奥に配置し、カラーイメージは
横(X)軸を90°回転させて焼肉の底辺と高さを合わせました。

真横から見るとだいたい左図のような感じでしょうか…(ちょっと自信がありません)。

何も考えず目を描いてしまいましたが、カメラのレンズだと思ってください。(あと、どうでも良いですけど焼肉じゃなくてすき焼きでした)

3Dが扱えると表現できる幅が一気に跳ね上がります。意欲のある人はぜひ覚えていただきたいと思いますが、2Dの扱いに比べ考慮すべきことが多く扱いもかなり複雑になります。

執筆者の知識が低いため、このブログでは今のところ3Dの操作に関して扱う記事がありません。興味のある方はNAVE難民を救済する動画シリーズNiVE2(NicoVisualEffects2)について色々見てみるなどを参照して、積極的に使ってみてください。



【プレビューパネルのカメラ操作】

カメラ軌道ツール…ドラッグでカメラの位置を変更します。目標点は移動しません。

カメラXYツール…ドラッグでX軸とY軸の方向に動かします。目標点も一緒に移動します。

カメラZツール…ドラッグでZ軸方向に動かします。目標点も一緒に移動します。
下のムービーは、カメラ軌道ツールでカメラを動かして撮影したものです。


このブログでは3Dレイヤーやカメラレイヤーについてちゃんと説明していないので、「目標点」とか「Z軸」などと言われても「なんじゃそら」となる人もいると思いますが、「3Dだとこんな風に見える」というイメージだけ、なんとなくわかっていただけたら良いなと思います。

3Dレイヤーについてはいずれこのブログでも紹介するかもしれませんが、いつになるかは分からないので、「今すぐ覚えたい!」という方は上に挙げたサイト等を参考にしてみてください。



それでは、今回(中編)はこれで終わります。


前編へ→
後編へ→
NiVE2追加講座目次へ→

2013年8月12日月曜日

【NiVE2】 プレビューパネルでの操作について(前編) 【基本操作補足】

今回は、プレビューパネルについて少し詳しく見ていきます。ちょっと長くなりそうなので、前・中・後編に分けました。

プレビューパネルには便利な機能が詰まっているので、プレビューパネルの操作を覚えると、作業効率にもつながると思います。

プレビューパネルの構成

NiVEのプレビューパネルの構成は、左図のようになっています。

前編…プレビュー表示に関する操作ボタン
中編…レイヤー操作に関する操作ボタン
後編…カーソルが指す場所の情報、タイムラインの場所と再生プレイヤーに関する操作、右クリックメニュー

について、それぞれ見ていきたいと思います。

プレビュー表示に関する操作ボタン

(1)グリッド表示
(2)透明グリッド表示
(3)キャプチャ
(4)キャプチャ表示
(5)チャンネル表示
(6)プレビューパネル背景色の変更
(7)表示場所の移動

(1)グリッド表示

プレビュー画面に緑色のグリッドを表示させます。
左上を基準に縦横10ピクセルずつの方眼です。

このグリッドはレイヤーの位置などを調整する目安などに使用するガイドです。
書き出しの際にグリッドが表示されることはありません

(2)透明グリッド表示

透明の領域に透明グリッドを表示させます。
 

(3)キャプチャ

現在のプレビュー画面の状態のキャプチャを取ります。

(4)キャプチャ表示

このボタンを押している間だけ、(3)で取ったキャプチャを表示します。

(5)チャンネル表示

プレビューを各チャンネルの表示に切り替えることができます。
あくまでもプレビュー上の表示を切り替えるだけで、実際の書き出しに影響はでません

【チャンネルについて】
PCやTVなどの電気媒体では、色は赤(R)、緑(G)、青(B)が色の三原色(光の三原色)となります。この3つを基に、他のあらゆる色が表現されています。
ある画像についてこれらの3つの色の強さをグレースケールで視覚的に表したものが各チャンネルです。黒いほどに成分が薄くなっています。 また、アルファは透明度を表すチャンネルで、完全な透明部分は黒になります。
チャンネルについては、趣味でモーションを作成するのに絶対に必要な知識というわけではないので、最初のうちはよくわからなくてもあまり問題ないです。

(6)プレビューパネル背景色の変更

クリックすると「色の設定」ウィンドウが開き、パネルの背景色を変更できます。

(7)表示場所の移動

プレビューを拡大表示しているときによく使用します。(プレビュー表示の拡大は、プレビューパネルの右クリックメニューにあります)

ドラッグで表示している場所を移動します。

その隣にあるレイヤーを移動するツール(黒の矢印アイコン)と間違えないように注意してください。
(レイヤー移動ツールを使うと、見えている場所でなく、レイヤーが移動してしまいます。)



以上、プレビューの表示に関する操作ボタンをざっと見てきました。

今回紹介したプレビューの表示に関する操作では、基本的に実際の書き出しに影響は出ません。
…と、グリッドとチャンネルのところでも書きましたが、ここで紹介した他の操作でも同じです。
あくまでもプレビューパネル内での見え方が変わるだけです。


今回はこれで終わります。
次回(中編)は、レイヤーの操作に関する操作ボタンについて見ていきます。


中編へ→
後編へ→
NiVE2追加講座目次へ→

2013年8月11日日曜日

【NiVE2】 画面から色を取得するスポイト機能について 【基本操作補足】

今回はNiVEの作業画面から色を抽出するスポイト機能をご紹介します。

左図はカラフルな花の写真を用意し、コンポジションに配置したところです。

スポイト機能

カラーイメージを作成する際等の「色の設定」ウィンドウや、タイムラインパネルでテキストなどの色を変更する項目に、スポイトのアイコンが表示されています。
これをクリックすると、画面上から「色の取得」ウィンドウが開きます。


「色の取得」ウィンドウが開いたら、[取得開始]をクリックします。これで、NiVEの画面上から好きな色を取得できるようになります。
「色の取得」ウィンドウに表示されている色は、マウスカーソルが指す箇所の色をリアルタイムに反映します。


色を取りたい箇所でクリックすると色が取得できます。後はOKを押してウィンドウを閉じます。
NiVEで作業をしていると、意外と「あ、ここの色と同じにしたいな」などと思うことがたまにあります。
そういったときに便利な機能です。


 それでは、今回はこれで終わります。



NiVE2追加講座目次へ→