gifでかっこいい瞬き男子で動くアイコンを作ってみた

皆さん、こんにちは。

今回の動くアイコンは、かっこいい瞬き男子です。

AIと言う言葉が、沢山聞こえてくるようになって、いろいろな方面で使われています。このサイトで、ご案内しているイラストやアイコンに関しても、沢山の作成サイトがあって選択が大変です💦。

凄く、研究しています!と言うほどでは無いですが、著名な物を見たり、サイトに行って使てみたりしますと、どうしてもPCですと、ある程度のスペックを求められたり、ジェネレーターサイトですと、月額料金が発生したりして、気軽に使うには、ハードルが高めなのかな^^と感じています。

ここでは、気軽に出来る範疇で、最近、よく見るAIイラストを動かしてみようと思います。瞬きは、最初に作る動画のスタート地点みたいな物だと書かれている有名なアプリも有りました。無料で、AIイラストを作って、もう少し、個性をアピールしてみませんか^^。サクッとは、いきませんがサンプルもご覧頂き、おっ!と思ったら始めてみて下さい^^。

VRoid Studio
3D創作を誰でも楽しめる世界へ。VRoid Studioは3Dキャラクター制作ソフトウェアです。はじめての人にはかんたんに、慣れた人はよりこだわって、3Dキャラクターを作ることができることができます。

私も男性ですし、女性を作ったら是非男性も!と言う意識があるのですが、BOOTHで新作の衣装アイテム無いかなと探して見ますと、なかなか見つかりません💦。ゲーム内でも、中身の人は男性でも女性キャラクターは有る有るですが、リアルが女性で男性キャラクターは少ない気がして…、気持ちの問題でしょうか^^。今回は、此方のアイテムを利用させて頂きました。

新・執事服フルセットと書かれていますが、燕尾服も使用しない形が可能ですので、カチッとした感じから、少しカジュアルな普段着っぽい感じまで使える便利アイテムだ思います。しかも無料配布で、着用も簡単ワンクリックな.vroidcustomitem形式です。

うーさんの一言

BOOTHに行きますと、沢山のアイテムが有って迷う事も有ると思いますが、VRoidstudioを使い始めたばかりの頃は、説明文を読んで.vroidcustomitem形式を選ぶと良いです。着用がワンクリックなのと、パラメーターと言われるアイテムの微調整部分も作者さんがモデルに合わせて調整済の状態で着用が可能です。(作者さんのモデルと皆さんが作ったアバターの体型に大きく違いが有ると、調整が必要な場合が有ります💦)

shopさんに伺ってみますと、男女問わず、沢山のアイテムが並んでいました。中には、チョット、持っておいたら後から役立つアンダーウェアーやトップスなども無料で配布されていましたので、一度、覗いてみると良いです^^。

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

着用前の注意点

①:配布サイトから、3種類の.vroidcustomitem形式ファイルをダウンロード出来ますが、ネクタイとウィングカラーの執事服は、どちらかの選択になります。お好きな方を選んで下さい。

②:手袋を使用しない場合の着用には、肌マスクが必要になります。(しない方法もご案内しています^^)

肌スキンもBOOTH内で、いくつか配布・販売されています。スイムウェアーを着る場合ですと、見える部分が多いので、お好みで販売アイテムの購入も有りだと思いますが、今回の様に一部を補足する感じですと、此方のアイテムが無料ですし、利用しやすいです。

shopさんに伺いますと、同じく無料アイテムの女性用も有りました。衣装アイテムを着用していて、困ったら、是非、ご利用下さい。

今回は、全て.vroidcustomitem形式なので、①②は此処でなくても大丈夫です。アプリが自動的に振り分けてくれます。③カスタム④インポートと進んで、ネクタイかウィングカラーのどちらか(両方インポートしても大丈夫です)とズボン・手袋・靴(纏まっています)の2種類のファイル(すべてインポートすると3種類)をインポートします。

レイヤーの数は多いですが、丁寧に名前が付いていますので、それに従っての部分を調整して下さい。私は、今回ネクタイ上着なしでカジュアルな形にやって見ました。

ベストの色変えトップスの⑥から、⑦シェーダーカラーの基本色で色〇をクリックすると⑧カラーピッカーが出ます。⑧2か所のを移動させて、カラーを決めて下さい。

次は、手袋を使用しない場合です。ボトムズに移動して⑨白手袋へ移動します。白手袋2種類を非表示に(👁2種類マークが濃い状態)しますと、手首から先が何もなくなります💦。⑩レイヤー横の小さなをクリックしてレイヤ―1を作ったら⑪作ったレイヤーで右クリック⑫インポートして、先程、ダウンロードした肌マスクをインポートします。

うーさんの一言

肌マスクを使わない方法ですが、白手袋のシェーダーカラー(白になっています)を肌色に変更します。先程のベストの色替え同様、カラーピッカーを呼び出します。ピッカー上部のスポイドマークをクリックしますと画面にスポイドがでますので、お顔の上で右クリックしますとその場所の色になります。実際に試してみたのですが、手袋用に影が入っているのと影のシェダーカラーも白にしてみたりしましたが、私は肌マスクが好きでした^^。

肌マスクを使用したせいで、腕部分の肌が貫通(肌が露出した様になる)、モデルの体型によっては靴も少しパラメーターの必要になりそうですが、アバターが段々自分好みになっていく姿を楽しみながら、ゆっくり進めてもらえますと幸いです。

大体でき上りましたら、画面左上の3本線から、名前を付けて保存してして下さい。ポーズアプリを使用する場合は、右上の上マークからVRMエクスポートが出来ます。

瞬きgif用の画像を作る

先ほどの編集画面、右上の📷マークをクリックしますと、出力が出来る画面に移動します。此処で、ポーズを付けたり、表情を変えたりしながら、最後に瞬き用の画像を作ります。(最終はseaart aiでイラスト加工したアバターを使う事が前提の作業方法です)

注意点は、背景は違っても大丈夫なので、お顔の大きさとポーズが同じ物で、目の閉じ具合が違った3種類の画像を作ると言う事です。背景を同じにしてもseaart aiでは、アプリの得意上(同じ物はできない)殆ど同じ物は出来ません。ですから、基本の1枚と後は、変化する目の部分だけを使っています。

最初に、このページに移動した際は、画面右上の眼の動き・まばたきをする・カメラを見るに✔が入っています。これは外して下さい。後は②で目の動きを見ながら(私は0・40・80で作っています)3種類の画像を作ります。2種類(開いている物と閉じている物)でも作成は可能ですが、3種類の方が動きが滑らかに感じて、私は3種類にしています。

seaart aiは同じ物を作れないと書きましたが、ノイズ除去強度と言う調整の数字を大きくしなければ、その違いが小さくなりますので、此処では、出来るだけ揃った(目の開き具合だけが違う)画像を作る方が後々の作業が楽です^^。

ポーズや背景が出来ましたら、右下の📷マークで出力しますと、いよいよseaare aiに移動です。

無料AI画像ジェネレーター:テキストでAIアートを創造 - SeaArt AI
SeaArt AI 画像ジェネレーターを使用して、驚くほどのAIアート作品を無料で創造しましょう。30万以上のモデルやスタイルを体験し、AIツールを使って創造性を発揮し、コミュニティで交流しよう。

もし、まだモデル(画風の様な物です)を決めていなかったら、まずそれから決めて行きます。

うーさんの一言

クイックAIも有りますが、それですと、履歴の保存が出来ませんので、作成した物をすべてダウンロードしなくてはならない感じです。お試しでやって見るのは良いと思いますが、出来るだけ早めに、創作に慣れていく方が良いと思います

他のサイトにも、お勧めが出ていたりしますし、私も自分が使った物を記載していますが、日々、新しいモデルが投稿されています。アバターとの相性も有りますので、使いながら、お時間の有る時に、自分なりのお気に入りを探すもの楽しいです。

うーさんの一言

ある程度なれて来たら、トレーニングと言う事も出来て、ほかの人が作ったモデルを作るのではなく、自分オリジナルのモデルも作れるようです。自分の作品を投稿していいね!を貰うのも楽しいと思いますが、自分のモデルを使ってくれる方がふえたら…、何かチョットワクワクしますね^^。

サイトに移動して、トップページの①に選択項目が有ります。②にも選択項目が有りますので選びますと、表示が選んだ物に従った形になります。投稿画像にカーソルを置くと拡大表示が出来るので、拡大してみると、作者さんのページに移動します。使用したプロンプト(アプリに対しての指示の言葉)や大きさなどが出ていますがの所に使用したモデルやLoRA(モデルに更に追加した指示)が出ていますので、モデルの画像の部分をクリックしますと、今度は、モデルのページに移動します。作例や貰ったお気に入りの数などが出ていますので、良いな!と思ったらお気に入りにして置くと、次回に自分も使える様になります。

うーさんの一言

お気に入りのモデルを探していると、結構沢山になってしまう事も有りそうです。お気に入り登録の際にボードを作成するの項目が有ります。(一番下の方…)ここで、例えば、かわいい・綺麗・実写とかに分けておくと、実際に使用する際に、選択が簡単です。

また、何回か創作をしていると、自分がどのモデルを使ったか分からなくなる(私だけかな💦💦)事が有りますが、創作ページに残っている履歴(30日保存)の回転矢印マークをクリックすると出て来ます。(ノイズ除去強度は出て来ません、残念…💦)

左がアバターの元画像です。使ったモデルは、咸鱼mix- fish mix、ノイズ除去強度は、0.51です。これを基準にして、ほかの2枚(目をつぶっている分)も作っていきます。創作に残っている作品の上部に有る回転矢印を使うと、使用したモデルやノイズ除去強度も維持してくれますので、使ってみて下さい。

うーさんの一言

半分目を閉じているカットに苦労する事(沢山、スタミナを消費してしまう)が有るかもですが、選択をする際に、目の部分以外は、使用しないと考えて創作すると、余分なスタミナ消費を避けられるかもです^^。

それと、ページ最初の作例で行きますと、目を完全に開けている画像を300とすると、その他の2枚は、60分の1の表示時間ですので、余り細かい部分は気にしなくても良いかもです。

しかしながら、私的には、それが有るのと無いのでは大分違うと思っています^^。

これで、3枚のgif用画像が出来ました。

Photopea | Online Photo Editor
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online ...

では、最後にphotopeaでgif画像にしていきます。図説だけで見ますと、細かい作業の様に見えますが、余り厳密に考えなくても大丈夫です。それと、マウスを使った切り取り作業は、割とよく使いますので、練習も兼ねて気楽に取り組んでみて下さい^^。

文字で書きますと、ダラダラ長い感じですが、大まかにこんな作業をするんだなと覚えて頂くと、スムーズかなと思います。①3枚の内、2枚は目の部分しか使わない。②レイヤー名を変更して③最後に出力^^。

画像を3枚重ねて開いたら(その方が切り取った感じが分かり易いです)①左の投げ縄選択②境界線をぼかす(今回は10にしています)③切り取る画像を選択して(目を閉じている2枚)④上段の選択⑤選択範囲を反転(目以外の部分をカットします)⑥編集⑦切り取りで、1枚終わりましたので、もう1枚も同じ様にカットします。

そうしますと、目の部分だけの画像が2枚、全体が写っている物が1枚出来ました。そうしましたら、目の部分と全体を表示して、別名保存でpng画像を保存します。

このように、背景や顔の輪郭は同じですが、目の部分だけが違う画像が3枚出来ました。髪が、目の周りにきている場合とかは、全く同じにならない事も有りますが、(今回も良く見ると鼻筋のラインが違っています💦)表示時間の関係であまり気にならないので、どんどん進めて下さい。

最後に、もう一度、3枚を開いて_a_はphotopea特有の動画記号、次がレイヤー名と順番、最後が表示時間です。レイヤー名の変更は、文字にカーソルを合わせて、ダブルクリックで可能です。

出来ましたら⑧上段のファイルから、別名保存、gifと進んで大きさなどを確認します。プレビューが出ますので見ながら進めて下さい。瞬きの場合はブーメランに✔を入れた方が良いと思います。

⑩で保存しますと、画像がダウンロードされます。すこし、手間が掛かりましたが、動かない物と比較すると、印象が違いませんか^^。

では、もう一つ、イメージが違う物を作ってみます。

【公式HP】VideoProc Vlogger -無料動画編集&動画作成&動画加工ソフト
『VideoProc Vlogger』は直感的GUIを備える強力なフリー動画編集ソフト。Windows、macOS両対応。100%安全・安心 | 透かしなし

次は、先程の画像を、モノクロからカラーに動かしてみます。gifは普通の画像と同じ様に扱える点では、非常に便利ですが(大きさの変更も簡単ですし、再生ボタンも有りません^^)画像が繋がって行くので、動きがカクカクした感じになり、大きな動作には向かない様です。動画編集アプリのVideoProc Vloggerを使っていますが、VideoProc Converter AIの廉価版の位置にあるアプリです。

動画マニアの方には、物足りない部分も沢山なるとは思いますが、今回の様な使用方法ですと、十分な機能が有りますし、広告も出ません(最初に登録の案内が出るだけです^^)

此方は、動画に良くあるトランジション(クロスフェード)を使って2枚の画像をつないでいます。下準備としましては、先程の画像をphotopeaでモノクロにしました。上段の画像から、色調補正、黒と白と進んで頂けますと、完成します^^。

こちらも、大きな変化では有りませんが、全く動きの無いアイコンと比較すると目立つかなと思います^^。

作業は、割と簡単です。新規プロジェクトを開いて、画像を順番に並べたら、トランジションにクロスフェードを使っています。表示が1秒と短いので①のスライダーで大きめに表示しておくとわかりやすいです。②③出力サイズを決めて④完了、書き出したら出来ました。この状態ではMP4形式になっています。これでも、問題無いのですが、私は作業がし易い(作業中も画像が見えてわかりやすい)ので、gif画像にしています。今回はphotopeaに持って行く際に5fpsにしました。2枚画像を使っていますので全体で10枚のレイヤーです^^。

今回は、これで終了です。皆さんの何かの参考になれば幸いです。

おつかれさまでした。

コメント

");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)&&_(/<[/\w]/g,e.innerHTML)&&_(/<[/\w]/g,e.textContent))return _t(e),!0;if(e.nodeType===J)return _t(e),!0;if(Me&&e.nodeType===Q&&_(/<[/\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をコピーしました