インフォグラフィックのアニメーションgifを作ってみよう！：4/4

こんにちは、Any Illustスタッフです

今日は、前回作ったインフォグラフィック画像を使ってアニメーションgifを作っていきますよ(^O^)／

前回作った画像はこれでした

名称未設定-3-01_2

一枚の画像のすべての位置が動いているインフォグラフィックなども見かけますが、そこまでやろうと思うと大変です

近頃は企業のwebページなどで、サービスの説明用にアニメーションgifを用いているところも多く
今後はそのような用途でアニメーションgifがどんどん使われるようになっていくのではないかと思います
というわけで、今回はそのような用途を見越してこの画像の一つ一つの情報毎にアニメーションgifを作ります！

再配置する

まずは、見やすい大きさの画像に情報を再配置します
gif_01

アニメーションにする

この構図ならわかりやすくシーソーを使った動きが良さそうですね
タイムラインパネルを弄る前にアニメーション用の差分を作り、レイヤーフォルダーに収納していきます
レイヤーフォルダーの目玉を開け閉めするとパラパラ漫画みたいになる状態にしましょう
この作業を先に行うことで、タイムラインパネルの操作が楽になります

キャプチャ

できたら、タイムラインパネルをつかってgifアニメーションにしていきます
こちらの使い方に関しては過去の記事に詳しく書いていますので、そちらを御覧ください

イラスト制作、キャラクター制作、インフォグラフ...

photoshopを使って、歩くgifアニメを作ろう♪：タイムラインパネルを使おう！

http://any-illust.com/photoshop%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%80%81%E6%AD%A9%E3%81%8Fgif%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86%E2%99%AA%EF%BC%9A%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9/

こんにちは！前回まで説明で、歩く動きを描いた８枚の絵が完成しましたねφ(..)今回からはいよいよ！フォトショップのタイムラインパネルを使ってgifアニメーションにしていきますよ～(｀･ω･´)前回の最後に、描いた絵を...

この時のコツですが、すべてを同じ秒数にしないことです
例えば、今回はシーソーをにんじん一つずつ、２回揺らそうと思っていますが
１回揺れた後は、一時停止させてから次の動きに移行するようにします
そして、ループする場合はすべての動きが終わった後、長めに一時停止させます
そうすることで、情報がより伝わりやすくなります
秒数は、赤い丸で囲った部分でいじることができます

タイムラインパネル