こんにちは。
今回からお試しで、「GIFスタンプで使えるアニメーションパターン」をシリーズ形式で解説してみようと思います。
私はイラストレーターや絵師ではありませんが、趣味でGIFアニメーションスタンプを作っています。
↓こちらは 過去にツイッチにあった公式スタンプを練習がてらまねして作ってみたものです。
その中で調べたり試したりしたことが増えてきたので、自分用のメモも兼ねて記事にまとめることにしました。
最近はLive2Dを使ったスタンプも多く見かけますが、私は昔ながらのパラパラ漫画のようなGIFアニメーションが好きです。
シンプルな動きでも工夫次第で表現の幅が広がるので、GIFスタンプを作ってみたい方の参考になれば嬉しいです。
また、1記事に多くのパターンを詰め込むと見づらくなりそうなので、今回はパターンごとに分けて紹介していきます。
第1回目は「移動編」。
イラストを横に動かすだけのシンプルなアニメーションですが、登場演出や移動表現の基本となる重要な動きです。
それではよろしくお願いします！
GIFとは
GIF（ジフ）は複数の画像を連続して表示することで、パラパラ漫画のような動きを表現できる画像形式です。
動画ほど複雑な表現はできませんが、
- ファイルサイズが比較的小さい
- 手軽に作成できる
- SNSやスタンプとの相性が良い
といった特徴があります。
私が作っているGIFスタンプも、複数のイラストを少しずつ変化させながら表示することで動きを表現しています。
最近はLive2Dなどを使った滑らかなアニメーションも人気ですが、GIFならパラパラ漫画のような素朴な動きを楽しめます。
移動アニメーション
今回は移動のアニメーションについてなのでちょっと説明。
こんな感じのもので説明します。
移動アニメーションの作り方
GIFアニメーションはパラパラ漫画の要領で作成できるので、イラスト作成ソフトで１レイヤーに１枚のイラストを描きます。
流れとしては、アニメーションのスタートとゴールを決めてそのあとに中間の移動部分を書くのがやりやすいです。
この静止画はレイヤー３つをまとめたものになります。
実際は
スタート位置が一番左の欠けた〇のみを描いたレイヤー、
ゴール位置が一番右の欠けた〇のレイヤー
でこの間に〇を移動させたいので、 真ん中に〇があるレイヤーを用意します。
これだとレイヤーが３枚なので以下のようなGIFになります。
最初のと比べて動きが速いかと思います。
実は最初に表示させたものはレイヤーが３枚ではなく５枚で作ってあります。
↓は分かりやすいように２枚目と４枚目の画像を薄くしています。
改めて５枚のGIFを見てみましょう
なめらか具合が違いますよね？
こんな感じに同じ直線移動でも枚数によってスピード感などが違ってきます。
作業画面はこんな感じです。
今回使っているのはphotoshopというソフトになりますが、どのイラスト作成ソフトでもGIFは作れるので、
気になる方は試してみてください！
自分はほかにはクリスタを使っているのですが、なかなか慣れていなくてまだ勉強中でございます。。。
まとめ
今回は初回ということで 最も単純だと思う直線移動について書いてみました。
直線移動の中にも、徐々に速くなったり、急に遅くなったりするアニメーションもレイヤーの枚数で表現できるので
このへんはまたべつのきじにしたいとおもいます。
パターン関連の記事が増えたらこのページにもリンク張りますので今しばしお待ちください。
ご清聴ありがとうございました。