전체 글 (5) 썸네일형 리스트형 [Lottie] #3 - After Effect에서 Lottie 파일 불러오기 2편에 이은 "After Effect에서 Lottie 파일 불러오기" (2편 작성한지 1년 반이 되어서 작성하는 3편...) 필자는 항상 Animation 제작은 AFterEffect를 활용해 왔다. BodyMovin의 업데이트로 Json > Ae로 파일이 불러와지는 업데이트가 되었다. (2021년 8월 기준 5.7.13 버전) https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io Rende.. [Lottie] #2 - Sketch로 Lottie 제작하기! 1편에 이은 2편 "Sketch로 Lottie제작하기" 필자는 기존 Lottie를 제작하기 위해서 PSD를 AfterEffect로 불러와서 작업을 하였다. 그 과정에서 용량이 불필요하게 늘어나면서 인터렉션 적용할 레이어를 제외하고 Merge 하거나 과정에 따라 추가되는 레이어를 또 불러오기 하는 노가다적인 작업을 진행하였다. 그러던 중 Sketch로 작업환경이 바뀌면서 "AEUX"의 사용으로 AfterEffect 간단하게 Sketch를 불러오게 되었으며, 기존에 문제가 되었던 PSD 용량 문제가 해결되었다. (AfterEffect에서 그리기 수정이 불가했던 부분도 수정이 가능하도록 불러와진다.) AEUX란? https://aeux.io/ AEUX Where are drop shadows on groups.. [Lottie] #1 - Lottie 알아보기! Animation 라이브러리 2016년 10월 기준으로 Vector Animation이 사람들에게 이야기되기 시작하였습니다. 2016.11 - FaceBook KeyFrame 2017.02 - Airbnb Lottie Keyframe의 경우 최초 관심을 가지긴 하였지만, AfterEffect에서 작업할 수 있는 환경이 너무 힘이 들었다. 작은용량으로 애니메이션을 구현하는 게 목적이다 보니, 제한적일 수밖에 없었다. pre-composition 미지원 Frame 소수점 단위 사용 불가 ( 29.7 = X ) Group 사용은 추천하지 않습니다. (누락되어서 표기) Layer을 불러 오거나 하는 것보다 Path로 만드는 게 정신건강에 좋다 아래 Github링크에서 AfterEffect제작 예시를 볼 수 있다.. [Overflow] #2 - Overflow 사용하기! https://motion-jb.tistory.com/3 [Overflow] #1 - Overflow 알아보기! UI / UX Design을 하여 UI Flow를 보여주기 좋은 프로그램으로, Sketch / Adobe XD / Figma 와의 연동으로 Web으로 확인이 가능하도록 출력이 가능하다. (Mac Os 전용) 3분가량의 YouTube의 시청만으로도 사용이.. motion-jb.tistory.com 1편에 이은 2편 사용하기입니다. Overflow 홈페이지에서 프로그램을 다운로드하고 Design Tool에 연동을 하면 아래와 같은 화면이 노출된다. 클라우드로 업로드하여, Web으로도 확인 가능하다. 전체적인 Flow확인 및 Design에서 Low타입의 프로토타입으로도 확인 가능하다. 작업 시작 S.. [Overflow] #1 - Overflow 알아보기! UI / UX Design을 하여 UI Flow를 보여주기 좋은 프로그램으로, Sketch / Adobe XD / Figma 와의 연동으로 Web으로 확인이 가능하도록 출력이 가능하다. (Mac Os 전용) 3분가량의 YouTube의 시청만으로도 사용이 가능할 정도로 조작이 쉽다. https://www.youtube.com/channel/UCTe9bsiRlWHpO3kiZhM1AZA Overflow Overflow is the world’s first user flow diagramming tool tailored for designers. Reinventing how user flow diagramming should be done, Overflow empowers desi... www.youtube.c.. 이전 1 다음
