コマ割りでオリジナルGIFアニメーションを作る方法

コマ割り・コマ送りのGIFアニメーションの作り方

GIFアニメーションの作り方

GIFアニメーションってありますよね？

拡張子gifの画像ファイルでブラウザで見たら動画みたいに画像が動くアレです。

ワタクシが初めてホームページを作った頃には「魔女狩り」のような不遇な扱いを受けていました（笑）

不遇な扱いにはサブマリン特許とかいう理由があったんですが、ワタクシはその頃は「古い野暮な手法なのかな？」程度に思ってました…

個人的には、表示するのにプラグインも要らないし、ホームページにちょっとした動きを付けるのには結構便利だと思うのですけど、あんまり見ないですね。

ガラクｔ…ガラパゴスケータイだと５フレームまでしか表示出来ない制限がありましたが、特にガラケーの事を考えなくても良い時代ですし。

GIFアニメの作り方としては、パラパラ漫画の要領で絵を書いて何らかのソフトでコマ送りにする、という流れになります。

GIFアニメを作成出来るソフト

Photoshop（言わずもがな）

GIFアニメを作成出来るフリーソフト

Giam

昔っからあるソフトですね、画像をあらかじめペイントなどで用意する必要はあります。

用意している画像をコマ送りにする事が可能です。

Photoshopを持ってなかった時代にはお世話になりました。

動画からGIFアニメに変換できるフリーソフト

Free Video to GIF Converter

動画をわざわざGIFに変換するようなシチュエーションって結構限られてると思いますが。

ワタクシは以前、PC画面をbandicamで録画してこのソフトでGIFアニメにしてましたね。

Photoshopのフレームアニメーションで作成してみた。

今回は「唯一尊敬できる先輩」より「歩くネコのGIFアニメ」を作ってよ！と言われたのでせっせと作り始めました。

ネコと言っても猫のシルエットです。

早速歩くネコシルエットを描いていきます。

ネコシルエット

Photoshopのパスでも良いのですが、こういうのはillustratorの方がやっぱり強いですね。

とりあえず５コマあればOKかな？

アニメーションウィンドウを出す

デフォルトだとアニメーションウィンドウは出ていないと思いますので、出しまーす。

ウィンドウ　＞　アニメーション

今回はコマ送りのアニメーションを作ろうと思うので、

「フレームアニメーションを作成」もしくは「フレームアニメーションに変換」をクリック。（ワタクシと同じCS4ならアニメーションウィンドウ右下にこっそりあります。）

フレームを複製

新規レイヤーと同じマークのボタンでフレームを追加する事が出来ます。

現在選択中のフレームを次のコマに複製します。

新規レイヤーボタン

ディレイの設定

フレームの下の秒数部分をクリックする事でディレイの設定が出来ます。

ギターやってる人はすんなり理解できると思うのですが、

そのコマを何秒表示して次のコマに進むか…です。

アニメーションのスピード

アニメーションウィンドウのその他

一番左のドロップダウンでアニメーションを何回繰り返すか設定できます。

右上のメニュー内の「アニメーションを最適化」にて同じ色で重なっているフレーム等の無駄な部分を最適化出来ます。

同じく右上メニューの「レイヤーからフレームを作成」は、１レイヤー＝１フレームとして作成できます。

保存方法

「webおよびデバイス用に保存」からGIFを選択して保存すればアニメーションとして保存されます。

GIFで保存する

歩く猫の完成

歩く猫のシルエット

ちなみにサクっと描いているようで

「全然歩いてない！」

「右足出た後また右足出てんじゃん！」

「何か一瞬だけ顔デカくね！？」

というような不具合と原因究明と修正の繰り返しがもちろんあります…

原因究明・修正を繰り返し「もう諦めるか…」となった時に「せっかくここまでやったのだから…」と引き返せなくなる心理をサンクコスト（埋没費用）と言います、と言うのはまた別のお話でしましょうか…