バナー作成時に使えるaviutlの機能 クリッピング編









カタカタこんばんはメンダコ












本日は毎週恒例になりつつあるバナー作成時に使える機能の紹介となります(´∀`)今回で終わりそうですが






相変わらずところどころ抜けている部分が多々あるとは思いますが、深く考えずにこういうことも出来るんだなー程度に見て頂けると幸いです。






というわけで早速書いていきます(・ω<)





















クリッピング





クリッピング1











この機能は指定した画像や動画の映っている範囲に選択した画像を表示するといった機能です。









aviutlの場合選択(右クリック)した画像を上のオブジェクト(画像や動画ファイル)の映る範囲内に表示するといった形になります。









例を挙げると、










クリッピング2

クリッピング3







ここに円(上の青帯)と前回使用した画像(下の青帯)があるわけですが、
















クリッピング4







ここで前回の画像を右クリック→上のオブジェクトでクリッピングと操作すると、


















クリッピング5









円の映っている範囲内にのみ選択した画像が表示されるといった形になります(´∀`)









これを利用すると文字のある範囲内にのみ画像を映すといったことも可能となり、














nanaGIF1.gif








文字を上下に動かすと格ゲー等で見かけるシーンを作ることが出来たりします(´∀`)
















そしてこの機能を利用してシルエット系の演出をすることも可能であり、













クリッピング6






適当に用意した空の画像を下に置いて上のオブジェクト(前回の画像)でクリッピングしてあげれば、















クリッピング7








このように空の背景のシルエットにすることが可能です(´∀`)
















ただしここで注意点があり、透明でない部分は画像として扱われるという点です。










クリッピング8






つまりこの状態でクリッピングすると、












クリッピング9






こうなるわけです。













ここで前回の記事で紹介した機能であるクロマキー緑色の部分を透明化してからクリッピングすると、



クリッピング10












クリッピング11







こうなるわけです。















そして当然ながらこの機能も動画に使用することも可能であり、
























この動画をamareccoアイコン cravingexplorerアイコンで撮影orDLし、











魔界村背景1







こんな感じの画像を用意し、













クリッピング12

クリッピング13






DLした動画をぶち込む&クロマキーで青の背景を透明化し、














クリッピング14







用意した画像を動画の下に置き上のオブジェクト(動画)でクリッピングしたのち前回と同じ手順で保存&GIF化してあげれば、






















クリッピングGIF1







どこかで見かけたことがあるかもしれない超絶手抜きGIFが完成です(ゝω・)v











※ブログの2M制限の都合で短縮&画像の範囲を削ってあります












ちなみにこの動画のようにキャラのみを切り取った単色背景の動画や画像をBB(ブルーバック)素材と言います。





GB(グリーンバック)やPB(ピンクバック)といったものもありますが、クロマキー等によって透明化する際キャラに同じ色が使われているとその部分も消えてしまうことを避けるためなだけで同じものと考えてOKです。





これらの素材は1コマづつ画像を切り抜かないといけない都合上極めて作成には多大な時間を要し、自力で作成するのは極めて困難です。





なのでこういった素材が欲しいといった方は職人や変態の方が作成&UPしてくれるていることを祈りましょう。


















とまぁ以上でクリッピングに関する説明は終了です。





aviutlの機能もまだクロマキーとクリッピングについての説明しかしていませんが、このたった2つの機能だけでもかなり色々なことに使えることが分かったかもしれません(不安気)





この2つの機能だけでもバナー作成においてはかなり有用ですし、いい素材があるなら(重要)これだけでも充分見栄えのあるバナーを作ることが可能です。





aviutlの操作に慣れるまでは大変かもしれませんが慣れてしまえば色んなことが出来るようになるので、興味のある方は是非一度aviutlに触れてみてくださいませ。










といったところで今回の誰得バナー作成講座は終了です。

それではまた次回の記事にてお会いしましょう。







スポンサーサイト

バナー作成時に使えるaviutlの機能 クロマキー編









カタカタこんばんはメンダコ












今日は先週書いた通り、バナー作成時に使用しているツールの機能紹介を書いていこうかと思います(´∀`)








正直専門用語の意味は欠片も理解せずに使っているので、これを使えばこんなことが出来る程度の記事になりますが予めご了承くださいませ。













また、この記事はGIMP2、aviutl、の2つのツールをDL&インストールが完了(無料)していることを前提に書いていきます。










と前置きが終わったところで早速説明してきます(´∀`)









何かしら問題が発生した場合この記事は消滅します




















クロマキーについて










前回のツール紹介で紹介したaviutlの機能の一つであり、






一言で言ってしまえば同系色を透明化する機能です。










白なら白、赤なら赤、黒なら黒といったように同じ系統の色を透明化することが出来ます。






そしてこの機能を利用することによって背景を透明化することが可能となります。


















ちなみに透明化する理由は普通に編集しようとすると画像の背景のせいでキャラ等が完全に被ってしまうからです。


aviutl01.png



※一例










ここで背景部分を透明化することによって画像が被らないようにし、バナー作成の素材として使えるようにするわけです。


aviutl03.png



※細部(髪の部分)をミスってますが面倒なので放置します(・ω<)












とまぁ文だけ書いても分かりづらいと思いますので例を挙げつつ実践していきます。





















1.まず適当に画像を用意します


nana-1.jpg

kanon2.jpg





※画像はバナー映えするものをチョイスしただけで他意はないです本当です

















2.透明化したい部分を画像に使われていない色で塗りつぶします。


nana0-1.jpg

kanon1-0-0-0.jpg








※塗りつぶす際はペイントだと上手く塗れないことが多いのでGIMP2等の塗りつぶしを使用してください


















3.aviutlでクロマキーを使用







aviutlアイコン

aviutl4.png








aviutlを起動して塗りつぶした画像を拡張編集のウィンドウにドラッグしてぶち込みます。







※拡張編集が表示されていない場合は設定→拡張編集の設定で表示されます
















aviutl05.png







その後画像ファイルウィンドウ(拡大率などの編集ウィンドウ、出ていなければ左の青帯をダブルクリックで表示できます)+の部分をクリック。













aviutl06.png







クロマキーを選択。













aviutl07.png







キー色の選択をクリック。












aviutl08.png







透明化したい色、今回の場合緑の部分を適当にクリック。

















aviutl09.png








透明化完了。












これと全く同じ手順でもうひとつの画像も透明化し、その後好きな背景を適当にぶち込めば、




















aviutl11-1.png








なんかそれっぽいバナー的なものが完成です(´∀`)















aviutl10.png


aviutl12.png










ちなみに拡張編集の青帯(オブジェクト)は上に行くほど奥にあり、下に行くほど手前になります。






なので背景を下に持っていくと背景が前面に出てキャラが隠れるので背景にしたいものは上に持っていきましょう。









また、画像ファイルウィンドウのXは左右Yは上下を示しており、数字をドラッグするなり入力するなりすれば画像の位置を調整できます。





ちなみにメインウィンドウの画像そのものをドラッグして動かしたほうが直接上下左右に移動出来るので楽かと思われます(動かす際は先に動かしたい画像の青帯(オブジェクト)をクリックしてください)





あとは拡大率を程よく調節してあげればOKですが、拡大率は画像ファイルウィンドウの拡大率の数字を入力ではなくドラッグしたほうが直感的に調整出来るので便利です。
















とまぁ予想より遥かに長くなってしまったのですが、手順を簡単にまとめると、


















1.背景の色が統一されている画像を用意





2.GIMP2にぶち込んで背景(透明化したい部分)を画像に使われていない色で塗りつぶす





3.aviutlにぶち込んでクロマキーで塗りつぶした色を指定

















といった操作のみで透明化は完了です。





後は拡大率で大きさの調整、位置の調整をして背景等と合わせれば簡単ではありますがバナーが完成です。









この機能はaviutlだけでなく他の画像編集ソフトでも可能ではあるはずなのですが、自分はaviutlが一番使いやすい上にGIFバナーを作る上でも使うことになるので一番重宝しております。





aviutlは文字の入力も可能であり尚且つ様々なエフェクト(発光、シャープ、ワイプ、マスクetc)
を付加することが可能なので、使い慣れてしまえばかなり便利な無料ツールだと思います。















そしてこのクロマキーは動画にも使用することが可能であり、






















こちらの動画を前回紹介したツールでDLし、


amareccoアイコン   cravingexplorerアイコン










aviutl13.png


aviutl15.png








画像と同じ手順でaviutlにぶち込む

    ↓

クロマキーで青い背景指定で透明化

    ↓

適当に背景画像をチョイス、画像と動画の拡大率&位置調整

    ↓


ここから本日初の操作


拡張編集の青帯(オブジェクト)の長さ(今回の場合画像側)を動画の青帯の長さに合わせる

    ↓

青帯の終点の付近に赤い縦線が来るように青帯以外のところをクリック(ドラッグ)してから右クリック→範囲設定→現在位置を最終フレームを選択

    ↓

ファイル→AVI出力を選択し動画を保存


    

    ↓

保存した動画を前回紹介したvirtualDubにぶち込みFile→Export→animated GIF→OKの順にクリックしてGIF化


virtualdubアイコン












といった手順を踏んで出来上がったのがこちらです。



屋上えま1












操作方法さえ覚えてしまえばこの程度は数分(素材集めに掛かる時間を除く)で作れますし、GIFに関してもやってること自体は酷く単純(ほぼ基本操作のみ)なので誰でも簡単に作ることが出来ます。






ただ書いてみて分かったのですが地味に単純な操作でも積み重なると複雑になってしまうこともあり、実際に体験して覚えていかないことにはどんなものか分からないと思います。






説明する側が下手すぎるのも原因ですが。






案ずるより産むが易し、百聞は一見に如かずとはよく言ったもので、まさにその通りだと思います。















とまぁクロマキーを使って簡単にバナー作成や動画作成が出来ることをお伝えしたかったものの上手く出来ませんでしたが・・・





ひとまず今回のクロマキー編はこれにて終了にしようかと思います。





実際にやってみると最初は直感的に操作するのが少々難しいとは思いますが、慣れればサクサク作業することが出来るので興味が湧いた方がおりましたら時間のある時にでもaviutlに触ってみてください。





それではまた次回の記事にてお会いしましょう。








バナー作成時に使う編集ツール 紹介編











カタカタこんばんはメンダコ











今日は稼働記事ではなく、タイトルにも書いてありますが編集ツールの紹介記事となります。








何故突然こんなことをやろうかと思ったかと言うと、初心者版GIFバナー作成講座(初心者=自分のこと)を書こうと思ったもののどこから説明していけば良いか分からなくなったからです(゚∀。)







ツール導入部分から作成方法まで順々に書いていくともれなく稼働記事5回分以上になると思われるので、それならツールの紹介をして導入部分をすっ飛ばしてしまおうと考えたわけです(^q^)














というわけで普段使用している編集ツールの紹介、及びよく使う機能の紹介をしていきます。







ちなみに本記事によってトラブルが生じた場合当方はそれに関して一切責任を負いませんのでご注意ください。(テンプレ)

























・VirtualDub







virtualdubアイコン










一言で言ってしまえば動画をGIF化するツールです。









起動→起動したウィンドウに動画をドラッグしてぶち込む→File、Export、animated GIF、OKの順に操作するだけで動画をGIF化できる優れものです。






自分がGIFバナーを作成する際に必ず使っているのがこれで、極端な話動画さえあれば即GIF化することが可能です。






GIF化した後はブログにアップロード→バナーのhtml?にURLを入れてサイズを調整すればGIFバナーの完成というわけです。











つまり自分が作成しているのはGIFバナーというより動画であり、動画を作成→このツールでGIF化してバナーとして使用しているというわけですね(´∀`)










このツールでも容量を調整する方法が幾つかあるかもしれませんが、自分は使い方をよく分かっていないのでGIF化以外の機能は使ってないです。





















とまぁこれだけでも確かにGIFバナーを作成することが可能ですが、当然動画が無ければ話にならないので動画撮影ツール、DLツールの紹介へ移ります。























・アマレココ(AmaRecCo)、Craving Explorer





amareccoアイコン   cravingexplorerアイコン






前者は動画撮影ツール、後者はニコ動やyoutubeから動画をDL出来るようになるツール(ブラウザ)です。













前者は簡単に言えばカメラのようなもので、カメラを固定して動画を撮影するのと同じだと思えばOKです。





デスクトップ全体を指定して作業風景を撮影することも可能ですし、ニコ動の再生画面の部分だけ指定して動画を撮影することも可能です。











そして後者はニコ動やyoutubeから動画そのもの、もしくは音声のみをDLすることが可能(ニコスクリプトで作成されたものを除く)なブラウザです。





動画をDLする際にはAVI、WMV、MP4といったように拡張子を選択することができ、編集する際にはAVIファイルを使用することが大多数なのでこちらも重宝します。






GIFバナー作成時には様々な動画が編集のヒントになったりそのまま使うことも出来たりするので、どちらのツールも使用頻度はかなり高いです。








ちなみにどちらのも共通することですが、著作権に違反しない範囲でDL、使用するように注意してください。

















さて動画撮影&DLツールの紹介が終わったところで次は編集ツールの紹介です。





















・ペイント、GIMP2、aviutl




gimpアイコン     aviutlアイコン












ペイントは説明不要ということで省きますが、GIMP2は画像編集ツールaviutlは動画編集ツールです。











GIMP2かなり多機能な画像編集ツールなのですが、自分は全く使いこなせないので塗りつぶし程度にしか使用しておりません(^q^)







しかしこの塗りつぶしがかなり重要で、同じ色に見えてよく見ると違う色で上手く塗りつぶしができないといった場合もしきい値を調整することで塗りつぶすことが出来ます。






これによって塗りつぶした部分のみを透明化することが可能となります。






ちなみに背景の透明化はGIMP2でも出来るようですが自分は何度やっても上手くいかなかったので別のツールでやっています。











そしてaviutl動画編集ツールであり、GIFバナー作成時、画像編集時に最も良く使用するツールです。










動画の各シーンの切り抜き、長さ、サイズの調整、エフェクトの追加&作成、画像のサイズ、色調補正、文字の追加、背景の透明化などなどほとんどの編集をこれだけで行っています。






普段ブログに使用しているスロットの画像はペイントでサイズ調整&適当に映り込みを消していますが、バナー関連の編集はほぼ全てこのツールです。











動画編集だけではなくクソコラ画像編集にも重宝しますし、GIMP2とaviutlがあれば静止画バナー作りにも大いに役立ってくれるかと思います。




















といった感じで普段使うツールの紹介でした。






今回は紹介編ということで紹介のみでしたが、次回はこれらを使ったバナー作りについても書いてみようかと思います。





といっても説明下手な自分が書いても全く伝わらない可能性が高いですが・・・





もし時間に余裕が出来ればバナー作りを広めるためにもちょこちょこと書いてみようかと思います。












需要は皆無かもしれませんけどね(ボソリ











といったところで本日の記事は終了です。


それではまた次回の稼働記事にてお会いしましょう。








プロフィール

すしの人

Author:すしの人
スロットや麻雀、ゲームが好きなすしの人と申します。
基本的に面倒くさがりで思いつきで行動することが多いですが生暖かい目で見守って頂けると幸いです。
ちなみに収支はフィクションです。
また本ブログで使用されている「円」はえんではなくまどかです。

最新記事
最新コメント
カレンダー
01 | 2017/02 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 - - - -
月別アーカイブ
カテゴリ
ナマモノカウンター
収支表
2012年
7月 +387700
8月 +436700
9月 +337900
10月 +496600ブログ開始
11月 +730400
12月 +686600
2012年合計+3075900

2013年
1月 +564600
2月 +586600
3月 +559300
4月 +549900
5月 +215100
6月 +382700
7月 +506700
8月 +570300
9月 +468400
10月 +355200
11月 +187000
12月 +530400
2013年合計+5476200

2014年
1月 +639000
2月 +117600
3月 +552200
4月 +438700
5月 +234300
6月 +176760
7月 +117540
8月 +525000
9月 +300600
10月 +237800
11月 +128580
12月 +298980
2014年合計+3767060

2015年
1月 +100890
2月 +454142
3月 +101624
4月 +79584
5月 +230363
6月 +371516
7月 +342416
8月 +288659
9月 +267469
10月 +202317
11月 +376580
12月 +586382
2015年合計+3401942

2016年
1月 +337072
2月 +330657
3月 +63972
4月 +105563
5月 +308534
6月 +478029
7月 +3403
8月 +159000
9月 +305406
10月 +188501
11月 -460円  ←new!
12月 +296
2016年合計+2279973
相互リンク
押忍!サラリーマン番長
北斗の拳 神拳勝舞
ファンタシースターオンライン2
検索フォーム
リンク
ブロとも申請フォーム

この人とブロともになる