본문 바로가기

공부/tip

[lottie] 애프터이펙트(ae)에서 로티(lottie) 설치 및 벡터 제작 주의사항

728x90
반응형

 

 

 

애프터이펙트에서 제작한 벡터 애니메이션을 lottie를 활용해 웹에 간편하게 올릴 수 있습니다.

애팩에서 로티 파일을 제작하기 위해서는 플러그인 설치가 필요합니다.

 

그럼 애팩에 플러그인 설치 방법을 먼저 알려드리겠습니다.

 

 

https://lottiefiles.com/plugins/after-effects

 

LottieFiles for After Effects

LottieFiles plugin for Adobe After Effects. Render Lottie animations in real-time from within After Effects and supercharge your Lottie workflow.

lottiefiles.com

위 사이트에서 zxp 파일 다운로드 합니다.
파일 다운 후 PC에 설치를 하기 위해서는 zxp 인스톨러가 필요합니다.

 

 

https://zxpinstaller.com/

 

ZXPInstaller

It will not Manage or uninstall your extensions

zxpinstaller.com

 zxpinstaller는 위 사이트에서 다운 받으실 수 있습니다.

 

 

 

 zxpinstaller 사용은 간단합니다.

프로그램을 실행하고 다운받은 zxp 파일을 열어주면 자동으로 설치를 시작합니다.

 

 

설치를 끝내고 애프터이펙트에 들어가서 extensions 메뉴에 들어가면 lottieFiles 이 생긴 걸 확인하실 수 있어요.

 

 

플러그인을 실행하면 위 이미지처럼 lottie 화면이 팝업됩니다. 

참고로 처음 화면에 로그인을 위해서 로그인 화면이 뜰겁니다.

그럼  lottiefiles.com 계정을 넣고 로그인해주시면 됩니다.

 

여기서 lottie 창에서는 콤포지션 단위로 렌더링이 가능하고, 미리보기 및 간단한 설정이 가능하며 업로드를 통해서 lottiefiles.com에서 관리 및 다운로드가 가능합니다.

 

 

lottie 파일 벡터화 안될 때

ai 벡터 파일로 작업했는데 lottie 파일이 픽셀로 렌더링 될 때는 하단 이미지처럼 레이어를 우클릭해서 create shapes from vector layer 로 변환해주세요.

 

 

업로드 한 lottie 파일 확인하기

애팩에서 lottiefiles에 업로드한 파일을 확인하기 위해서 lottiefiles.com에 접속을 먼저 해주세요.

우상단 프로필을 클릭하면 my collections 메뉴가 있습니다. 

접속하면 내가 설정한 아카이브가 보일겁니다. 

 

그럼 파일을 확인하고 상단 메뉴에 download & expor로 json 파일 다운로드가 가능합니다.

이 파일을 다운받아서 개발자분들에게 공유해주시면 됩니다.

 

 

 

728x90
반응형