【ループイラストアニメーション】〜背景編〜ビルの描き方をご紹介！

こんにちは、ハルです。

お久しぶりのループイラストアニメーション第1弾の続きを作成していきます！

前回はキャラをペン入れしていきました。

キャラのカラーに入る前に世界観を決めるため、大まかな背景を描いていきたいと思います。

ざっくり決まっているのは

ビルの上に花火が上がっている、というイメージです。

今回はビルを描いていきます🏙️

ビルの描き方

①シルエットを描く

こんな感じで好きな色で塗りつぶします。

今回は夜の設定なのですが、夢っぽい雰囲気にしたいので、暗めかつ鮮やかな色のビルにします。

下は柵で見切れるので、適当で大丈夫です。

 

②窓を作る

新規レイヤーに、窓になる横線を暗めの色で描きます。（長方形ツール使用）

さらに新規レイヤーを上に重ね、窓より少し明るい色で縦線を描きます。

縦線のレイヤーを、横線の窓レイヤーに対してクリッピングマスクを作成します。

これで窓部分のみに縦線が表示されます。

③影をつける

窓枠の影をつけます。

窓の横線レイヤーをコピーし、窓より暗い色で塗ります。

先ほどと同じく横線のレイヤーに対してクリッピングマスクを適用し、少し上にずらします。

この時点でビルのパースに窓の形合わせましたが、最初に調整しても大丈夫です。

ビルの影をつけます。

ビルの右側の長方形をコピーし、ビルの色より暗く塗り、塗りを25％にします。

ビルの影レイヤーは今まで作成したレレイヤーの一番上に持ってきます。

大まかにビルができました！

④自由にデザイン

ビル本体にグラデをつけて立体感を出します。

今回のイラストはビル上に花火が上がっている想定なので、窓に花火の反射を描いていきます。

適当に新しいレイヤーに色を塗り、窓のクリッピングマスクに適用します。

後ほど花火を描いたら、それも反射させようと思います。

少しビルにデザインを足して、完成です！

さいごに

今回は大まかなビルの描き方をご紹介しました。

キャラもカラーにしたら、最終的に背景も描き込んでいくので、現段階ではざっくりと完成させていきます。

ビル群が完成したら次のブログでご紹介します。

次回は空と花火を描いていきます！

ではまた〜

ショートムービー作成その3_ダヴィンチでの雰囲気作り

どうも、エムイーです。

やはり小道具の話の続きではなかったです。

一応前回調べたものをちょこちょこ購入してはいるのですが、作るのには少し時間がかかりそうで...

ただ幸いショートムービーのくだりから脱線することはなかったということで、

今回はダヴィンチでの雰囲気づくりの話を進めていこうと思います。

まぁやっぱりムービー系作るならダヴィンチの質感がいいんすよね。

まだダヴィンチ使い始めてから歴は浅いですが、

1個の動画素材に施す色編集や質感を仕上げていく工程を紹介できたらと思うので、

ぜひ最後までご覧ください🎞️

取り扱う動画素材について

今回編集していく素材は、「紅花の物撮り映像」です。

季節が過ぎた少し枯れかけの紅花をフォーカスワークで見せるというめちゃくちゃシンプルな映像です。

カメラはSONYのα7Ⅳで、Log撮影を行いました。

埼玉県の桶川市で紅花を調達してきたのですが、自宅での撮影はそれはもう匂いが充満して大変でした。

（後に大量のリセッシュを吹きかけることに...）

これを黒い背景の上に乗せ、スポットライトに近い感じで青白いライトを当てて撮影。

撮影時の素材はこんな感じです（スクショにて失礼します）

まあ色調前のLogデータなのでこんな感じですね。

ここから色と質感を完成形に持っていきます。

ダヴィンチ作業でござ候

さあやって参りましたダヴィンチのお時間です。

ダヴィンチでは「ノード」と呼ばれるレイヤーのようなものにそれぞれ編集を施していき、

最終的な仕上がりを目指します。

わかりづらいのですが、今回は全14個のノードを使って作業しました。

1. コントラスト・露出

2. 全体の彩度

3. ホワイトバランス

4. クオリファイア

5. 色味を加える

6. 4で選択した部分のみ5を反映させない

7. 5と6が合体

8. 赤色の調整

9. 黄色・オレンジの調整

10. 緑色の調整

11. 8と9と10を合体

12. シャープネス

13. ミッドの調整

14. ノイズリダクション

文字に起こすとキモいですね。

ザッとですが流れの説明していきます。

◾️1~3：カラコレ

いわゆる元の色味に戻す作業です。

1で明暗を調整、2で全体の色を調整、3で色温度を調整し

目で見た時の色味に近しい状態にしています。

ちなみにこの後、色毎の調整を行う関係で2の作業は少し控えめにしています。

◾️4~11：各種色の調整

ここからがカラーグレーディングの工程です。

4のクオリファイアは、「選択した色味の部分のみを編集する」というものであり、

今回は花弁の部分を選択しています。

ここから5で冷たい感じを表現するために青色を加えているのですが、

6のように「レイヤーノード」を配置することで、花弁以外の部分に青色を加えることができます。

なんかブログに載せると発色が悪いですが、スポットの光の部分や葉っぱの影は結構青くなってます。

8~10では花びらと葉っぱの色味を個別に調整してる感じですね。

2で彩度を上げるのを控えめにしたのはこれが原因で、それぞれの花びらと葉っぱとの発色具合を変えたかったんですよね。

◾️12~14：エフェクトを加える

11までで全体の色味は調整できたので、あとは質感を調整していきます。

12では輪郭をはっきりさせるシャープネスを上げ、

13ではミッドという部分を下げて少しボワっとした見た目にし、

14でノイズリダクションをかけたという感じです。

（まあめちゃくちゃ暗くしたので、ある程度ノイズは乗っちゃいますけど...）

最後に

というわけで完成したのが、こちらの動画です！

紅花_ACG

今回時間の関係でノイズリダクションがかなり雑ですが、まあ今度ちゃんと仕上げますよ。

とりあえず1番の反省はやはり家の中で撮影したことですね。匂いすごかった。

それではまた次回！

motorcycle

無料プラグイン「saber」のチュートリアルを最近よく見ていて、使い方を学んだのでアニメーションに応用してみようと思いました。

Saberとは名前の通りSTAR WARS風のライトセーバーやレーザービームなどを作成するAfter Effectsのプラグインです。プリセットが豊富で光の表現が簡単にできます。

よくこんな感じのネオン看板ありますよね。アメリカのパブやモーテルなどのイメージです。

チュートリアルはテキストだったので、テキストをイラストに変えて作ってみようと思います。

Civitaiでは「neon」というキーワードで検索しました。サイバー都市やグローがかったアニメキャラがたくさん出てきましたが、アウトラインを発光させるモデルもありました。

できあがった画像がこちらです。

光らせたときに綺麗に発光してくれそうな気がしたのでメインはピンクと水色に、髪の毛は黄色（ブロンド）にしました。

左側に謎の模様がありますが、フォトショップで消します。

今回はバイクの画像を作成しましたが、イメージに近い画像が生成され一見問題ないように見えたとしても、よく見るとパーツが多かったり足りなかったりすることが多々あります。この画像も細かい箇所などは不正確です。趣味で使う場合には良いですが仕事で使うとなると適当にごまかしたりできない機械系や部品系の画像を生成するのは大変だろうなと感じました。画像を買った方が正確で結果的に安くつくと思います。

AfterEffectsではパーツに分けてマスクをかけました。

・ピンクの線

・水色の線

・黄色の線

・髪の毛

・体

ピンクの線

水色の線

髪の毛（髪の毛はアニメーションで時間差を作りたかったので一本一本マスクを分けました。あまり分からないですが…）

BGMからオーディオをキーフレームに変換し、Saber の End offset をオーディオ振幅のスライダー につなげます。ここでは両方のチャンネルを使用しています。

そうするとBGMに合わせてラインアニメーションが増減してくれます。

増減幅が少ないときには「*5」と追加すると5倍になります。

BGMに合わせて最初と最後のアニメーションを調整しました。

- YouTube

（CIVITAI　LoRA「WaterVFX - Create more consistent water - WIP」使用）

【Premiere Pro】丸ワイプの作り方｜セミナー動画でよく見るワイプの入れ方！

ディレクターの齋藤です。

セミナーや講義形式などの動画でよく見る、「丸ワイプ」の作り方を紹介します。

パワーポイントなどのスライド資料に講師の丸ワイプを重ねた画面です。

完成イメージはこちら！

今回は、代表的な4つの作り方をご紹介します。

1. マスクで切り抜く
2. エフェクトの「円」を使う
3. エフェクトの「トラックマットキー」を使う
4. PNGでワイプ部分を抜いた背景を作る

①「マスク」で切り抜く

エフェクトコントロールパネルの不透明度からマスクで切り抜く方法です。

この方法が一番簡単です。

不透明度の楕円形マークを選択

マスクのサイズと位置を調整

プレビュー画面で、マスクのサイズや位置を決めます。

Shiftキーを押しながら青の四角をドラックすると正円になります。

※青の選択がなくなってしまった場合は、エフェクトコントロールの「マスク」を選択すると再度表示されます

マスクの境界線のぼかしを「0」にする

スケールと位置を調整する

エフェクトコントロールの位置とスケールを調整します。

今回はスライドに被らない位置、右下に配置します。

②エフェクトの「円」を使う

旧エフェクトの「円」を使う方法です。

エフェクトパネルから「円」を検索し、クリップに適用

円のエフェクトを調整

エフェクトパネルから、描画モード「ステンシルアルファ」を選択

「半径」のサイズを変更して、切り抜く範囲を調整します。

「中心」の位置を調整します。

一番下のトラックにスライド画像を重ねて、完成です。

③エフェクトの「トラックマットキー」を使う

シーケンスにクリップを配置

このあと適用する「トラックマットキー」でトラックの指定をするため、

トラックを置く番号に注意してください。

エフェクト「トラックマットキー」を適用

エフェクトパネルから「トラックマットキー」をv2のスライドに適用します。

人物画像を配置

講師の画像を移動させて、先ほど切り抜いた円の中に配置

④PNGでワイプ部分を抜いた背景を作る

背景を丸く切り抜いておく方法です。

背景を切り抜いた画像をトラックのv2に配置します。

トラックのv1に人物画像を配置します。

トラックのv3にスライドのメインコンテンツのみ（文章やデザインをpngで透過書き出ししています）を配置します。

こうするとスライドのみの切り替えで良いので、セミナー動画などのスライドとワイプで見せる動画を作りやすいです。

まとめ

ここまで丸ワイプの作り方を紹介してきました。

たくさん方法はありますが、作りたい動画に合わせてお好みでやってみてください。

普段の案件では、④の背景透過の切り抜きpngを使用することが多いです。

記事だけでは説明しづらい、読んでいても分かりづらいなと感じます。

次回はこの内容をハウツー動画でご紹介できればと思います！

それではまた〜！

ひろらぼ！メインビジュアル完成までの道のり3〜完成編〜

ハルです。

前回に引き続き、このブログ「ひろらぼ！」のメインビジュアルのイラストについて書いていきます。

今回はついに完成編です！

早速ご紹介していきます〜

 

ペン入れ

前回のラフがこんな感じでしたね。

位置など調整してペン入れすると…

こんな感じになりました！

いよいよカラー作業に入っていきます。

カラーイメージ

カラーイメージは

・カラフルに

・でもパキッとしすぎない

・背景の砂漠はは海外風

・人物は小さくても目立つように

こちらを意識して色をつけてみます！

全体のバランスを見て細かいところを調整していきたいので、まずざっと全体に色をつけてみます。

 

カラー①

こんな感じでざっとカラーしてみました。

なんか、、悪くないけどって感じですね。

・空の色が浮いてる

・ロケットの色味が背景に負けてる

この辺りを調整しながら、

グラデーションを使って全体に陰影をつけてみたいと思います。

 

カラー②

①より全体にまとまりが出ました！

空もこれくらいグラデをつけた方が綺麗ですね。

でもまだペラっとしているような、、

目立たせたいキャラとロケットにもう少し陰影をつけてみます。

 

カラー③

ロケット、キャラ、背景も陰影をプラスしました！

いい感じ！ロケットが背景に馴染みつつも目立った感じがします。

満足できたので、こちらで完成〜🙌

 

さいごに

イラストをざっくり説明させていただきます🙇‍♀️

発射したものの、砂漠に不時着してしまったひろらぼロケット。

暑い中みんなで壊れてしまったロケットの修復作業中です。

はしごを登っているディレクターのカン。

メガホンでみんなを応援しつつ指示しています。

砂漠で宇宙服は暑そうです。

3階モニタールームにいるディレクターのリョー

複雑な機械を操作しながら、何か閃いたみたいです。

2階勉強部屋にいるカメラマンのエムイー

天体望遠鏡を覗いていると、何か見つけたみたいです。

1階ボイラールーム的なところにいるエディターのタカ

苦戦しながらも様々なツールを使いこなして、壊れた機械を修復しています。

外で剥がれたペンキを塗っているイラストレーターのハル

暑すぎてアイスの妄想をしています。

長くなってしまいましたが、今後もこのメンバーでお届けする「ひろらぼ！」をぜひ楽しんでいただけたら嬉しいです。

ではまた！