ブログ

GIFアニメで「ボヨヨン」の動きを作る

ball-animation-Ver.2

こんにちは、デザイナーのTantanです。
前回のGIFアニメで「スットントン」の動きを作る!に続いて、今回は変形を加えた「ボヨヨン」という動きを作ろうと思います。やわらかいものの質感を表現できますので、動くLINEスタンプなどに使うとかわいいと思います。

準備

背景が透過されたロゴなどの画像を用意します。
背景色を別レイヤーに塗ります。(今回は影もいます)
ball02

動きの分解

  1. 元の状態
  2. 縦に伸びる
  3. 縦にもっと伸びてタメ
  4. 一気に縮んで床の反発で横に潰れる
  5. 反動で少しまた伸びる
  6. 小さくつぶれる
  7. 小さくのびる
  8. 元の状態

これが今回の動きです。
前回のスットントンと似て、地面に反発して2バウンドするのは同じです。
そのとき床に負けて横に潰れることで、やわらかさが表現できます。

レイヤーを複製して変形

分解した動きの分だけレイヤーを複製します。(下から順に並んでいます)
01
それぞれ変形をします。
重なった状態はこんな感じ。つぶれたとき、高さは縮んで、横幅は伸びています。
02

タイムラインに並べる

ウィンドウ→タイムラインを表示して、「ビデオタイムラインを作成」にしてください。このへんわからない方は前回をご参照ください→
レイヤーを階段上に並べていきます。タメを作りたいところは少し長めに伸ばしておきます。
03

書き出してみる

ファイル→書き出し→Web用に保存 ループを無限に設定して保存します。
こんな感じ。
ball01

時間調整

ちょっとせわしないのでフレームを足します。
それぞれのレイヤーを1.5倍くらいに伸ばして階段上に並べ直して、、、
こんな感じに並べました。
04

完成

書き出して完成です。ありがとうございました!
ball02

おまけ

ボヨヨンとスットントンのハイブリッドバージョンです。
影も動きに合わせて伸縮しているので、より芸が細かくなっています。
ball-bound
今回のgifアニメも素材配布させていただきますので、権利とか気にせずご自由にお使いください。
がんばれ広島!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. Color scheme-page-12 WEBデザインの配色を無難にまとめるための鉄則3つ
  2. illust-tutorial-sample Illustratorチュートリアル 遠近グリッドの使い方!
  3. check-list CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説…
  4. hamburger そのサイト、スマホの使い勝手どうでしょう?〜メニューボタン編〜
  5. 事件簿 イラスト Dropboxで「このアプリで開く→常時」をうっかり押してしまっ…
  6. How-to-make-text-decoration-8 フチ付き文字8段階!チラシやLP制作に使えるイラレ文字装飾テク
  7. japanese-flower-tutorial-title-8 Illustratorチュートリアル 和風「ねじり梅」の描き方
  8. Hirofuro-logo-8 ヒロフロステッカーができるまで。

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP