株式会社リバース(Rivers inc.)|山口県山口市

ブログ

すぐできる!動くイラストの作り方

  • GRAPHIC
  • デザイン
gao
画像:すぐできる!動くイラストの作り方

こんにちは。
少し前にイラストを動かすことがあったのでその方法や気づいたことをまとめてみようと思います。

どこをどう動かす?

今回は例としてリバースのウェブサイトに使用しているイラストを動かしてみます。

制作ソフトはIllustratorを使用しました。
レイヤーを複製し、元のレイヤーを固定&見えなくしてから複製したレイヤーを編集します。

描けたら元のレイヤーを表示し、複製レイヤーを表示したり消したりして具合を見ます。
良さそうならpng画像で書き出しをして準備OKです。


 

超便利アプリ!「アニメ画像に変換する君」

材料ができたらいよいよつなげます。
使用したのは「アニメ画像に変換する君」というアプリです。
3秒もかからず簡単に絵をつなげてくれます。
描いた絵の画像をドロップするだけでできてしまう上に、完成品の保存も色々な形式でしてくれます。
すごい。
簡単なアニメーションを作るのにぴったりで、LINEの動くスタンプを作ることもできるようです。

 

動きの速さを決める

上のアプリで作る際に「フレームレート」を記入する欄があります。

フレームレート(fps)とは
1秒間の動画が何枚の静止画で構成されているかの単位。
大きい数値ほど滑らか、小さいほどカクカク。
ただし大きいほど容量が大きくなる。

滑らかな方がいい!と大きい数値を入れてみたのですが、使用するイラスト枚数が少ないので高速になってしまいました…

2枚の画像で作るなら2くらいがよかったです。

 

今回は少ない枚数で少しだけ動くようにしたのですが動かしたい部位のみ動かすのではなく、広い範囲を動かした方が「動いている」感がより出るなと感じました。


部位だけ動かしたver.

全体を動かしたver.

 

まとめ

絵が動くだけでなんだか可愛らしくて目をひく気がします。
とても簡単にできるのでちょっとしたポイントに使ってみるのもいいかもしれません。

ご依頼・ご相談はこちら

お客様にヒアリングさせていただき、ご依頼内容のボリュームや必要な機能をすり合わせ、
企画・構成と共に御見積もりをスケジュールをご提案いたします。

お問い合わせ

人気の記事

スタッフ