로티파일 제작하여 워드프레스에 올리기

에프터이펙트로 로티 파일을 만들어 워드프레스 사이트에 올리기 위해선
아래 사이트에서 회원가입하고 zxp 플러그인을 다운받아야 한다. 

https://lottiefiles.com/plugins/after-effects?utm_medium=web&utm_source=footer-after-effects

LottieFiles plugin for Adobe After Effects

 

 

그런데 zxp 플러그인을 사용하려면 zxp인스톨러가 필요하다. 
아래에서 다운을 받는다. 

https://zxpinstaller.com/

ZXPInstaller

 

 

그런데 얘를 이용하려면 Adobe Creative Cloud 앱이 설치되어 있어야 한다. 
아니면 에러 뜬다. 

https://www.adobe.com/kr/ 

어도비ㅣ크리에이티브와 문서 관리 및 마케팅 솔루션 | Adobe

 

 

----------------------------------

이제 모든 준비가 완료되었다면, 
에펙에서 원하는 영상을 만든후
아까 설치했던 익스텐션을 실행시켜 익스폴트한다. 

일러파일 레이어들 채로 가져오려면 
임포트 창에서 -> 컴포지션, 레이어사이즈 를 선택한다. 

 

(주의 : 일러에서 에펙으로 가져온 이미지들은 반드시 레이어에서
마우스오른쪽 -> Create ->  Create Shapes from Vector Layer 해주어야 한다!
이걸 몰라서 결과물 이미지가 계속 깨졌고, 일을 두번 했다. ) 

 

 

 

나의 경우, https://lottiefiles.com 으로 올린 파일의 경우 문제가 없었으나,
에펙에서 바로 다운로드 받은 json 파일에는 png 이미지 파일이 액박으로 보였다. 
그래서 그냥 에펙의 Lottiefiles 익스텐션에서 바로 사이트로 파일을 업로드한후 
아래 이미지처럼 데시보드에서 Json 파일을 다운받았다. 

 

 

--------------------------------

 

이제 다운받은 파일을 워드프레스의 엘레멘토키트의 lottie 를 선택해서 올리면 된다. 
(차후에는 엘레멘토 키트 도움없이 바로 소스로 올리는 방법을 사용할 필요가 있다. )

 

아까 다운받은 json 파일을 올리면 된다. 

 

-----------------------------------

그런데 여기서 끝이 아니다. 
복잡한 형태의 경우, 아래처럼 회색선이 깨졌다. 

그래서 나의 경우 배경 이미지와 복잡한 회색 선들을 분리하여 
따로 배경이미지로 만들어 CSS로 이 문제를 해결하였다.