簡単アニメ作成講座。

前記事にてパソコンでアニメを描いてみたいとのコメントを頂きましたので、簡単な作り方をご披露したいと思います。ひろとくん、これでいいかね〜。

その前にひとつ、ビンゴ先生http://blog.so-net.ne.jp/bingo05/を前にお恥ずかしいのですが、私はアニメの専門家ではないのであくまでも素人での立場から遊びとして捉えて下さいね。私は動くモノというくくりでいうと3DCGのほうが専門で近いです。ですからアニメやムービーが扱えるというだけで高度なモノになるとお手上げですのでご理解願います。

そして、もうひとつはパソコン環境があります。私はMacでOSXですのでWinの方若干違うと考えられますがご容赦願います。
また、作成するためには特別なソフトが必要になります。これが問題ですね。ご用意できるかどうか。様々なソフトが出回っておりますがここでは、アニメーションgifのタイプ、いわゆる「ぱらぱらマンガ」をご説明しますので、次のソフトを使用して作成いたします。これが一番標準ソフトとしてでまわっておりますので。
お絵かき用、Adobe Photoshop　※ペイント系ならなんでもいいですよ。
アニメ編集用、Adobe ImageReady　※gif形式で書き出せるものがあれば。

前書きが長くなりましたが、早速始めてみましょう。
基本操作は省かして頂きますので解らない方は説明書を読んでね。
ここでは概念を中心に解説し、あとは皆さんに上手く応用してくれたらなと考えています。

【絵を描きましょう。】

１　Photoshopを起動して、「ファイル」から「新規」を選んで、ここではブログにアップロードするために次の大きさにしてください。画像の大きさを、横が530pixel以内にして下さい。寸法でいうと190mm以内です。高さは適当でいいですが350pixel、120mmくらいにしましょう。解像度は72pixel/inchにしてください。これを「.psd」形式で保存してください。
図１

２　最初の絵を書いて、「レイヤー1」の画像を作ります。好きな色で好きな筆や鉛筆で自由に描いてね。別に紙に描いてスキャンして取り込んでもいいですよ。文字はツールでも手書きでもいいです。　次に、「レイヤー」から「新規レイヤー」で「レイヤー2」を作ります。
図2

３　「レイヤー1」を選択して、その絵を「コピー」して、「レイヤー2」にペーストします。手や足を動かしたいときはこのやり方ね。

４　「レイヤー1」の絵と「レイヤー2」の絵をぴったり重ねて、　「レイヤー2」の絵に変化をつけて下さい。この時、「レイヤー1」の目を消すと、　「レイヤー2」だけが表示されて、作業がやりやすくなりますよ。むかしよく描いたでしょ、パラパラマンガ。あの要領です。
図3

５　以上を繰り返して、「レイヤー」上にアニメの絵を作り続けます。
図4

６　アニメの絵ができたら、これを「.psd」の形式のまま保存します。

【アニメに編集しましょう。】

１　次に「ImageReady」を起動して下さい。「ファイル」から「開く」で、今、「Photoshop」で作ったばかりの　「レイヤー」が重なった「.psd」ファイルを選んで開きます。　（「Photoshop」の「ファイル」から「アプリケーションを起動」を選んでもよい。）

２　「アニメーション」ウインドウの右の▲を押して開いた「プルダウン（アップ）メニュ」から　「レイヤーからフレームを作成」を選んで、レイヤーをフレームに展開します。
図5

３　フレームの一つを選択して、同じ「プルダウン（アップ）メニュ」から「新規フレーム」でそのフレームを増やしたり、　「フレームを削除」を選んでフレームを減らしたりして、　コマの数で動きを調整します。一つの絵を二コマか三コマが適当です。ここで一コマの秒数も設定しましょう。再生ボタンを押して動きをチェックしてね。
図6

４　「ファイル」の「最適化ファイルを別名で保存」で、名前をつけて　「.gif」形式のアニメファイルを生成するとできあがりです。
図7

簡単でしょ。あとはいつものように記事をアップすればオリジナルアニメが動き出しますよ。ファイルの重さは200以内にね。

細かい操作を飛ばしたので、わからないことがありましたらご遠慮なくどうぞ。

さあ、あとは発想と試行錯誤ですね。出来たら教えてね。

コメント 28

師匠！ありがとうございます。
とても参考になりましたっ！
本当に本当に分からない所があったら
教えて頂けるんですか？！
うれしすぎるぅぅ〜〜
by姉
by 不可能姉妹 (2005-11-07 15:09) 

アニメションのやり方、ありがとうございます！
先日、PhotoshopCS2を手に入れたばかりで、、まだほかほか、、
これから、勉強します、、
（今まで、Photoshop　Elements　ばかり　使っていました）。
by sera (2005-11-07 16:13) 

GIFアニメ何気にみんな知らないし!
by akamaru (2005-11-07 18:14) 

難しい・・・
でも、これを見て、
みんなが、楽しいのを作ってくれるのを待つ人になります。
by aloeDog (2005-11-07 20:24) 

ナイスな講座でございました。
by (2005-11-07 20:50) 

先生、よーく分かりました。ありがとうございました。
ところで、練習のために自分用ペンタブが欲しいんですけど・・・・だめっすかねぇ。おねだりは。
by のり巻サザエ (2005-11-07 21:04) 

ヴォイスくん先生、ありがとうございましたっ♪
フォトショ・・・持ってる。。。ImageReady・・・使ったことない。。。
でも、頑張ってみるぅ～♪
で、だいぶ前に作ったアニメーションGIFを載せてみようか・・・って思ったら、
管理編集画面に入れないーーーーーっ！（涙）
by 仔猫。 (2005-11-07 21:29) 

アナログのが簡単なんだよ！（このコメントは聞き流してくなはい）
ちなみに　ビンちん検査の日になり　今年の酉の市は　私ヌキになりました。あれ〜（笑）
by ビンゴ (2005-11-07 21:55) 

先生、ヴォイ蔵が怖すぎて笑えません。
by のり巻サザエ (2005-11-07 22:10) 

ふーん。にょろでも、できそうな気がしてました。やってみようかなぁ！
休み中、だんなさんが、ひとりでごそごそ、写真を加工して作ってました、、、。
by にょろ (2005-11-07 22:16) 

勉強になります！
・・・が、最初の写真が気になって気になって・・・（--；）
by (2005-11-07 23:10) 

すごーぃ。　ちょびっと元気になれました。
ありがとーございました。　ぺこり。
by comment (2005-11-07 23:22) 

ふぅ～む…そうだったんですか。
大変参考になりました。
無謀にも、自分でも出来そうな気がしてきたなぁ（笑
by GUSUKO-BUDORI (2005-11-07 23:57) 

なるほどぉ。ぱらぱら漫画の要領ですネ。
でも、やっぱりTOPの写真が衝撃的です。
by (2005-11-08 00:46) 

いやぁぁぁぁ～～っ！！
最初見に来た時、「ヘン顔」のヴォイスくん居たかしらぁ・・・・・？
怖いよぉ・・・今晩、一人でトイレに行けなくなっちゃう・・・（涙）ｗ
by 仔猫。 (2005-11-08 01:35) 

すごい、です・・・。
ワタシの脳みそでは、量が足りなさそーなので、
こちらで、楽しみにさせていただきたく・・・。
きょーの、にゃんこの目も、楽しい。ぷぷっ。
by knacke (2005-11-08 05:31) 

ひゃひゃひゃー最初のヴォイスくん！やりたーいやりたーい！自分の顔でやりたーーーーいい！！とうとう、新しいパソコン注文しましたので、出来るぞぉー出来るっ！今度はやっちゃうもんねぇー！フォトショップ買うぞぉー！
この記事大事にプリントして真っ先に使わせてもらうぞーー（意気込み）
　
by ホニャ (2005-11-08 08:37) 

化け猫じゃ～＾＾；
by Baldhead1010 (2005-11-08 11:08) 

笑っちゃった～
愉快！Voice君、大丈夫かにゃ、、、
by sera (2005-11-08 16:52) 

すごい♪すごい♪♪すご～～い♪♪♪
・・・このようにしてあの名（迷!?・・ほほほっ）ダンスも
産まれたのですね♪　尊敬の眼差し・・・・♪♪♪
by la_vie_en_Rose (2005-11-08 20:44) 

ヴォイスくん、かわいそ・・・。
先日、フォトショの購入で、すごく悩みました。
加工ができるようになったら面白いだろうなぁって。
だけど、ブログを始めてからパソコンの使用時間が長くなったせいだか
この一年でものすごい視力が落ちました。
折角、５年前にレーシックで視力が良くなったのに・・・。
そんなわけで、最近パソコン自粛中、フォトショも諦めです（涙）
by 従者 (2005-11-08 22:00) 

師匠！たいへん勉強になりました。
そういえば、このPCにもImageReady入ってました。
バージョンは限りなく古いけど・・・。
もしかしたら、私にもできるかもなんて思っちゃいましたけど。
時間が欲しいぃぃぃーーーー！
by まさぽん (2005-11-08 22:35) 

ＴＢの報告が遅くなってしまってごめんなさい。
ブログの機能を、まだあまり理解しきってないようです。
記事中にリンクを貼ってもＴＢした事になるんだぁ・・・と、ちょっと焦りました。
ごめんなさい。
by 仔猫。 (2005-11-09 04:39) 

◆不可能姉妹さん、有り難う御座います。どうぞ遠慮無く。

◆seraさん、有り難う御座います。まあ基本的には同じだから大丈夫。

◆あかまるさん、有り難う御座います。なじみがないとね、わからないのが普通と思いますよ。

◆aloeDogさん、有り難う御座います。そうしましょ、ソフトお高いしね。

◆tanaka-ma3さん、有り難う御座います。お粗末様です。

◆のり巻サザエさん、有り難う御座います。お古でよければ、たぶん使わないと思うよ。

◆仔猫さん、有り難う御座います。見ましたよ、上手いじゃないですか。手慣れてますよ。

◆ビンゴさん、有り難う御座います。本音をお聞き致しました。酉の市ですか、ビンちんのほうが大事ですよ。でもお仲間で行くんでしょ。

◆のり巻サザエさん、手抜きでした。

◆にょろさん、有り難う御座います。旦那様の見ましたよ。もうちょっとね。

◆へなちょこカウボーイズさん、有り難う御座います。参考としては最低でしたね。

◆ luluさん、有り難う御座います。落ち着くことを願いましょう。

◆GUSUKO-BUDORさん、有り難う御座います。試しにいかがですか。

◆Miyabiさん、有り難う御座います。原理は簡単でしょ。

◆仔猫さん、参考にと思いましたが効果は逆でしたね。

◆きむたこさん、有り難う御座います。にゃんこの目は駄作でした。

◆ホニャさん、有り難う御座います。意気込みは承りましたよ。

◆Baldhead1010さん、有り難う御座います。口も動けば良かったね。

◆seraさん、目はもうちょっとだったね。

◆ la_vie_en_Ro..さん、有り難う御座います。アイコンの方大好きなんすよ。

◆従者さん、有り難う御座います。治療されたんですか。無理しない方がいいですね。

◆まさぽんさん、有り難う御座います。古くても使うのじゃ、私的で購入するには高価すぎるからね。時間は仕方ないね。でも積み重ね。

◆仔猫さん、TBつきましたね。
by ヴォイス (2005-11-09 14:10) 

実際にやってみると「なるほど～」となると思うんだけれど、今すぐには
り・・理解はムリかと・・・。お勉強しなくちゃいけないことがいっぱい。
でも、お勉強すると、出来ることがいっぱい出来て楽しいので、頑張ります。
私も手で絵を描く方のお仕事をしておりましたので・・・ペンタブが欲しい・・・。
by 猫ふみふみ (2005-11-09 16:31) 

この記事見逃してましたぁ。でも、私のPCにはPhotoshopはおろか、MicrosoftOfficeも入ってませーん。
ヴォイスくん、怖いです。
by Takabee (2005-11-12 15:25) 

◆猫ふみふみさん、有り難う御座います。ペンタブは高性能のものでないと、案外使えないですよ。

◆Takabeeさん、有り難う御座います。Officeは使わなくてすむんですか。作業は部下にですか。
by ヴォイス (2005-11-14 18:43) 

PhotoshopにImageReadyが付いているのは知ってましたが使い方を知りませんでした！
有り難うございました　m(_ _)m　という訳でTBさせて頂きました。
by モモパパ (2006-02-01 21:43)