After Effects
を使ったGIFアニメの紹介
● After Effects とは
● DEMO
● gif 画像の書き出し
● フレームレートについて
● After Effects を使っての提案
Index
After Effects
拡張子は
.aep .aet .aepx
Premiere Pro
拡張子は
.prproj
After Effects
読み込めるファイルは、
.psd .ai .pdf .mp4 …
大体のファイルは読み込めます。
mov ファイルを、
Adobe Photoshopで開いて、
web 用に保存だけ。
https://gyazo.com/7f4bf30cc74463b736d170279f7a99c3
.mov から gif への書き出し
フレームレートについて
フレームレート(FPS)
1秒間に何枚の画像枚数か
周りにのfpsについて
テレビ映像 29.97fps
映画 24fps
日本のテレビアニメ 12fps 〜 24fps
参考:https://www.youtube.com/watch?v=2hNjeOths1w
アニメのfpsを計算してみた
仮に2時間のアニメだった場合
1秒=24fps × 60秒 × 120分
17万2800枚
の画像が必要になるのかな??
gifアニメだと、fpsが多ければ多いほど
ヌルヌルして動いてきれい。
ただ、容量(画像)が重くなったり手間がかかる。
フレームレート(fps)おさらい
After Effects を使っての提案
https://s3.envato.com/h264-video-previews/86541f15-a1c5-49c4-b60e-
032fbbde9891/21569565.mp4
https://s3.envato.com/h264-video-previews/d0c931ad-b135-4df9-8a43-
78f3e0353538/21626658.mp4
https://www.youtube.com/watch?v=_auPrPqaI00
ロゴの提案
ロゴのエフェクトと動画をつかった提案(Premiere Pro)
ありがとうございました
Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと

After Effectsを使ったGIFアニメ

Editor's Notes

  • #10 画像 logo_48.gif
  • #11 youtube デモ
  • #12 どちらかというとフロントエンドにとってメリットがある とはいえコンポーネントベースのデザインは現実的ではない 全体=webページ
  • #15 簡単なデモ(ロゴ+Premiere Pro) logo_sample.prproj