制作ノウハウ Adobe AnimaiteによるGIFアニメーション作成
2020年10月26日
Adobe AnimaiteによるGIFアニメーション作成
![アニメーション - 福岡市のホームページ制作会社 AliveCast アニメーション](https://i0.wp.com/alivecast.co.jp/acwp/wp-content/uploads/2020/10/DALLE-2024-08-30-175508-A-depiction-of-a-famous-blue-cartoon-character-robot-cat-in-the-style-of-traditional-Japanese-ukiyo-e-woodblock-prints-The-cat-should-be-portrayed-in.webp?resize=1024%2C1024&ssl=1)
皆さんこんにちは。
クリエイターの村本です。
今回、サイトで使用する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時間ほどで
チュートリアルの確認と、画像の書き出しまでできました。
アニメーションが作れると、表現の幅も広がります。
ツールを使えば思ったより簡単にできるので、興味がある方は試してみてはどうでしょうか。
筆者が書いたこちらの記事も人気です。合わせてどうぞ
#画面サイズが変わっても、画像を伸び縮みさせずに表示させる方法
#width指定が効かない?Flexboxは子要素の横幅指定がポイント
関連記事
Webサイトに置ける各コンテンツの役割と、なぜそれが必要なのか?
・「グローバルナビゲーション」の役割・見せ方
・「トップページ」の役割・見せ方_1/2
・「トップページ」の役割・見せ方_2/2
・「特徴/他社との違い/選ばれる理由」の役割・見せ方
・「実績/お客様の声」の役割・見せ方
・「サービス/商品の詳細情報(一覧)」の役割・見せ方
・「よくあるご質問」の役割・見せ方
・「お問合せ/予約/購入」ページの役割・見せ方
・「お知らせ/ブログ」ページの役割・見せ方
・「採用情報」ページ(サイト)の役割・見せ方