GIFアニメで「ボヨヨン」の動きを作る
こんにちは、デザイナーのTantanです。
前回のGIFアニメで「スットントン」の動きを作る！に続いて、今回は変形を加えた「ボヨヨン」という動きを作ろうと思います。やわらかいものの質感を表現できますので、動くLINEスタンプなどに使うとかわいいと思います。
準備
背景が透過されたロゴなどの画像を用意します。
背景色を別レイヤーに塗ります。（今回は影もいます）
動きの分解
- 元の状態
- 縦に伸びる
- 縦にもっと伸びてタメ
- 一気に縮んで床の反発で横に潰れる
- 反動で少しまた伸びる
- 小さくつぶれる
- 小さくのびる
- 元の状態
これが今回の動きです。
前回のスットントンと似て、地面に反発して２バウンドするのは同じです。
そのとき床に負けて横に潰れることで、やわらかさが表現できます。
レイヤーを複製して変形
分解した動きの分だけレイヤーを複製します。（下から順に並んでいます）
それぞれ変形をします。
重なった状態はこんな感じ。つぶれたとき、高さは縮んで、横幅は伸びています。
タイムラインに並べる
ウィンドウ→タイムラインを表示して、「ビデオタイムラインを作成」にしてください。このへんわからない方は前回をご参照ください→
レイヤーを階段上に並べていきます。タメを作りたいところは少し長めに伸ばしておきます。
書き出してみる
ファイル→書き出し→Web用に保存 ループを無限に設定して保存します。
こんな感じ。
時間調整
ちょっとせわしないのでフレームを足します。
それぞれのレイヤーを１．５倍くらいに伸ばして階段上に並べ直して、、、
こんな感じに並べました。
完成
書き出して完成です。ありがとうございました！
おまけ
ボヨヨンとスットントンのハイブリッドバージョンです。
影も動きに合わせて伸縮しているので、より芸が細かくなっています。
今回のgifアニメも素材配布させていただきますので、権利とか気にせずご自由にお使いください。
がんばれ広島！
