【実際にやって見た】アイコン作成gif動画

皆さん、こんにちは。

今回は、gif動画を作ってみたいと思います。lineのアイコンも動画(MP4)が使えるので、ご利用の方も多いですね^^。gif画像は、少し前の(?)規格なので、わざわざ利用しなくてもといった感じもありました。このサイトでもアバターを少しだけ動かすgif画像の作り方をご案内していますが、どうしても普段見慣れているアニメとは違っているので、目新しさはなさそうです><。
それでも、画像に再生ボタンの入らないスッキリ感やふんわり画像が入れ替わる形は、アニメのエンディングなどにも良く使われている手法です。

最近はアイコン作成もAIイラスト加工が出来る様になって、アバターをもう一つ上のクオリティーにする事が出来る様になりました。私もseaart aiと言うサイトでイラスト加工をやっていますが、中々良い感じです。そのseaart aiに動画機能がついて、試してみました。私がやっているのはimg2imgと言う画像から画像を加工するやり方ですが、AIイラストは良い感じに出来たのに、動画にすると良い所が出にくい感じがします。此処では、元画像を2枚だけ使って、イラスト加工の良い所を生かした動画を作ってみます。幾つかの工程で進んでいきますが、一つ一つの作業は簡単ですので、出来上がりもご覧頂きつつ、楽しみながらご覧頂けますと幸いです。

https://vroid.com/studio

最初は、元になるアバターを作っていきます。私は、一人のユーザーなので、よく分からない部分では有りますが、きっと沢山の方が利用されていると思います。アイテム配布・販売サイトのBOOTHには20025件のアイテム(2024 02,09現在)有りますが、一部VRCHRTと言うアイテムは使用出来ませんでした。(間違って購入したのは、私です…💦)それも、間もなく利用出来る様のなると情報が出ています。盛り上がって行きそうですね^^。

今回、利用させて頂くのは、此方のアイテムです。

爽やかな星空ワンピースです。無料が嬉しい事らのアイテムですが、.vroidcustomitemなので、ワンタッチ着用が可能です。アイテムページを見ますと、下半身インナー(ドロワーズ・ペチパン)も付いている様で、細かい配慮が感じられます。shopさんに伺いますと、まだ、このアイテム一つだけでしたが、沢山のスキリストに追加が付いていました。きっと、これから増えて行くと思います。

では、早速、着用していきます。

VRoidstudioを立ち上げてお顔・体形を作っていきます。img2imgを目的にしていますから、少しだけお顔が大きい方が良いかもしれません(少しだけ…💦)。

①②はどのページでも大丈夫ですが、此方のアイテムはカラーの変更が可能なので、ワンピースのページが便利が良いと思います。③カスタム④インポートでダウンロードしたファイルを選択します。

色々カラーが変更出来ますので下までスクロールしてご覧下さい。(ワンピース・カーディガン・)ドロワーズもボディスーツにして着用させてくれています。

アイテムはすぐに着されますが、実際に着てみると自分のアバターに合わないなと思ったら⑥プリセットの下の方にあるさらにアイテムを探すをクリックするとBOOTHにジャンプします^^。

出来上がりましたら上段の(最初は左側)から名前を付けて保存して下さい。今回は、衣裳アイテムが1種類でしたが、沢山になる場合は途中で保存したほうが良いかもです^^。ポーズアプリをお使いでしたら右のからVRMエクスポートします。

各ページから編集作業する際は⑤右のテクスチャーを編集から移動する事が出来ます。

https://www.photopea.com/

次は、出来上がったアバター画像の1枚をモノクロにします。Photopeaは無料で使用出来ますし、使い方もPhotoshopに似ていて覚えておいて損をしないです。また、彩度・コントラストの調整などワンクリックサイトでは出来ない事も有りますので、少し触れておくと良いと思います。

Photopeaを立ち上げたら①新規プロジェクト、今回は②アイコンなどにも使い易い1:1の比率(ユーチューブプロフィール)を選択しました。画面の右側に比率が分かるサンプルが出ていますので確認しつつ、サイズなどの問題が無ければ③作成をクリックします。

うめしげの一言

此処でモノクロにしたら、動画を作って、最後にgif画像に変換します。仕様サイズは、一番最後のgif変換の際に決めたら良いので、中間作業の間は、少し大きめにしておく方がやり易いと思います^^。

背景に画像を載せたら①上段の画像から②色調補正③自然な彩度で彩度を-100にするか④黒と白で④OK、どちらでも大丈夫です。④の方は細かい調整が出来て、カラー時のどの色を濃くするか変更が可能です。

赤やイエローのスライダーを大きく動かすと肌の色を変える事も出来ます。

これで、2枚内、1枚がモノクロになりました。

https://www.seaart.ai/

次は、カラーで使う1枚をイラスト加工して行きます。seaart aiにもワンクリックでイラスト加工できるクイックAIが有ります。無料会員は繰り越しが出来ないクレジットが1日150スタミナ(seaart aiクレジットの単位)貰えまして、1回に3枚セットで創作されますので、ある程度、チャレンジできます。

左からカラフルな羽根・水墨画風・淡彩です。右の淡彩は指がチョット怪しいですね💦。

次は、モデルを使ってイラスト加工してみます。img2imgという画像からイラストにする時にAIに指示する要素(seaart aiの場合)は4ッ種類で、元画像を載せた際にAIが自動で作ってくれるプロンプト(画像の内容を示すテキスト)・モデル・LoRA・コントロールネットです。

サイトに投稿された作品を見ますと、モデルは1種類しか使いえないのですが、沢山のLoRA(5種類まで使用可能)を使っている物も有ります。しかしながら、アバター画像を前提とするなら、大体はモデルのみでかなり雰囲気も変えられますし、余りあれこれやっていると、何処が良いのかが分かり難くなく感じがしています(私だけかな💦)

左がアバターの元画像、右の使用モデルはRaesanMix、ノイズ除去強度は0.35です。元画像は

背景を少しぼかしていますがその辺りも、上手く表現出来ましたし、髪色も表現出来ました。

此方がAIが作ったプロンプトです。

ピースサインを作る青い髪と青いドレスのアニメの女の子, fubuki, 黒髪の石田スイ, 短い青い髪の女性, 椎名林檎のアニメポートレート, 人差し指で, yayoi kasuma, カスマ弥生のヒント, ニコ・ロビン, サーファーモデルとしてのアスカ, 滑らかなアニメCGアート, yuuki hagure

https://jp.videoproc.com/videoprocvlogger.htm

次は、出来上がった2種類の元画像を一旦MP4形式の動画にしていきます。gif画像を作ろうとしているのに、どうしてMP4にする必要があるのかと言いますと、gif画像は、1枚づつの画像を繋げて動画にしていますが、画像と画像の間に効果(トランジション)を入れる事ができません。

瞬き動画の様に少ない動きで表現出来るの物は大丈夫ですが、今回の様に間にフワッとした効果を入れようとする場合、一旦MP4にする必要があります。

今回、使用させて頂いておりますVideoProc Vloggerは無料の動画作成アプリです。

此方の会社が販売しているVideoProc Converter AIと言うアプリの廉価版の様な感じだと思います。動画編集をしっかり楽しみたい方には、足りない機能が有るかもですが、今回の使用用途に関しては、十分な機能で無料利用が可能です。

それと、無料版に有りがちな有料版へのしつこい(すみません)勧誘がアプリ立ち上げ時の1回だけで

好きなのです^^。

うめしげの一言

この方法は、私なりのやり方で、そのままMP4を使用した方が早いのでは?とか、ご意見が有るかもです。一つの作例としてご案頂きまして、皆さん、其々の最適解でご利用下さい。

使い方は、シンプルです。サイトからアプリをダウンロードしたら、インストールして立ち上げます。

最初に1回だけ登録しませんか?と言うメッセージが出ます。私は毎回無視して✖を押していますが

いままでそれで不具合になった事は、有りません。新規プロジェクトを選択して、此方の編集画面に切り替わりましたら、の部分に2枚の画像を持って来ます。最初は、表示が①になっていますので、②1番がモノクロですからそれからカラーの順番で並べます。各画像をクリックしますと長さの調整が出来ます。今回は、全体の長さを2秒にしてみました。(seaart aiのショート.vrと同じ長さです)

次にトランジション③今回はポピュラーなクロスフェード(ふんわりと入れ替わる感じ)を選択しました。長さは、全体の3分の2程度、部分の赤線を動画を開始したい場所に移動して⑨の再生ボタンを押すと再生が始まります。此処では、大まかな感じだけを決めていけば大丈夫です^^(Photopeaで調整が出来ます)⑤でっサイスを決めて⑥今回はインスタ用の1080X1080にしています。⑦完了。⑧最後に書き出したら、ここでの作業は、終了です。使用する枚数も少ないので、慣れれば2~3分で出来ると思います。

次は、いよいよ最後の工程です。gif動画を作ります。此処で、ご案内するブーメラン動画は、インスタグラムのブーメラン動画とは、少しイメージが違うと思います。見かけるインスタブーメラン動画は対象の物が行ったり来たりを繰り返す感じですね。

ここでの再生方法は、画像が2枚の場合、通常1番2番1番2番の順番で再生されますが、1番2番2番1番順で再生されます。それによって、動きが滑らかになるのです。

では、実際に作業してみます。作業自体はいたって簡単です^^。

最初に、photppeaを立ち上げて、先程作ったMP4画像を持って来ます。小窓(Set FPS)が出て、10と言う数字が入っています。1秒間に10枚で良いですか?と聞いていますので、OKで良いです。数字を大きくする程、1秒間の枚数が多くなっていきます。画像として重たくなりますので、そのまま行って頂き、慣れて来たら、色々、試してみると良いと思います。

ファイルの名前について、触れておきます。最初に10FPSにしていますので2枚分で20枚のファイルになりました。赤い下線_a_20、97と書かれています。_a_はphotopea内での動画の印です(これが無いとgif保存できません)20がファイルの通し番号、最後の97がファイルの長さを表しています。

ファイル名をダブルクリックすると、名前を変更出来ますので、97を大きい数字に変えますとそのファイルが長く表示されます。

MP4ファイルですと動画の長さが大きくなるとファイル全体が大きくなって重たくなりますが、gif画像の場合はファイルの数が増える訳では無いので、全体の重さに影響しないのも良い所です。

今回の動画は、97を3000にしています。良ければ参考になさって下さい。

②上段のファイルから③別名で保存④GIFと進みます。別窓がでて、動画が動いていますので、雰囲気を見て下さい。⑤大きさなどを決めたらboomerang(ブーメラン)に✔を入れますと動画が開始位置に戻らず終了位置から再生が始まります。

問題が無ければ⑥保存をクリックしますと画像がダウンロードされます。

うめしげの一言

photopeaは、Photoshopと違って作業をクラウド上で行っている物が有ります。新しいフォントの導入や画像に対する特殊効果のフィルター処理、このgif動画の処理もそうだと思います。

ファイルの長さ調整に数字を入れ替えたり、その他の効果も実際のプレビュー画面に反映してくるのに少し時間が掛かる場合が有りますし、ファイルの長さ調整は別窓を再度読み込んだ方が、わかりやすいと思います。

1回やって見ると、数字の変更具合が分かったりしますので、次回からはずっと早くなると思います。

最後に、瞬き動画も作ってみた

seaart aiのimg2imgを使って、瞬き動画を作ります。実際のアニメの動きとまではとても届きませんが、アバターの瞬き動画よりは、クオリティーが上がったかな💦と思っています。

アバターを作って、AIイラスト加工をしてきましたが、少しだけ動きも付けてみて、皆さんが作成する際のヒントになれば幸いです。

大まかな流れは、seaari aiで目を閉じている・半分閉じている・閉じているの3種類の画像を作ります。全く同じ画像は出来ないので、背景をカットしてphotopeaで合わせたら、gif画像にするといった流れです。

seaart aiに有りますAIフェイススワップを利用出来ないかとやって見ましたが、現状では上手くいかない様です。

うめしげの一言

AIフェイススワップですが、photppeaの様な画像編集アプリでやる様な画像を合わせる手法ではなく、一旦AIに取り込む感じなので、今回の思惑に合わず、結果が出ませんでした><。

目の部分をアップにした物ですが、最初にアバターで3種類の画像を作ります。次にimg2imgを使って、同じ様に3種類の画像を作ります。目を半分閉じている画像がもっとうまくいかないかなと思いましたが、各画像とも3枚セットX2回(合計6枚)の中から選択出来ました。

ノイズ除去強度を上げ過ぎると、元画像と雰囲気が大分変って来るので、瞬き画像には使い難くなりましたので0.3~0.35の間で使った方が良いと感じました。

うめしげの一言

ページ最初のフワッと動画よりも少し手間が掛かるのですが、こんな事も出来るんだと言った感じで見て頂けると幸いです。最初は、作業を簡単にする為に、目を開けている物・閉じているの2種類でもやって見ました。しかしながら、開けている・閉じているの2種類だと動きに不自然さが出た気がして、3種類のこの形に落ち着いています。

皆さんの作ったアバターがさらに進化出来ます様に、そんな参考になれば幸いです。

おつかれさまでした。

コメント

");const o=ie?ie.createHTML(e):e;if(nt===tt)try{t=(new W).parseFromString(o,at)}catch(e){}if(!t||!t.documentElement){t=le.createDocument(nt,"template",null);try{t.documentElement.innerHTML=ot?ae:o}catch(e){}}const i=t.body||t.documentElement;return e&&n&&i.insertBefore(r.createTextNode(n),i.childNodes[0]||null),nt===tt?ue.call(t,Ie?"html":"body")[0]:Ie?t.documentElement:i},bt=function(e){return ce.call(e.ownerDocument||e,e,H.SHOW_ELEMENT|H.SHOW_COMMENT|H.SHOW_TEXT|H.SHOW_PROCESSING_INSTRUCTION|H.SHOW_CDATA_SECTION,null)},St=function(e){return e instanceof B&&("string"!=typeof e.nodeName||"string"!=typeof e.textContent||"function"!=typeof e.removeChild||!(e.attributes instanceof z)||"function"!=typeof e.removeAttribute||"function"!=typeof e.setAttribute||"string"!=typeof e.namespaceURI||"function"!=typeof e.insertBefore||"function"!=typeof e.hasChildNodes)},Rt=function(e){return"function"==typeof b&&e instanceof b},wt=function(e,t,n){pe[e]&&u(pe[e],(e=>{e.call(o,t,n,ut)}))},Ct=function(e){let t=null;if(wt("beforeSanitizeElements",e,null),St(e))return _t(e),!0;const n=st(e.nodeName);if(wt("uponSanitizeElement",e,{tagName:n,allowedTags:Ne}),e.hasChildNodes()&&!Rt(e.firstElementChild)&&_(https://b-ume.net/<[/\w]/g,e.innerHTML)&&_(https://b-ume.net/<[/\w]/g,e.textContent))return _t(e),!0;if(e.nodeType===J)return _t(e),!0;if(Me&&e.nodeType===Q&&_(https://b-ume.net/<[/\w]/g,e.data))return _t(e),!0;if(!Ne[n]||Ce[n]){if(!Ce[n]&&Dt(n)){if(we.tagNameCheck instanceof RegExp&&_(we.tagNameCheck,n))return!1;if(we.tagNameCheck instanceof Function&&we.tagNameCheck(n))return!1}if(Ye&&!qe[n]){const t=re(e)||e.parentNode,n=oe(e)||e.childNodes;if(n&&t){for(let o=n.length-1;o>=0;--o){const r=X(n[o],!0);r.__removalCount=(e.__removalCount||0)+1,t.insertBefore(r,$(e))}}}return _t(e),!0}return e instanceof R&&!Et(e)?(_t(e),!0):"noscript"!==n&&"noembed"!==n&&"noframes"!==n||!_(/<\/no(script|embed|frames)/i,e.innerHTML)?(ke&&e.nodeType===Z&&(t=e.textContent,u([fe,de,he],(e=>{t=g(t,e," ")})),e.textContent!==t&&(p(o.removed,{element:e.cloneNode()}),e.textContent=t)),wt("afterSanitizeElements",e,null),!1):(_t(e),!0)},Lt=function(e,t,n){if(Be&&("id"===t||"name"===t)&&(n in r||n in mt))return!1;if(ve&&!Le[t]&&_(ge,t));else if(De&&_(Te,t));else if(!Se[t]||Le[t]){if(!(Dt(e)&&(we.tagNameCheck instanceof RegExp&&_(we.tagNameCheck,e)||we.tagNameCheck instanceof Function&&we.tagNameCheck(e))&&(we.attributeNameCheck instanceof RegExp&&_(we.attributeNameCheck,t)||we.attributeNameCheck instanceof Function&&we.attributeNameCheck(t))||"is"===t&&we.allowCustomizedBuiltInElements&&(we.tagNameCheck instanceof RegExp&&_(we.tagNameCheck,n)||we.tagNameCheck instanceof Function&&we.tagNameCheck(n))))return!1}else if(Ze[t]);else if(_(Ae,g(n,Ee,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t||"script"===e||0!==T(n,"data:")||!Ke[e]){if(Oe&&!_(ye,g(n,Ee,"")));else if(n)return!1}return!0},Dt=function(e){return"annotation-xml"!==e&&h(e,_e)},vt=function(e){wt("beforeSanitizeAttributes",e,null);const{attributes:t}=e;if(!t)return;const n={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:Se};let r=t.length;for(;r--;){const i=t[r],{name:a,namespaceURI:l,value:c}=i,s=st(a);let p="value"===a?c:y(c);if(n.attrName=s,n.attrValue=p,n.keepAttr=!0,n.forceKeepAttr=void 0,wt("uponSanitizeAttribute",e,n),p=n.attrValue,n.forceKeepAttr)continue;if(At(a,e),!n.keepAttr)continue;if(!xe&&_(/\/>/i,p)){At(a,e);continue}if(Me&&_(/((--!?|])>)|<\/(style|title)/i,p)){At(a,e);continue}ke&&u([fe,de,he],(e=>{p=g(p,e," ")}));const f=st(e.nodeName);if(Lt(f,s,p)){if(!We||"id"!==s&&"name"!==s||(At(a,e),p=Ge+p),ie&&"object"==typeof G&&"function"==typeof G.getAttributeType)if(l);else switch(G.getAttributeType(f,s)){case"TrustedHTML":p=ie.createHTML(p);break;case"TrustedScriptURL":p=ie.createScriptURL(p)}try{l?e.setAttributeNS(l,a,p):e.setAttribute(a,p),St(e)?_t(e):m(o.removed)}catch(e){}}}wt("afterSanitizeAttributes",e,null)},Ot=function e(t){let n=null;const o=bt(t);for(wt("beforeSanitizeShadowDOM",t,null);n=o.nextNode();)wt("uponSanitizeShadowNode",n,null),Ct(n)||(n.content instanceof s&&e(n.content),vt(n));wt("afterSanitizeShadowDOM",t,null)};return o.sanitize=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=null,r=null,i=null,l=null;if(ot=!e,ot&&(e="\x3c!--\x3e"),"string"!=typeof e&&!Rt(e)){if("function"!=typeof e.toString)throw A("toString is not a function");if("string"!=typeof(e=e.toString()))throw A("dirty is not a string, aborting")}if(!o.isSupported)return e;if(Ue||ft(t),o.removed=[],"string"==typeof e&&(je=!1),je){if(e.nodeName){const t=st(e.nodeName);if(!Ne[t]||Ce[t])throw A("root node is forbidden and cannot be sanitized in-place")}}else if(e instanceof b)n=Nt("\x3c!----\x3e"),r=n.ownerDocument.importNode(e,!0),r.nodeType===V&&"BODY"===r.nodeName||"HTML"===r.nodeName?n=r:n.appendChild(r);else{if(!Fe&&!ke&&!Ie&&-1===e.indexOf("<"))return ie&&ze?ie.createHTML(e):e;if(n=Nt(e),!n)return Fe?null:ze?ae:""}n&&Pe&&_t(n.firstChild);const c=bt(je?e:n);for(;i=c.nextNode();)Ct(i)||(i.content instanceof s&&Ot(i.content),vt(i));if(je)return e;if(Fe){if(He)for(l=se.call(n.ownerDocument);n.firstChild;)l.appendChild(n.firstChild);else l=n;return(Se.shadowroot||Se.shadowrootmode)&&(l=me.call(a,l,!0)),l}let m=Ie?n.outerHTML:n.innerHTML;return Ie&&Ne["!doctype"]&&n.ownerDocument&&n.ownerDocument.doctype&&n.ownerDocument.doctype.name&&_(q,n.ownerDocument.doctype.name)&&(m="\n"+m),ke&&u([fe,de,he],(e=>{m=g(m,e," ")})),ie&&ze?ie.createHTML(m):m},o.setConfig=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};ft(e),Ue=!0},o.clearConfig=function(){ut=null,Ue=!1},o.isValidAttribute=function(e,t,n){ut||ft({});const o=st(e),r=st(t);return Lt(o,r,n)},o.addHook=function(e,t){"function"==typeof t&&(pe[e]=pe[e]||[],p(pe[e],t))},o.removeHook=function(e){if(pe[e])return m(pe[e])},o.removeHooks=function(e){pe[e]&&(pe[e]=[])},o.removeAllHooks=function(){pe={}},o}();return oe}))
タイトルとURLをコピーしました