徒然畑

徒然なるままに。

【制作メモ】GIFアニメ簡単だよ3ステップでできちゃうよという話【animation】

どうもです。おせち美味しかったです。

先日思い立ってGIFアニメ作ってみました。
今年はアニメーションをやる、と去年の暮れ頃決意していたということもあり、一番とっかかり安いと言われるGIFアニメにトライしてみました。
作ってみた結果言えることとしては、イラスト描けるよ!という人にとってはちょー簡単です。私みたいな動物が動物に見えないものを描く人間でも描けるくらいです。もっといえば、イラストを描かなくても自分で用意できる画像が何かあれば作れます(最低枚数2枚)。
今回は実際の私の制作過程を晒しながらどんな感じか説明します。

【作業環境】
CLIP STUDIO PAINT EX(作画用)
Photoshop CC(アニメーション用)
※クリスタにうごイラ作成機能があるのでそれ使えばクリスタ一本で行けますが、今回はフォトショさんを使ったアニメーションGIFをやってみたかったのでこの二つを使用しました。

ステップ1:画像を作る or 準備する

まずは画像を準備します。年賀用GIFということで鏡餅犬を描くことにしました。

【下書き】
鉛筆でグリグリ書きながら発想を膨らませます。

f:id:mio_U_M:20180104182217j:plain

犬を吠えさせて2018の1を補う(ワン = ONE )という薄ら寒い親父ギャグかましてみることにしました。
可愛く描けばきっと許されるという目論見をここで持ちます。

【ペン入れ〜仕上げ】
ここでクリスタで作業します。仕上がりはこんな感じ。

f:id:mio_U_M:20180104182856p:plain

午年の時に鏡餅馬の年賀状を描いていたので、そのデータをうまいこと引っ張って来てうまいこと手を抜けるところを手を抜きます。
あと普通にイラストを作るのと違い、画像作るタイミングでアニメーションの差分を作ります。ステップ2の画像書き出しに向けてレイヤー分けをある程度考慮しておくのがポイントです。
今回は

  • ONE以外の数字が一個ずつ登場するアニメーション
  • 右の犬が吠えるアニメーション
  • 右の犬が吠えてONEが出てくるアニメーション

の3つの要素を盛り込みたかったので、数字のレイヤー分けと犬の口元の差分作成を心がけました。

f:id:mio_U_M:20180104201131j:plain

f:id:mio_U_M:20180104201138j:plain

正直口元の差分は2つでもよかったかもと思ってます(人間の目優秀なので)。
ただ差分を増やした分動きの滑らかさが増すので、そこは作りたいものの雰囲気次第というところでしょうね。
(今回は様子見ということで3つにしました)

可愛く描けなかったのでさっきの目論見が外れそうな気がして来ましたがとりあえず横に置いて次に進みます。

ステップ2:画像を書き出す(セル作り)

レイヤーを表示したり表示させなかったりして画像書き出すだけです。以上。
…とだけの説明だとあまりに雑なのでちょっと説明。

数字が一個ずつ出てくる画像についてはそのまま表示・非表示を繰り返しながら書き出していますが、右の犬とONEの画像はいい感じに動いてるなーと感じさせるために伸縮させながら書き出してます。
特に犬の吠えている様子は口を半開きにしたタイミングで犬全体を若干縮ませ、吠えて口が大きく開いたタイミングで犬全体を若干伸ばしています。

f:id:mio_U_M:20180104201156j:plain

これ何やってるかというと、吠える前の予備動作と吠えた後の後動作を作ってそれらしく動いているように見せようとしているんです。
犬の吠えている様子を思い返してみるとわかるかと思うんですけど、吠える前って吠えるためにちょっと溜めて、吠えたらがばあっと体が大きく見えるじゃないですか。
犬が吠える動作がすぐ観察できないよ、という人はならない場合は素直にYouTubeググるか、試しに犬になりきって吠える真似してください。
吠える前にちょっと頭屈ませて、吠えた時に頭上向きになるはずなので。
※最初この伸縮をせずに書き出してアニメーションさせた時にすごくぬめーっとした動きをしたので試しに犬になりきった結果発見しました。

ここらへんのアニメーションを作る際の物体の動きについては以下の記事がとても参考になると思います。作った後この記事読み返してなるほどと納得できたんで。

photoshopvip.net

※ちなみに例で用いられているアニメーションは全てCodePenで見れるので、フロントエンドエンジニアの方がアニメーション実装の際に参考にできるかと思います

ほんとは吠える用に犬の顔も差分作ればよかったかなあと思いましたが、伸縮だけでもそれっぽく見えるので後からレイヤー分けはしませんでした。(人間の目は優秀だし)
犬の吠える動作のロジックと同じ考えでONEの文字も適度に伸縮させつつ必要な画像を書き出したら、次のステップに進みます。

ステップ3:アニメーションする

私はみんな大好きPhotoshop先生で作りました。
あらかじめアニメーションさせる画像を作っているので、以下の要領で作ります。

1.「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を選択
f:id:mio_U_M:20180104202107p:plain


2. 「レイヤーを読み込む」パネルが開いたら、ステップ2で書き出した画像を選択して「OK」をクリック
f:id:mio_U_M:20180104202217p:plain


3. レイヤーとして読み込まれたら「タイムライン」ウィンドウを表示し、レイヤーをフレームとして読み込み、表示秒数やループ設定をする
f:id:mio_U_M:20180104203907j:plain
f:id:mio_U_M:20180104203911j:plain


そんな感じで出来上がったGIFアニメがこちら。

f:id:mio_U_M:20180104175931g:plain

ね、(画像の準備さえ頑張れば)簡単でしょ。

まとめ

アニメーションGIFって難しくないって聞くけどどうせ難しいんだろケッと思っている方に向けて書きました。
制作時間としては9フレームで6時間弱くらいで作りましたがそのうち大半は画像作りです。つまり画像の準備さえできれば、思い立ったら簡単にばーっと作れます。
あと今回はフォトショの力を借りましたが、ウェブ上にはGIFアニメつくるためのサイトが色々あるので、フォトショなんてねーよって方はそちらを使ってみてはどうでしょうか。
※参考URLにまとまっているリンク貼っています

次は少ない枚数でクリスタのみを使ったGIFアニメにトライしてみたいと思います。気が向いたときにやるので早くやれよコラという方は督促してください。励みにしますので。

参考URL

photoshopvip.net
このリンクはGIFアニメやってみたい!という人にとってはおすすめです。とてもよくまとまってます。
今回のフォトショで作る手順はこちらを参考にしながら作りました。
またGIFアニメーションが作れるサイトまとめも書かれてあるのでぜひチェック。

www.haconiwa-mag.com
サンプルがめちゃ可愛いです。。。!次はこの可愛さ目指す。