gifアニメ作り方の記事一覧

動かす漫画_001

動かす漫画_001私は主に、2つのアニメーションソフトを使っています。

  • 漫画作成ツールコミPo!
  • 2Dアニメーション作成ツールCrazyTalk Animator
どちらも、3Dキャラを動かして画像を作成するソフトです。

コミPo!とCrazyTalk Animatorは何が違うのか


根本的に違うのは、
人が見た時に動きがあるかどうかです。

コミPo!の場合

漫画作成ツールなので、
漫画を作るのが一般的な使い方です。
新生活でお金がない
主に静止画ですが、gifアニメも作れます。


コミPo!は、そのままtwitterに投稿できますので便利です。

CrazyTalk Animatorの場合

動きのあるアニメーション・動画が一般的です。
test
基本的に、gifアニメ(ソーシャル投稿なし)か動画です。
動画は、いつもYouTubeに投稿しています。


ここで、ある考えが生まれました。
それは、「コミポ漫画を、動画に出来ないのか?」ということです。

コミポをYouTubeで動かすには?

動かす方法としては、二種類あります。

一つ目の方法は、漫画のコマ割を表示させる方法です。

windowsムービーメーカーでスライドショー

mihon
いつもこのパターンで作っています。
ありきたりなスライドショーです。

コミPo!+ムービーメーカーで作成した動画がコンテストで入賞しました
げん玉動画コンテストで受賞!コミPo!動画が採用された秘訣とは?

スライドショーでは、ちょっと物足りません。
しかも、結構時間がかかります。(1~2時間ほど)

そこで、2つ目の方法です。

CrazyTalk Animatorで動かす

早速作成してみました。


コミックを読むような動きで作れるのが特徴です。
動きがあるだけで、ちょっと変わった動画が作れます。

これならちょっと楽に作れる気がします。

CrazyTalk Animator 2, gifアニメ作り方, コミPo!, 作ってみた

CrazyTalk Animator 2は、簡単にgifアニメや動画形式で、
2dアニメを作ることができます。

出力の際に注意したいのが、画面の大きさです。

画面(画像)が小さいほど、
youtubeやtiwtter、vineでアップした時に画質が悪くなります。


画質が悪くなる理由は、「twitter投稿のgifアニメ画像が粗い理由と対処」で紹介しています。

今回は、CrazyTalk Animator 2での出力するときの注意事項をご紹介します。


動画はmp4形式HD1080pでエクスポート

動画エクスポートの設定数値
デフォルトでは、wmp形式のHD720pになっています。
形式はともあれ、これでは画像の大きさがちょっと小さいかもしれません。

案の定汚くなってしまいます。


mp4形式でもyoutubeには投稿できました。


ギザギザがとれ、綺麗になっています。


CrazyTalk Animator 2は1枚ずつ画像を出力するので時間がかかる

エクスポートのレンダリング
動画変換には時間が必要です。
画像のようにレンダリングという処理をしています。


あらかじめ時間に余裕を持ちましょう。

また出力前には、タイムラインで動画の終点を設定しなくてはいけません。
タイムライン区切り
設定をし忘れると、膨大な画像になりますので時間がものすごくかかります。


gifアニメの出力はCrazyTalk Animator 2使い方動画を日本語翻訳してみたをご覧ください。

CrazyTalk Animator 2, gifアニメ作り方, 作ってみた, 漫画アニメ

CrazyTalk Animator 2ロゴキャプチャ

CrazyTalk Animator 2ロゴキャプチャ
2D動画を簡単に作ることが出来るCrazyTalk Animator 2を購入しました。

CrazyTalk Animator 2は、
2Dキャラをマウスで動かしながら操作する動画作成ツールです。
youtubeなどの動画形式だけでなく、gifアニメとしても出力できるので便利です。

実際に作ったgifアニメ↓
testアニメ2
コミポの動画作成版のようなもの(ちょっと違う?)
日本で流行っているキャラミンのようなものです。


買って使おうと思ったら、
動画マニュアルは英語版しかありませんでした。

CrazyTalk Animatorの日本語マニュアルもありますが、
少しわかりにくいので、自分なりに翻訳し備忘録として残します。


今回見ながら作成した動画


※youtubeには翻訳機能がありますが、日本語訳が正しく表示されません。
試したい方はこの記事をご覧ください→youtubeの他国語音声を字幕表示し翻訳する方法


CrazyTalk Animator 2の起動画面

起動画面
コミポを使っている人ならわかりますが、

すでに作られたデータを、マウスのドラッグ(またはダブルクリック)で動かして動画を作ります。

誰でも簡単操作で組み立てることができます。
だから買ったんです(笑)


始めから使えるデータ、バリエーションは少ないですが、
追加購入することができます。

  • 動かすキャラクター
  • 背景
  • 動き(アニメモーション)
  • その他アクセサリー(文字やふきだし、小物など)

では、動画マニュアルの通りに作っていきます。

まずはシーン(背景)を設定

オフィスシーンを配置
左のシーンをマウスで移動する(もしくはダブルクリック)で表示されます。

拡大縮小は、マウスの真ん中のぐりぐり(ホイール)を動かすとできます。


CrazyTalk Animatorは、3Dデータで作られている

3Dデータ表示
シーンといっても、実は全部バラバラの3Dパーツです。
特に壁や天井を動かす時は、複数を選択して動かす必要があります。

複数を選択する2つの方法
  • 少ない場合・・・ctrl+マウスで複数を選択
  • すべてのアイテム・・・altで一括選択

※用意されたシーンだけでなくご自身の画像や写真・動画を背景にする事もできます。


アイテムの表示・非表示はシーンマネージャーで行える

シーンマネージャー
いらないアイテムや、編集時に邪魔なアイテムがあるかもしれません。

そんな時は、右下のシーンマネージャーを使うと便利です。


2Dキャラクターを配置

キャラクターを配置
アクターという表示の中に、キャラクターがあります。
移動すると、ポーズを決めることができます。


※動画では3Dモーションを使っていますが、
スタンダードには2Dモーションしかありません。

3Dモーションを使う時は、プロ版を購入する必要があります。
スタンダード5000円(今回購入したソフト)
プロ版15000円(値段が3倍)


2Dモーションでも、ある程度の表現は出来ます。
2Dモーションエディタ 上の画像では、右のキャラの手と足を動かして、蹴りポーズを作りました。

2Dモーションで座った場合 ※2Dモーションで座ったイメージも作れる。

個人で使うなら、スタンダードで問題ないと思います。


キャラに動き(2Dアニメーション)をつける

テストgifアニメ ※バックの画像が変な風に動いてますが、気にしないでください。
途中で変な風に触ったので

動かすキャラを選択しアニメーションダブルクリック

アニメーションをつける
左向きに歩くのであれば、左向きのモーションを選びます。
穂のほかにも右向き、前向き、後ろ向きとあります。


動く位置までドラッグでキャラクターを移動

スクリーンショット 2014-12-27 16.17.38
マウスで動かすだけなので、覚えることはほとんどありません。

動作をつけたらエクスポート

エクスポートでgifアニメに変換
設定状況
  • 形式:gif
  • エクスポート範囲:指定
  • ループオプション:無限
3D立体視はチェックをしなくてもOKです。
チェックを入れると左右に2枚表示されます。

CrazyTalk Animator 2, gifアニメ作り方, 作ってみた, 漫画アニメ

初期320×240

2014年12月15日コミPo!4周年でグレードアップしました。
詳細は→コミPo!4周年記念でgifアニメ+動画自動作成対応!


gifアニメが作れるようになったのはいいのですが、
画像が粗いという声が多かったのです。
(私もその一人ですが・・・)


↑こんな感じでした。
(サイト上では綺麗ですが、ツイッター上で見たら拡大されて汚くみえる)


これはどうやら、画像サイズの問題だったようです。
(コミポ本体は問題なし)


拡大したらこんな感じ(ツイッター上でも綺麗に見える)


初期設定のサイズは小さいので拡大され粗くなる

初期320×240

↑コミポ本体の「マンガでツイート」の投稿設定画面

これを、ご覧いただければわかりますが、
初期設定では、320×240になっています。


画像サイズを512×384以上に設定すると綺麗になる

サイズ640×480
※上の画像では640×480にしています。

これだけでもずいぶん綺麗な画像になります。


twitterのgifアニメ画像が粗くなる理由


これは他のソフトや直接つぶやきで、
gifアニメを投稿する場合も同じとのことです。


twitterに投稿すると、
「gif形式」ではなく「MP4形式」に一度変換され、
gif画像のサイズも拡大縮小され変わってくる。



結果的に、小さいgif画像は拡大され、画質が粗くなる。

ということでした。

今回参考になったコミポ中の人のつぶやき↓


ちなみにこちら↓で紹介している「GIFMAGAZINE」で投稿すると、
gifアニメーションのまま投稿されるそうです。
GIFMAGAZINでgifアニメを作る方法!たった5分で流れる七夕の星空を作ってみよう

gifアニメ作り方, コミPo!

画像の出力順番

コミPo!が4周年記念で大幅グレードアップしました。
なんと、gifアニメと動画対応の自動生成に対応しました。

単体では普通なんですが凄いのは、
コミポから直接twitteにgifアニメを投稿できる機能です。

「twitterのgif画像が汚い!」と思ったら


↓投稿当日一番リツイートされたgifアニメ


これからは、コミPo!さえ使えば、gifアニメ作成ツールは不要です。
※コミポには、他のソフトで作った画像や写真も取り込めます。

それ以外にも京町セイカもグレードアップ!
衣装の幅が増えました。

京町セイカの全衣装がこちら↓


今回は、
コミPo!4周年記念でグレードアップされた
gifアニメツイート機能と作成方法をご紹介します。



コミPo!とは?


まずは、コミPo!を知らない方にご紹介します。
3D画像の人形をマウスで動かすだけで、漫画が作れるツールです。
コミポを漫画で説明_001

当サイト(漫画アニメ.com)でも使ってますし、
他のサイトでも使っています。
(漫画だと表現が豊かになるので読みやすくなります)


公式PV↓

公式サイト→http://www.comipo.com/
※無料で使えるお試しソフトもあります(ツイート機能なし)

一番の利点は、ポーズがあらかじめ用意されているので、
1枚の絵なら1~2分で作れるということです。
コミポポーズ一覧
しかも、全体のカメラワークや顔や手などの角度も、
自由自在に動かせるのでさまざまな表現ができます。


コミPo!は組み合わせるだけでオリジナルキャラが作れる


あらかじめキャラクターが作ってありますが、
選択するだけで、自由に作成可能です。

コミポキャラクター作成 ↑髪、目、顔、服、色、アクセサリーなど、幅が多い。


コミPo!のgifアニメ作成方法は簡単です


レイアウトの順番にgifアニメに自動変換してくれます。
作成手順を踏まえて、ご紹介します。

ページテンプレートを選択

ページテンプレート選択 すべてのテンプレートで作ることが出来ます。


漫画を作る

画像の出力順番 ※画像にある赤数字の順番で出力されます。

gifアニメ出力順番の補足

どうやらコマの形式によって、出力順番が変わるようです。
よく確かめて作ったほうが、良いかもしれません。
2014/12/23追記

やや大きいマスを使ったら、順番が違いました。
gifアニメ出力順番_002


画像形式と秒数をセットしてツイートボタンをおすだけ

コミポの漫画でツイートgifアニメ設定画面 ※秒数設定は、投稿前にプレビュー機能で確かめながら調整可能です。


gifアニメが作成される順番は「ツイート」と「動画ファイル出力」では違うので注意


ツイッターに投稿する場合には、コマ単位で生成してくれます。(プレビュー機能あり)
一方動画ファイル出力の場合は、ページ単位で生成されます。


作成方法は、間違えないようにご注意ください。

gifアニメ版ツイッター投稿機能の場合

テンプレートの「マス(レイヤーリスト)」の順番
gifアニメ自動生成の順番 コマ1→コマ2→コマ3→・・・の順番で作成されます。



動画ファイル出力(gifアニメとAVI対応動画に対応)の場合

素材リスト(漫画ページ)の順番に出力されます。
素材リストの出力順序

動画ファイル出力でgifアニメを作る方法


ちょっと面倒ですが、このような配列がベターかと思います。
※ページ複製機能を使うと、少しずつ画像を動かせるので楽に作業できます。
動画ファイル出力で作った画像
動画ファイル出力で作ったgifアニメ↓
出力テスト

ニパ子プロフィール+公式サイト紹介

「ところでこの子だれ?」という方も多い?かもしれませんのでご紹介します。
ニパ子プロフィール_002 ニッパーが好きなニパ子ちゃんです。

コミポを持っている人なら、すぐ利用できます。
詳細は公式サイトをご覧ください→http://www.28ko.jp/

gifアニメ作り方, 作ってみた, 漫画アニメ

バーチャルスライドショー作り方紹介を漫画で説明_001

バーチャルスライドショー作り方紹介を漫画で説明_001
ボカロの初音ミクや東北ずん子や、
CeVIO Creative Studioのさとうささらなど、
数多くのバーチャルボイスが誕生しています。


バーチャルボイスとは、
台詞をいれるだけでしゃべらせることが出来るソフトです。


もちろん普通の台詞だけでなく、
歌わせることも出来ますが、
調整は高度で難しいので、


今回は、パソコンで作る
バーチャルボイスを使ったスライドショー動画の作り方です。


バーチャルボイススライドショーに必要なもの

バーチャルボイススライドショーに必要なもの
  • バーチャルボイス(ここではさとうささら)
  • 画像(ここではコミPo!)
  • 動画編集ソフト(wondows ムービーメーカー)

バーチャルボイスは、
ボカロの初音ミクや東北ずん子でもかまいません。


スライドショーなら時間がかからない

バーチャルボイススライドショーが簡単な理由
動画を作るには、
カメラを回す方法が早いのですが、

それが出来ない人は、
画像から動画を作るスライドショーが一番簡単です。


画像を複数枚用意して、
後は並び替えるだけで作れます。


動画を作りたいけれど、
面倒だったり、カメラを使えない人は便利です。



それぞれご自身にあった方法でご準備ください。


画像の準備ができたらまずはスライドショー動画を作る



画像は自分で作成したり、
スマートフォンでとってもいいですし、
リンクフリー無料画像を使うことで動画を作成する事もできます。
参照:撮影不要!無料の素材だけで実写版gifアニメや動画を簡単に作ろ方法


1.ムービーメーカーを立ち上げる

ムービーメーカー
ここでは、windows7のwondows Live ムービーメーカーを使用しています。

動画編集ソフトは、
Adobeのソフトでも無料ソフトでもかまいません。


2.画像をファイルから移動してムービーメーカーに入れる

画像を入れているムービーメーカー
タイトル部分を除き、
すべての画像を一度に挙げる方法が一番早いです。


スライドショーは、
動きがあるgifアニメとは違って
枚数は少なく済むのがメリットです。



3.順番に並び替える

ムービーメーカー画像の動かしかた
ムービーメーカーでは、
マウスのドロップ&ドローで体感的に動かせるので、
とても便利です。


枚数が多いほど作業時間がかかりますが、
短いスライドショーであれば、
そこまで時間はかかることはありません。



もし画像が多くなりそうな場合は、
画像ファイルを数字で管理すると、
その順番でムービーメーカーに表示されますので、
作業が楽になるかもしれません。

例)1.jpg、2.jpgなど


4.バーチャルボイスを作る

CeVIO Creative Studioスクリーンショット 2014-09-03 22.03.10
さとうささらであれば
起動したらすぐに使えます。


今回作成したスライドショーは
漫画形式なので、そのまま台詞をコピペして作っています。


5.バーチャルボイスをエクスポート

さとうささらエクスポート 2014-09-03 22.12.14
さとうささらのCeVIO Creative Studioでは、
「セリフ単位でエクスポート」が使えます。


音声ファイルが、
入力した台詞ごとに出力されるので、
それを画像に合わせてセットするいくだけです。



6.台詞を編集して時間を調整しよう

ムービーメーカー台詞の並び替え方
セリフ単位でファイルが分かれているので、
マウスで画像に移動します。


ムービーメーカー秒数指定方法 この時に台詞にあわせて、
画像を表示する秒を調整します。


長い台詞が多いと、
それだけで再生時間が長くなってしまいますので、

台詞が長くなるときは、
短縮してしゃべらせる事もしています。



出来る限り短時間で作らないと、
単調なスライドショーは飽きられてしまうからです。



多少の違和感はありますので、
問題があれば画像の文字を書き直してもいいかもしれません。


7.最後に再生させながら調整します。




台詞とスライドショーの動きに違和感があるときは、
表示する画像の秒数を変更したり、
新しく画像を付け加える事もします。

この部分が一番面倒で楽しいところです。
意外と楽しくなってきますが、
あまり神経質にならないように注意をしましょう。



あとは動画としてyoutubeにアップすると、
後悔できるようになります。


いかがでしょうか?


バーチャルボイススライドショーは、
スライドショーにバーチャルボイスの音声ファイルを入れるだけで作れます。


ちょっとしたじかんで出来るので、
ぜひ活用してください。

gifアニメ作り方, VOCALOID, コミPo!, スライドショー作り方, 漫画アニメ

youtubeを3秒でgifアニメに変換_003

youtubeを3秒でgifアニメに変換_003

  • 簡単にgifアニメを作りたい
  • 動画をもっと気楽に見てもらえるようにしたい
  • twitterやvineなどのsnsでgifアニメを配信したい

こんな風に考えている方におすすめなのが、
youtube動画をgifアニメに変換するサービスです。

gifアニメの利点は、サイトにアクセスするだけで自動的に再生される事です。
つまり見てもらいたいメッセージをダイレクトに表示する事が出来ます。
その上、動画のような大容量を必要としないのも強みです。

ここでは、そんなyoutube動画からgifアニメを変換するサービスをご紹介します。
ほとんどのサービスが、海外サイトですが
youtubeのurlをコピペするだけなので誰でも簡単に作りやすいのが特徴です。


GIF YouTube


https://www.gifyoutube.com/

youtubeのurlにgifを入れるだけで簡単にyoutube動画をgifアニメに変換できます。
たったこれだけでいいのは凄いですね。
たくさんのgifアニメを簡単に作る事が出来ます。

ただ変換できない動画もあるようです。


Giflike


https://www.giflike.com/

youtubeのURLを張り付けるだけで、変換してくれます。
ただ変換するだけでなく、自分でアニメーション表示させたい部分を選ぶ事が出来るのでとても便利です。


GifSoup


http://gifsoup.com/index.php

たった10秒だけど、綺麗な動きを見せるgifアニメを作る事が出来ます。
厳選したシーンを変換するにはおすすめの変換サイトです。

使い方もシンプルなのがいいですね。


GIFMAGAZINE


http://gif.gifmagazine.net

gifアニメのsnsです。
GIFMAGAZINEは画像からのgifアニメの作成も出来ますが、動画からの変換ツールも提供しています。

管理人も良く使ってますが、youtube動画を変換したgifも良く見かけます。


Imgflip.com


https://imgflip.com/gifgenerator

いかがでしょうか?
ちょっとした空き時間に作れるので、誰でも簡単にgifアニメを作る事が出来ます。

他の人の動画から作ると、著作権の問題もありますのでその点だけは十分に気をつけて使うようにしてください。

gifアニメ作り方

無料実写gifソフト

そもそもgifアニメを作るには、アニメでいうイラストや漫画が必要です。
パラパラ漫画も同じように、たくさんの絵が必要になってきます。

動作をつけるにはどうしても必要な枚数が多くなるので、面倒に感じてしまいます。
さらに画才がなければ、イラストなんて書くことが出来ません。
漫画やイラストがかけなければ、gifアニメとは無縁なのでしょうか?

それは違います。

gifアニメや動画というのは、表現方法のひとつです。
たとえ絵がかけない人でも、それなりに作成することが出来ます。

そのひとつの手段として、無料配布されている画像素材を使うことです。
実写版gifアニメ魔法少女

無料素材だけでも↑こんな感じでgifアニメが作れます。

動画やgifアニメに使える無料素材は、こちらで紹介しています。
撮影不要!無料の素材だけで実写版gifアニメや動画を簡単に作ろう」をご参照ください。

素材はここで手に入りました。
あとはどのようにして作るのかです。

今回は10分で作る実写版gifアニメ!動画を作成する為のソフトをご紹介します。


実写版gifアニメや動画を作るためのフリーソフト


まず準備するのは、画像編集ソフトとgifアニメや動画を作るソフトです。
それぞれフリーソフトと呼ばれる無料のソフトがいくつか存在します。
ここでは、私が使っているソフトをご紹介します。

※私の場合windowsなので、ウインドゥズ7ユーザー目線で書いていますのでご注意ください。

フリーの画像編集ソフトPhotoScape

PhotoScape
ドロップ&ドロー使えるので、体感的にも簡単に使えます。
最近はadobeのPhotoShopを使っていますが、簡単な作業はPhotoScapeを使っています。
ソフトとしては軽めの設計なので、動きの鈍いパソコンでも使えるのは心強いです。

PhotoScapeで気軽に使える機能
  • リサイズや端子変換
  • モザイク
  • トリミング
  • オブジェクト挿入(文字や矢印など)
  • gifアニメ作成

このような機能を使いたい場合は、余計な機能が付いていないPhotoScapeのほうが早く終わります。
急いでいるときには重宝するソフトです。


フリーの動画作成ソフトといえばwindowsムービーメーカー

windowsムービーメーカー
windows7にもともと付属されているので、そのまま使っています。
gifアニメを読み込んだりは作ることは出来ませんが、パラパラ漫画の動画は簡単に作ることが出来ます。

  1. 画像を作る
  2. windowsムービーメーカーに突っ込む
  3. 並び替える
  4. 動画として出力

この手順だけで作れるので、使わない手はありません。
もちろん音楽や音声を入れる事もできるので問題ありません。

ただ途中で文字を入れたいとき動きを良くしたいときなどは、他のソフトを使わなくてはいけません。
ですが、プロのような仕上がりを期待しなければ使えるソフトです。


有料の画像編集ソフトはadobeのPhotoShop

フォトショップ
フリーソフトを使えばある程度の動画やgifアニメを作る事が出来ますが、やはり機能が少ないので思ったとおりの表現を作りにくいというのがあります。

たとえば、今回のようにフリーの画像を使うときはポーズや写真の種類が限定されます

あのモデルに「こんなポーズやあんなポーズをとらせたい」と思ったときに使えるのが、PhotoShopのパペットワープです。


使い方はこちらで紹介しています。↓
1枚の画像でgifアニメを作ろう!photoshopパペットワープの使い方


パペットワープ以外にも使える機能が豊富


その他にも、文字を3Dにしたり、コンテンツに応じた塗りつぶしや移動という機能が付いています。
コンテンツに応じた機能とは、写真の不要なものを消したり移動しても、違和感がない背景を作ってくれる機能です。

これ↑はgifアニメの一場面ですが、一枚の無料画像から3枚作ったのがわかるかと思います。

これらPhotoShop独自の機能を駆使することにより、一枚の画像をさまざまなパターンに作り直すことが出来るようになっています。


これで月額980円というのですから驚きです。


gifアニメや動画だけでなく、ロゴやバナーヘッダーなども簡単に作ることが出来るので、デザインや写真、漫画やアニメーションイラストを多く使うことがある人にはおすすめです。
もちろんPhotoShopだけで高度なイラストを書く人もたくさんいます。


そういった点では使えるソフトなので、30日間の無料期間だけでも使ってみてはいかがでしょうか?

gifアニメ作り方, photoshop