Cách tạo hoạt ảnh LottieFiles trong After Effects

LottieFiles đã tạo một loại tệp có thể chỉnh sửa sau kết xuất nhanh, có thể mở rộng, và bạn có thể dễ dàng tham gia và tạo hoạt ảnh ở định dạng này. Sử dụng Adobe After Effects và một số plugin, bạn có thể trở thành một phần của kiểu cường điệu tệp mới nhất: Lottie.

Lottie là gì?

Lottie, hay dotLottie, là một loại tệp đang làm điên đảo các nhà phát triển web. Bạn có thể đã tạo các hoạt ảnh để đưa vào thiết kế của mình, cho dù chúng dành cho mạng xã hội, thiết kế web hay thiết kế UX và UI. Và bạn có thể lưu ảnh động của mình dưới dạng tệp GIF, SVG hoặc PNG. Tệp Lottie là tất cả các phần tốt của các loại tệp đó, nhưng nhỏ hơn, nhanh hơn và dễ dàng hơn để chỉnh sửa sau khi kết xuất.

LottieFiles là một cơ sở dữ liệu khổng lồ về các hình ảnh động được tạo sẵn được lưu ở định dạng Lottie hoặc JSON. Những hình ảnh động này hiển thị trong thời gian thực, cho phép vận chuyển nhanh hơn vào các thiết kế của bạn. Không phải chờ đợi các tệp này tải xuống; chúng sẽ xuất hiện ngay sau khi trang mở ra.

Để tìm hiểu thêm về LottieFiles, hãy xem phần giới thiệu của chúng tôi về Lottie.

Bắt đầu

Chúng ta sẽ tạo một Lottie bằng Adobe After Effects, nhưng có những phần mềm khác mà bạn có thể sử dụng để tạo hoạt ảnh Lottie của mình. Bạn có thể sử dụng Adobe Animate với plugin LottieFiles để tạo Lottie. Bạn cũng có thể chuyển đổi hoạt ảnh định dạng SVG thành Lottie nếu bạn đã tạo hoạt ảnh ở định dạng này.

Tuy nhiên, After Effects là lựa chọn hàng đầu của chúng tôi, vì LottieFiles đã được tạo ban đầu để sử dụng trong After Effects. Bắt đầu nào.

1. Tạo hoạt ảnh của bạn

Khía cạnh hoạt hình của Lottie của bạn cũng giống như bất kỳ định dạng nào khác. Chúng tôi đã tạo hình minh họa cho hoạt ảnh của mình bằng Adobe Illustrator. Điều này giúp các lớp tách biệt và sẵn sàng nhập vào After Effects. Sau khi hình minh họa của bạn được nhập, bạn có thể điều chỉnh các lớp của bố cục cho hình ảnh động cuối cùng.

Hoạt ảnh Lottie chạy trên một vòng lặp liên tục, vì vậy hãy cân nhắc điều đó cho điểm kết thúc và điểm bắt đầu trong thiết kế của bạn. Hoạt ảnh phải đơn giản và dài khoảng ba giây.

2. Tải xuống các Plugin

Có hai plugin bạn có thể sử dụng để tạo tệp Lottie: plugin LottieFiles hoặc plugin Bodymovin. Cả hai đều có sẵn cho After Effects, nhưng bạn cũng có thể tìm thấy plugin LottieFiles trong phần mềm khác. Mỗi thứ đều làm những việc hơi khác nhau, nhưng chúng ta sẽ tập trung vào plugin LottieFiles ngay bây giờ.

Để tải xuống plugin LottieFiles, hãy truy cập trang plugin LottieFiles After Effects. Bạn sẽ tìm thấy hai tùy chọn tải xuống.

Tùy chọn bên phải yêu cầu Trình quản lý mở rộng từ Anastasiy hoạt động với cả Mac và Windows. Khi bạn đã tải xuống Trình quản lý tiện ích mở rộng, hãy tải xuống plugin ZXP từ trang LottieFiles.

Sau khi tải xuống plugin ZXP, hãy mở Trình quản lý tiện ích mở rộng Anastasiy, nhấp vào After Effectschọn plugin LottieFiles từ danh sách và nhấn Cài đặt.

Quay lại trang plugin LottieFiles, tải xuống cả plugin Adobe Exchange; mở ứng dụng máy tính để bàn Creative Cloud của bạn và cài đặt plugin. Quay lại hoạt ảnh đã hoàn thành của bạn trong After Effects.

Một số người gặp lỗi quyền khi sử dụng các plugin này. Để tránh vấn đề này, hãy truy cập After Effects > Sở thích > Viết kịch bản & biểu thức > Viết kịch bản ứng dụng và đánh dấu vào ô cho Cho phép tập lệnh ghi tệp và truy cập mạng.

Sau khi hoàn tất, cửa sổ bật lên cho LottieFiles sẽ yêu cầu bạn đăng nhập. Nếu bạn chưa có tài khoản LottieFiles, bây giờ là lúc để tạo một tài khoản.

3. Xuất Lottie của bạn

Với các plugin LottieFiles được cài đặt, bạn có thể hiển thị hoạt ảnh Lottie của mình. Trong khi ở trên thành phần hoạt ảnh đã hoàn thành của bạn, hãy nhấp vào Cửa sổ > Tiện ích mở rộng > LottieFiles. Thao tác này sẽ hiển thị một cửa sổ bật lên có tên các sáng tác của bạn. Nhấn vào mũi tên xanh bên cạnh tên bố cục của bạn, điều này sẽ hiển thị cửa sổ kết xuất Lottie.

Sau một vài giây, hoạt ảnh của bạn sẽ xuất hiện trong cửa sổ bật lên. Hoạt ảnh sẽ phát theo thời gian thực trên vòng lặp. Tại đây, bạn có thể chọn lưu hoạt ảnh của mình hoặc tải hoạt ảnh của mình lên thư viện LottieFiles.

Sự nhấp chuột Lưu thành sẽ cung cấp cho bạn hai tùy chọn xuất: Lottie JSON (* .json) hoặc dotLottie (* .lottie). Tệp dotLottie là một tệp nén bao gồm siêu dữ liệu mà chúng tôi không thực sự cần để xuất. Chúng tôi đã đi với Lottie JSON.

Tệp được xuất của bạn sẽ là tệp văn bản, không phải tệp hoạt ảnh trực quan; đây là cách các tệp JSON hoạt động. Nhưng điều gì sẽ xảy ra nếu bạn muốn hoạt ảnh sẵn sàng hoạt động? Hãy xem làm thế nào bạn có thể truy cập nó.

Cách bạn có thể sử dụng hoạt ảnh Lottie của mình

Để tải Lottie của bạn lên thư viện LottieFiles, hãy nhấp vào Tải lên. Điều này sẽ hiển thị trong vài giây. Sau đó, nhấp vào nút có hình quả địa cầu trên đó. Thao tác này sẽ mở ra trang web LottieFiles, nơi bạn có thể gửi hoạt ảnh Lottie của mình vào thư viện LottieFiles. Đặt tên cho tệp của bạn và nhấn Ra tay.

Khi hoạt ảnh của bạn đã được phê duyệt trong thư viện LottieFiles, bạn có thể sử dụng plugin LottieFiles trong phần mềm như Adobe XD, Figma hoặc Sketch để gửi hoạt ảnh đến thiết kế của bạn.

Có nhiều cách khác để sử dụng hoạt ảnh LottieFiles của bạn ngoài việc trực tiếp trong thư viện plugin. Bạn có thể chỉnh sửa thêm hoạt ảnh Lottie của mình từ cửa sổ trong trình duyệt. Nó cung cấp một bảng điều khiển các lớp cơ bản; bạn có thể thay đổi màu nền, tốc độ phát lại, tốc độ khung hình và một số thứ khác.

Từ cửa sổ Handoff, bạn có thể tải xuống hoạt ảnh của mình dưới dạng tệp JSON để triển khai trong thiết kế và phát triển web hoặc bạn có thể chuyển đổi nó thành GIF để sử dụng thông thường hơn. Bạn cũng có thể nhúng hoạt ảnh của mình bằng mã nhúng HTML và cũng có các tùy chọn iOS và Android, vì vậy bạn có thể gửi hoạt ảnh vào thiết kế web của mình.

Nhúng Lottie HTML cho phép bạn chỉnh sửa mã để chỉnh sửa hoạt ảnh của mình. Bạn có thể thay đổi màu sắc và kích thước ngay trong mã khi bạn thêm nó vào trang web của mình.

Tải xuống ứng dụng LottieFiles trên điện thoại cho phép bạn quét mã QR của hoạt ảnh để xem trước hoạt ảnh trong ứng dụng. Bạn cũng có thể sử dụng bàn phím LottieFiles và thả dotLottie của mình dưới dạng nhận xét trong các bài đăng nhất định.

Tạo một Lottie trong After Effects

Mặc dù nó vẫn có thể cảm thấy giống như một loại tệp độc đáo, vì bạn không thể chỉ tải hoạt ảnh của mình lên trực tiếp phương tiện truyền thông xã hội như bạn có thể làm với GIF hoặc PNG, Lottie đi kèm với nhiều lợi ích cho các nhà phát triển web và nhà thiết kế sử dụng plugin hoặc nhúng mã trong thiết kế của họ.

Các tệp Lottie và JSON tiết kiệm không gian và thời gian tải cũng như bảo toàn chất lượng so với các loại tệp truyền thống. LottieFiles liên tục tạo ra những cách thức mới để thực hiện các thiết kế, khả năng là vô tận.

Đọc tiếp

Thông tin về các Tác giả