<HTML LANG="ja">
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>サルなら無理かもGIFアニメの作り方</TITLE>
<style type="text/css">
	<!--
	a:link    {font-size: 12pt; text-decoration:none; color:#0000FF }
	a:visited {font-size: 12pt; text-decoration:none; color:#2853D0 }
	a:active  {font-size: 12pt; text-decoration:none; color:#2853D0 }	
	a:hover   {font-size: 12pt; text-decoration:none; color:#2853D0 }	
	body,tr,td { font-size: 12pt;}
	-->
</style></HEAD>
<BODY TEXT="#285360" LINK="#2853D0" VLINK="#2853D0">
<FONT STYLE="font-weight:bold; font-size:18pt; ">-GIFアニメ製作法-</FONT>　　<A HREF="../index.html"><FONT STYLE="font-size:10px;">→戻る</A></FONT><P>
<TABLE WIDTH="1024" BORDER="0" cellpadding="0" cellspacing="20" >
<TR><TD BORDER="0"><B>０．前口上</B><P>
　動画の上達の近道は？　上手い人の作品を見ることです。<BR>
　というわけで、ワタクシが持っている情報を公開していい作品を作ってもらい、みんなで幸せになっちゃおうよ。というわけ。<BR>
　わかるかなー？　わからなかったらどんどん質問してよ。わかるまで説明するしー（はねるのトびらより抜粋）<P>
　それはさておき、このウルトラ我流の知識が役に立つのかどうかすごーく疑問なところですが、１つの例を使ってでき上がるまでの道筋を……。</TD></TR>
</TABLE>
<P>　<P>
<DIV ALIGN="center">
<TABLE BORDER="0" WIDTH="1024" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0" VALIGN="top">
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>１．はじめに</B>　　　　<FONT STYLE= "font-size:8pt; ">タイトルにあるとおりGIFアニメの作り方です</FONT>
<HR SIZE="2" NOSHADE>
　GIFアニメの利点はやはり繰り返し機能でしょう。というわけで作りたい動作を思い浮かべましょう。<BR>
　思い浮かびましたでしょうか？　思い浮かんだのであればこれで5割完成です。<BR>
　アニメの場合、実写モノと違い余分な部分を切り落とすのはかなりの痛手なので、ここでしっかりやればやるほど時間と手間の節約になります。この段階で動画の時間（または枚数）まで決めてしまいたいものです。<P>
　ちなみに、大体1秒間に8枚（以下8f/1sと表記）あれば動いているように見えます。しかし、枚数が少ないほどコツがいります。逆に枚数を増やせば何にも考えなくても動いてしまいますが、その分手間はかかります。手間を取るかコツをとるか。微妙なトコロですね。<P>
　と、いうわけで手っ取り早く6枚と宣言。
</TD></TR></TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>２．準備</B>　　　<FONT STYLE= "font-size:8pt; ">道具を準備します</FONT>
<HR SIZE="2" NOSHADE>
　特に決まった道具が必要ってわけではないので、ここでは恥ずかしながら筆者の製作環境を公開します。<P>
<DT>ハード編<BR>
　<A HREF="pc.html">俺PC</A>参照
<BLOCKQUOTE>　この中でぜひとも欲しいものはペンタブ。今までのペンタブ暦からWACOMのintuosが使いやすいと思います。<BR>
　その他、Photoshopを使うならデュアルモニタとかいろいろ便利道具がありますが、全然なくても大丈夫なので参考程度に。</BLOCKQUOTE>
<DT>ソフト編<BR>
　A．絵描き　　→<A HREF="http://www.adobe.co.jp/products/photoshop/main.html">Photoshop7.0</A><BR>
　B．動画確認　→<A HREF="http://www.vector.co.jp/soft/win95/art/se089288.html">PhotoMotionAVI</A><BR>
　C．GIFアニ作成→Animation GIF Maker
<BLOCKQUOTE>　ABに関してこの組み合わせで用意できればかなり楽チン環境を作り出すことができます。<BR>
　PhotoMotionAVIは、PhotoshopファイルであるPSD形式のレイヤ1枚1枚を一定時間間隔のAVIファイルを作り出してくれるありがたいソフトです。これで確認しながら作れば誰でもつくれますね。<BR>
　Photoshopは、レイヤの濃度を調整できるんでトレースするのにラクチンというのもあります。<BR>
　ちなみにPhotoshopはバージョン5までレイヤ99枚までしか作れないようなのでバージョン6以降を用意したいものです。ElementsやAlbumでもPSDで保存できればいいんですけど、使ったことないのでわかりません。（Photoshopの覚えておいた方がいいショートカットなどは下にまとめておきました）</BLOCKQUOTE>
<BLOCKQUOTE>　あと肝心のゼッタイ必要なGIFアニ製作ソフトなのですが、Animation GIF Makerはすでにサポート切れのようでリンクされていませんでした。何かテキトウなものを<A HREF="http://www.vector.co.jp/">Vector</A>あたりで見つけて下さい。</BLOCKQUOTE>
</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>３．元絵の作成</B>　　　<FONT STYLE= "font-size:8pt; ">絵を作ります</FONT>
<HR SIZE="2" NOSHADE>
　ここから気合と根性の勝負になります。<BR>
　例えば1秒の動画を作ろうと思えば、8f/1sでも8枚になります。8枚も同じような絵を描くのはかなりシンドイですけどまあ頑張りましょう。<P>
　元絵のサイズは縦横比2倍（面積4倍）で作ってあとから縮小をかけるのがキレイに仕上がります。さらに、画面からはみ出るような作品の場合、ふちを作っておいた方がラクチンです。<BR>
　今回の例では、完成サイズを320×240とするので、元絵は800×600で作ります（<A HREF="#img00">図1</A>）。白い部分が完成時の表示部分、グレーの部分がふちの部分となります。背景レイヤーに色分けしてあります。<P>　<P>
　それでは描きますか。<P>
　とりあえずレイヤ1に下描き（<A HREF="#img01">図2</A>）。いやぁ恥ずかしい。最近は下描きねぇと描けないんでさあ。特にこういう細かいメカ描写の場合は。これからGIFアニを作ろうと思う人は最初は人物だけにしといた良いと思います。<BR>
　で、出来上がったレイヤ1の不透明度を下げて（30％くらいがいいかな）レイヤ2に描きました。これで1枚目完成です（あ、髪の毛が短くなってるというつっこみはなしで。めんどくさくなりました）<P>　<P>
　2枚目以降を描く前に動画のコツを書いとかないといけないですね。<P>
　基本は「速く動かすところは枚数少なく、ゆっくり動かすところは枚数多く」です。<BR>
　まあ、言葉で言うより実物見たほうが速いんで、<A HREF="#img03">図4</A>を用意しました。図4-1がGIFアニでそれを分解したのが図4-2です。8f/1sで作ってます。<BR>
　この世の中の動きは物理法則に則っているので基本的に等加速度運動になります。等速運動でも加速／減速時には等加速度です。なので2次曲線を思い浮かべながら描いていけば気持ちよく動くのではないでしょうか？<BR>
　自分でも初めてこんな風に並べたので驚いてますけど、スムーズに動かすところ（2〜9）は縦に並べるときれいな曲線になるんですねえ。<P>　<P>
　さて、話を元に戻して、動画を作るには「追い描き」と「中割」の2種類方法があります。<BR>
　追い描きは前の絵から次の絵を描く方法です。一気に動くところ（図4で言えば1→2）は追い描きの方がラクチンです。中割はFlashなどで言えばキーフレームを描いておいて間を埋めてくという方法です。図4では7、8、9は最初の1と6を使って中割してます。繰り返しGIFアニだとどうしても中割をつかわないといけませんが、適宜どっちか使い分けて行けばよいと思います。<P>
　今回の例で追い描き（図5）と中割（図6）を使用したところを示しておきました。<BR>
　追い描きにコツもへったくれもないので飛ばして、あー前の絵の不透明度は30％くらいってことくらいか。中割は真ん中じゃなくて次の絵にちょっと近づけるというところでしょうか？　中割の場合は前の絵を40％、次の絵を20％と前後で不透明度に差をつけるくらい言わなくても良いかもしれません。<P>
　動画を描くときの注意点ですが、枚数を増やすときは前の絵からのコピーではなく、動いていないところもちゃんと１から描いたほうが違和感がないような気がしますのでメンドウでも１から描くことをお勧めします。
</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>４．動画の確認</B>　　　<FONT STYLE= "font-size:8pt; ">ここで初めて動かします</FONT>
<HR SIZE="2" NOSHADE>
　できたPSDファイルをAVIに変換します。一発でうまくいくと感動モノですんでワクワク、ハラハラ感がたまりません。<P>
　PhotoMotionの便利なところは各レイヤーの不透明度に影響されないので（この辺があえてAfterEffctsを使ってない理由なんですが）いちいち不透明度を戻さなくてもいいいのが良いんですねえ。<BR>
　AVIに変換する際の注意ですが、なるべく圧縮率の高いコーデックを選ぶことをお勧めします。繰り返しアニGIFということでそのままAVIも繰り返して使います（メディアプレイヤーの繰り返しをONすればOK）。ここでファイルの容量が大きくなると2度目の再生の際もたついて、ちゃんとできててもつなぎが悪いように見えてしまいます。<BR>
　まあこの辺はPCパワーにもよってしまうのでコーデックを選んでももたつく場合は1つのファイルで繰り返し再生できるようにしてやる必要があります（<A HREF="#img07">図７</A>）<P>
　これでうまくいってれば下に進みます。うまくいってなければ３．に戻って、納得いくまで３．４．を繰り返しましょう。
</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>余談</B>　　　<FONT STYLE= "font-size:8pt; ">加工しようかどうしようか</FONT>
<HR SIZE="2" NOSHADE>
　とりあえずここまででほとんど完成です。ここから色塗るもよし。ブラーかけるもよし。線が黒１色であればベタ塗りでさくさく塗れることでしょう。<P>
　今回は色塗りはなしです。（基本的には絵板と同じですんで。Photoshopで絵板みたく使うには選択範囲→色域指定で逆マスクができます）。
</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>５．GIF化</B>　　　<FONT STYLE= "font-size:8pt; ">最後の仕上げ</FONT>
<HR SIZE="2" NOSHADE>
　GIF化するには、各レイヤーをばらばらにGIFで保存してやる必要があります。この辺が一気にできれば超ラクチンなんですけどねえ。<BR>
　まずはふち部分を切り取ります。<BR>
　イメージ→カンバスサイズで640×480にすればふちが切れます。<P>
　次は解像度を下げます。<BR>
　イメージ→画像解像度で320×240で完成サイズになります。<P>
　で、各レイヤーをGIF化するんですが、直接GIF保存するよりもweb用に保存の方が軽くなるので、web用に保存してやりましょう。白黒なら色数は4で十分です。とにかくGIFアニは容量が大きくなりがちなので、ちょっとでも容量が減る努力は必要です。<BR>
　そうそうweb用に保存の場合でもレイヤの不透明度が反映されるので全部のレイヤの不透明度は100％に戻しておかないとあとでビックリします。<P>　<P>
　GIFアニ化にする際ですが、ウェイトの設定方法が重要な鍵です。<BR>
　GIFアニのウェイトは1=1/100sなので、8f/1sなら12、12f/1sなら8となります。こだわるのであれば実際のアニメはビデオのフレームじゃなくてフィルムのフレームが基本なのでフルアニメ＝24f/1s、2コマ打ち＝12f/1s、3コマ打ち＝8f/1sということになるらしいです。まあ、GIFアニなので微妙なウェイトもOKだと思いますけど。<BR>
　というわけで気の済むまでウェイトをいじっては動かしを繰り返し、完成に至ります（<A HREF="#img08">図8</A>）<P>
　※完成品をブラウザで確かめてみたんですけど、ウェイト4はIE系じゃ効かないみたいです。というわけでネスケが正解。GIFアニ見るならネスケです。でもオレのネスケは4.7なんで、6とか7はどうかわかりません。もしくはIrfanViewなどの画像閲覧ソフトで見てね。
　</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
<TABLE BORDER="1" WIDTH="640" cellpadding="10" cellspacing="0">
<TR><TD BORDER="0">
<B>６．おわりに</B>
<HR SIZE="2" NOSHADE>
　文章ばっかりのかなりわかりづらいモノになってしまいましたが、それだけ奥が深いものだと思います。<BR>
　手っ取り早く慣れるには○○原画集みたいなものを買ってきてそれを写してみるというのが近道です。GAINAX発行のものが本当にそのままなのでかなりオススメ。ボクも最初はFLCLでした。<P>
　あと、これを読んで「あれ？　こんなことも知らないの？」とかあれば教えて欲しいです。
</TD></TR>
</TABLE><FONT STYLE= "font-size:5pt; ">　<BR></FONT>
</TD><TD BORDER="0" VALIGN="top" ALIGN="center">
<A NAME="img00"></A>
<A HREF="../gazou/gif_ani/img00.gif"><IMG SRC="../gazou/gif_ani/img00_s.gif" WIDTH="320" HEIGHT="240"><BR>図1</A><P>
<A NAME="img01"></A>
<A HREF="../gazou/gif_ani/img01.gif"><IMG SRC="../gazou/gif_ani/img01_s.gif" WIDTH="320" HEIGHT="240"><BR>図2</A><P>
<A NAME="img02"></A>
<A HREF="../gazou/gif_ani/img02.gif"><IMG SRC="../gazou/gif_ani/img02_s.gif" WIDTH="320" HEIGHT="240"><BR>図3</A><P>
<A NAME="img03"><IMG SRC="../gazou/gif_ani/img03.gif" WIDTH="240" HEIGHT="29"><BR>図4-1<P>
<A NAME="img04">
<IMG SRC="../gazou/gif_ani/img03-1.gif" WIDTH="240" HEIGHT="29">1<BR>
<IMG SRC="../gazou/gif_ani/img03-2.gif" WIDTH="240" HEIGHT="29">2<BR>
<IMG SRC="../gazou/gif_ani/img03-3.gif" WIDTH="240" HEIGHT="29">3<BR>
<IMG SRC="../gazou/gif_ani/img03-4.gif" WIDTH="240" HEIGHT="29">4<BR>
<IMG SRC="../gazou/gif_ani/img03-5.gif" WIDTH="240" HEIGHT="29">5<BR>
<IMG SRC="../gazou/gif_ani/img03-6.gif" WIDTH="240" HEIGHT="29">6<BR>
<IMG SRC="../gazou/gif_ani/img03-7.gif" WIDTH="240" HEIGHT="29">7<BR>
<IMG SRC="../gazou/gif_ani/img03-8.gif" WIDTH="240" HEIGHT="29">8<BR>
<IMG SRC="../gazou/gif_ani/img03-9.gif" WIDTH="240" HEIGHT="29">9<BR>
図4-2<P>
<A NAME="img05"></A>
<A HREF="../gazou/gif_ani/img04.gif"><IMG SRC="../gazou/gif_ani/img04_s.gif" WIDTH="320" HEIGHT="240"><BR>図5</A><P>
<A NAME="img06"></A>
<A HREF="../gazou/gif_ani/img05.gif"><IMG SRC="../gazou/gif_ani/img05_s.gif" WIDTH="320" HEIGHT="240"><BR>図6</A><P>
<A NAME="img07"></A>
<IMG SRC="../gazou/gif_ani/img06_s.gif" WIDTH="320" HEIGHT="253"><BR>図7<P>
<A NAME="img08"></A>
<IMG SRC="../gazou/M057.gif" WIDTH="320" HEIGHT="240"><BR>図8-1<P>
<IMG SRC="../gazou/gif_ani/img08-1.gif" WIDTH="160" HEIGHT="120">　1　ウェイト12<BR>
<IMG SRC="../gazou/gif_ani/img08-2.gif" WIDTH="160" HEIGHT="120">　2　ウェイト4<BR>
<IMG SRC="../gazou/gif_ani/img08-3.gif" WIDTH="160" HEIGHT="120">　3　ウェイト12<BR>
<IMG SRC="../gazou/gif_ani/img08-4.gif" WIDTH="160" HEIGHT="120">　4　ウェイト8<BR>
<IMG SRC="../gazou/gif_ani/img08-5.gif" WIDTH="160" HEIGHT="120">　5　ウェイト8<BR>
<IMG SRC="../gazou/gif_ani/img08-6.gif" WIDTH="160" HEIGHT="120">　6　ウェイト12<BR>
図8-2<P>
</TD></TR>
</TABLE>
<TABLE WIDTH="1004" BORDER="1" cellpadding="20" cellspacing="0" >
<TR><TD BORDER="0"><B>覚えておくと便利なPhotoshopのショートカット</B><P>
画面移動：spaceキー＋マウス移動<BR>
スポイト：Alt＋右クリック<BR>
やり直し：Ctrl＋Alt＋z<BR>
新規レイヤ作成：Ctrl＋Shift＋n<BR>
web用に保存：Ctrl＋Shift＋Alt＋s<BR>
</TABLE>
</DIV>
</BODY>
</HTML>
</A>
