GIFアニメ作成手順/簡易編？〜前編〜
(説明は全てWin使用者向けです)


ここではGIF講座の簡易版ということで
ペインターとwebアニメータを使って画像に動きをつける手順を紹介しています。
使うソフトが２つだけなので前のGIF講座よりは複雑なことを省けてる…ハズ。。
とりあえず細かいことは抜きにして画像に動きを付けたい！という場合にドウゾ。

旧バージョンはこちらから

*今回の目標→透過GIFアニメを作る(コレ→）見本

０．はじめに
gifアニメとはいっても、基本的に普通のgif画像を作るのとたいした違いはないです。
違うのは絵が複数枚あるということだけです。
用意した複数の絵を、gifアニメ作成ツールに全部張り付けるだけでgifアニメになります。
ここで長々と書いてある説明を読むよりも
実際にツールを立ち上げて適当に作ってみたほうがはるかに簡単だったりすると思いますよ^^;

ついでに。gifアニメ以前に､gif画像の作り方からわからない方は
ここ読んでも多分わからないと思いますので
まずは御自分でCG講座を検索してみることをオススメしますよ。
１．使用ソフト
ペイントソフト→何でも良いですがレイヤが使えるものだと便利です。ここではPainter使用。
　　　　　　　　　　無ければWin付属のペイントでも充分作れます。

webアニメータ→ホームページビルダーに付いてくるGIFアニメ作成ツール。
　　　　　　　　　　　ライセンス取得済み(ですよね？)なので米unysisのGIF問題も問題ないはずです。
２．用意するもの
元となる絵数枚→動きを付けたい絵を用意します。これが無ければ始まりません^^;
　　　　　　　　　　　　パラパラアニメの要領なので､少しずつ違った動きの絵が数枚あればOKです。
　　　　　　　　　　　　自分で描くなり何かをスキャンするなりとにかく画像ファイルなら何でも良し。
３．元ファイルの作成

*ここからは画像の作り方の説明なので必要ない方は次ページへJUMP！


まずは元になる画像をペイントソフトを使って開きます。
このとき使うペイントソフトはなんでも良いのですが､レイヤ機能のあるソフトだと使いやすいです。
ここでは例によってPainter6.0使って説明してます。私がこれしか持ってないので^^;

*↓今回の材料です。これは3Dソフトで作ってみたビビ。*
見本ビビ ←*これは見本用にjpgにしてありますが
　GIF画像を作る時に
　jpgファイルを開いたものを元にして作るのは
　お勧めしません。
　一度jpg保存したものは
　画像に細かい汚れが出てしまっている上に
　汚れたままGIFに変換すると
　色数を増やして画像を重くする原因になります。
　
（オマケ：役に立たないですが画像製作作業画面もアリ→aqui）

元となる絵を数枚用意しておきます。(この場合は5枚あります)
これをアイコンサイズに縮小して使います。
別に縮小しなくても良いんですが…
デカイと重くなるので小さめにしておいたほうが無難です。(gifアニメの場合は特に。)
小さくすると細かい部分の間違いが目立たなくなるというメリットもあります^^;


(元画像リスト)
１枚目 ２枚目 ３枚目 ４枚目 ５枚目
元画像１ 元画像２ 元画像３ 元画像４ 元画像５


（3.5．レイヤを利用してパターンを作成）
ここではレイヤを使っていますが、これは
アニメーションのパターンを一つのファイルにまとめてファイルの管理をしやすくしておくためなので
レイヤを使うのが面倒な場合は読み飛ばし可です。
ソフトによってはレイヤをそのままgifアニメにしてくれる便利なものもあるので
そういったソフトを使うのもひとつのテかと。

*レイヤを使うメリット*
→全部の画像をまとめてサイズ変更出来る
→ひとつのファイルで複数の絵を開ける
→各コマのサイズ統一や位置合わせが簡単

まあこの辺の作業が面倒だと思わないならレイヤを使う必要もないですね^^;



閑話休題。

上で作成した元の絵をレイヤに変換していきます。

使用する画像をペイントソフトで開いておいたあとコピーします。
(コピーはショートカットキーのctrl+cを使うと楽です)
コピーしたものをキャンバスにペースト(Ctrl+v)すればレイヤ1ができます。
同様にレイヤ１の上に2枚目の画像をコピーしたものをペーストすると自動的にレイヤ２になります。
これを繰り返して動きのパターンをひとつのファイルにしておきます。
レイヤの表示/非表示を利用して位置のズレを修正しながら
アニメーションパターンをひとつのファイルにまとめます。
レイヤの位置調節は指アイコン指+ドラッグもしくは方向キーでできます。
(下のレイヤウィンドウの目の部分をクリックすると各レイヤの表示/非表示を切り替えられます）

レイヤを色々切り替えて
各画像がうまく重なるように位置を調節します。
この場合は歩いているように見せるために
上下に少しずつ画像をずらしています。

レイヤ１ レイヤ２ レイヤ３ レイヤ４ レイヤ５
元画像１ 元画像２ 元画像３ 元画像４ 元画像５

（位置あわせが出来たらトリミングボタントリミングを使って余分な部分をカットしておくと
　出来上がりサイズが更に縮小されます。
　レイヤを使っておくとここですべての絵の大きさを一括して変更出来るので楽なんです）


(トリミング方法)
まずはトリミングボタントリミングを選択して必要な部分だけを選択します。
その後選択範囲内にポインタを持っていくとポインタがハサミマークに変化するので
そこでクリックすると選択した部分だけが切り取られます。
　ex)カット前選択したあとにクリック→元絵（トリミング後）
４．背景を透過させる
GIFではある一色を透過色として指定しておくと
ブラウザで表示した時にその色で塗られた部分を透明な色として表示してくれます。
透過色にするのは何色でも良いのですが、絵の中に使われていない色にしておくのが無難です。
ここでは背景の白い部分をそのまま透過色として利用します。

透過のさせ方については次ページ参照。


→ＮＥＸＴ