デザイン探索2020.10.26

Adobe AnimaiteによるGIFアニメーション作成

皆さんこんにちは。
クリエイターの村本です。

今回、サイトで使用するGIFアニメーションを作成するために
「Adobe Animate」を利用しました。
これまでにもGIFアニメーション自体は作成したことはあったのですが
「Animate」の利用は初めてだったので、
今後のために手順や注意点をまとめておきたいと思います。

---------------------------------
■ 前提
・簡単な「イラストアニメーション」を作りたい方
・Illustrator、Photoshopは使ったことあるけどAnimaiteを使うのは初めてな方向け

---------------------------------
■ 作業全体の流れ
[XD]…Adobe XD
[AI]…Adobe Illustrator
[AN]…Adobe Animaite

0.Animateのヘルプから確認できる『実践チュートリアル』をみて基本を学ぶ

1.[XD]カンプのイラストを、書き出す画像ごとにAIファイルに変換
2.[AI]でイラストの調整
  ※この時、動かしたいオブジェクトと、動かさないオブジェクトをグループ分けしておく
3.[AN]でアニメーションを作成し、gif形式で画像を書き出す
  →詳細は下記参照
4.画像のファイルサイズを圧縮する
  ※アニメーションGIFは、動きが複雑になるとサイズが大きくなってしまいます。
   アニメーションGIF用のファイル圧縮サイトなどの利用がおすすめです。
5.HTMLでjpg、pngと同様に実装する

---------------------------------
■ Adobe AnimaiteによるGIFアニメーション作成

1.[AN]を起動し新規作成する。
2.「ファイル>(ステージに)読み込み」をクリックして、
  作成する元画像の[AI]ファイルのデータを取り込む。
3.タイムライン上でアニメーションの設定を行う。

  ① 動かしたいオブジェクトだけを別レイヤーにしておく
  ② 動かすレイヤーの初期フレームを選択して、オブジェクトを初期状態に調整する
  ③ 調整したオブジェクトを選択して「シンボル」にする
  ④ オブジェクトを選択してアニメーションの基準点を設定する
    (これを忘れると、上手く動かないので注意)
  ⑤ 全レイヤーの終了位置を選択して「キーフレーム」を作成する
    (初期状態と同じ設定のオブジェクトがコピーされる)
    ※動きをループさせることを意識しておく
  ⑥ タイムラインの真ん中を選択して「キーフレーム」を作成する
    この時、アニメーションの動きに合わせてオブジェクトを移動させる
  ⑦ 作成したキーフレームの間を選択して「トゥイーン」を選択し、エフェクトを設定する
    ※キーフレーム間のアニメーションパターンを設定する
  ⑧必要な場合、マスク用のレイヤーを作成する
   (通常通りレイヤーを追加し、右クリックで「マスク」を選択すると
    マスク用のレイヤーになる)

4.「ファイル>書き出し>アニメーションGIFを書き出し」をクリックして画像として書き出す。
  ※画像に透過部分がある場合
   ステージの色=透過部分と判断されるようです。
   [AN]はステージの色がデフォルト#FFF(白色)になっています。
   ですので、イラスト自体に白色を使っていると、その部分まで透過で書き出されてしまいます。
   透過にしたくないときは、ステージの色を変更することで解決できます。

--------------------------------
■まとめ
まずは、Animateのヘルプから確認できる『実践チュートリアル』を試してみてください。
Adobe Illustratorの基本が使える方なら、なんとなく理解できます。
あとは、実際に使ってみてアニメーション特有のツールに慣れるだけです。

私も今回初めて使ってみましたが、2時間ほどで
チュートリアルの確認と、画像の書き出しまでできました。
アニメーションが作れると、表現の幅も広がります。
ツールを使えば思ったより簡単にできるので、興味がある方は試してみてはどうでしょうか。

このブログについて

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。

デザイン探索

muramoto.yuuri