Πώς να δημιουργήσετε ένα Animation LottieFiles στο After Effects

Το LottieFiles δημιούργησε έναν γρήγορο, επεκτάσιμο, επεξεργάσιμο τύπο αρχείου μετά την απόδοση και είναι εύκολο για εσάς να εμπλακείτε και να δημιουργήσετε κινούμενα σχέδια σε αυτήν τη μορφή. Χρησιμοποιώντας τα εφέ Adobe After και ορισμένες προσθήκες, μπορείτε να είστε μέρος της πιο πρόσφατης διαφημιστικής εκστρατείας τύπου αρχείου: το Lottie.

Τι είναι το Lottie;

Το Lottie, ή το dotLottie, είναι ένας τύπος αρχείου που προκαλεί θύελλα τους προγραμματιστές ιστού. Μπορεί να έχετε δημιουργήσει κινούμενα σχέδια για να συμπεριλάβετε στα σχέδιά σας, είτε πρόκειται για μέσα κοινωνικής δικτύωσης, σχεδιασμό ιστοσελίδων ή σχεδιασμό UX και UI. Και πιθανότατα αποθηκεύετε τα κινούμενα σχέδια σας ως αρχεία GIF, SVG ή PNG. Ένα αρχείο Lottie είναι όλα τα καλά μέρη αυτών των τύπων αρχείων, αλλά μικρότερο, ταχύτερο και ευκολότερο στην επεξεργασία μετά την απόδοση.

Το LottieFiles είναι μια τεράστια βάση δεδομένων με προκατασκευασμένα κινούμενα σχέδια που αποθηκεύονται σε μορφές Lottie ή JSON. Αυτά τα κινούμενα σχέδια αποδίδονται σε πραγματικό χρόνο, επιτρέποντας την ταχύτερη αποστολή στα σχέδιά σας. Δεν υπάρχει αναμονή για λήψη αυτών των αρχείων. θα εμφανιστούν μόλις ανοίξει η σελίδα.

Για να μάθετε περισσότερα σχετικά με το LottieFiles, ανατρέξτε στο μας εισαγωγή στο Lottie.

Ξεκινώντας

Θα δημιουργήσουμε ένα Lottie χρησιμοποιώντας Adobe After Effects, αλλά υπάρχει άλλο λογισμικό που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε το κινούμενο σχέδιο Lottie. Μπορείτε να χρησιμοποιήσετε το Adobe Animate με την προσθήκη LottieFiles για να δημιουργήσετε ένα Lottie. Μπορείτε επίσης να μετατρέψετε μια κινούμενη εικόνα σε μορφή SVG σε Lottie, εάν έχετε ήδη δημιουργήσει μια κινούμενη εικόνα σε αυτήν τη μορφή.

Το After Effects είναι η κορυφαία επιλογή μας, ωστόσο, δεδομένου ότι το LottieFiles δημιουργήθηκε αρχικά για να χρησιμοποιηθεί στο After Effects. Ας αρχίσουμε.

1. Δημιουργήστε το Animation σας

Η όψη κίνησης του Lottie σας είναι η ίδια όπως και για οποιαδήποτε άλλη μορφή. Δημιουργήσαμε την εικονογράφηση του κινούμενου σχεδίου μας χρησιμοποιώντας το Adobe Illustrator. Αυτό διατηρεί τα επίπεδα ξεχωριστά και έτοιμα για εισαγωγή στο After Effects. Μόλις εισαχθεί η εικόνα σας, μπορείτε να προσαρμόσετε τα επίπεδα της σύνθεσής σας για το τελικό κινούμενο σχέδιο.

Τα κινούμενα σχέδια Lottie εκτελούνται σε συνεχή βρόχο, γι' αυτό σκεφτείτε το για τα σημεία λήξης και έναρξης του σχεδίου σας. Το κινούμενο σχέδιο πρέπει να είναι απλό και να διαρκεί περίπου τρία δευτερόλεπτα.

2. Κατεβάστε τα πρόσθετα

Υπάρχουν δύο πρόσθετα που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε ένα αρχείο Lottie: το πρόσθετο LottieFiles ή το πρόσθετο Bodymovin. Και τα δύο είναι διαθέσιμα για After Effects, αλλά η προσθήκη LottieFiles μπορεί επίσης να βρεθεί σε άλλο λογισμικό. Το καθένα κάνει ελαφρώς διαφορετικά πράγματα, αλλά θα επικεντρωθούμε στην προσθήκη LottieFiles αυτή τη στιγμή.

Για να κάνετε λήψη της προσθήκης LottieFiles, μεταβείτε στο Σελίδα προσθήκης LottieFiles After Effects. Θα βρείτε δύο επιλογές λήψης.

Η επιλογή στα δεξιά απαιτεί ένα Extension Manager από την Anastasiy που λειτουργεί τόσο με Mac όσο και με Windows. Αφού κατεβάσετε το Extension Manager, πραγματοποιήστε λήψη της προσθήκης ZXP από τη σελίδα LottieFiles.

Αφού ολοκληρωθεί η λήψη του πρόσθετου ZXP, ανοίξτε το Anastasiy Extension Manager και κάντε κλικ Συνέπειες, επιλέξτε την προσθήκη LottieFiles από τη λίστα και πατήστε Εγκαθιστώ.

Επιστρέψτε στη σελίδα της προσθήκης LottieFiles, κάντε λήψη και της προσθήκης Adobe Exchange. ανοίξτε την εφαρμογή για υπολογιστές Creative Cloud και εγκαταστήστε την προσθήκη. Επιστρέψτε στα τελειωμένα σας κινούμενα σχέδια στο After Effects.

Μερικοί άνθρωποι έχουν ένα σφάλμα άδειας κατά τη χρήση αυτών των προσθηκών. Για να αποφύγετε αυτό το ζήτημα, μεταβείτε στο Συνέπειες > Προτιμήσεις > Σενάριο & Εκφράσεις > Scripting εφαρμογών και σημειώστε το πλαίσιο για Να επιτρέπεται στα σενάρια να γράφουν αρχεία και να έχουν πρόσβαση στο δίκτυο.

Μόλις γίνει αυτό, το αναδυόμενο παράθυρο για το LottieFiles θα σας ζητήσει να συνδεθείτε. Εάν δεν έχετε ήδη λογαριασμό LottieFiles, τώρα είναι η ώρα να δημιουργήσετε έναν.

3. Εξαγωγή του Lottie σας

Με εγκατεστημένα τα πρόσθετα LottieFiles, μπορείτε να αποδώσετε την κινούμενη εικόνα Lottie. Ενώ βρίσκεστε στην ολοκληρωμένη σύνθεση κινουμένων σχεδίων, κάντε κλικ Παράθυρο > Επεκτάσεις > LottieFiles. Αυτό θα εμφανίσει ένα αναδυόμενο παράθυρο με τα ονόματα των συνθέσεων σας. Κάντε κλικ στο πράσινο βέλος δίπλα στο όνομα της σύνθεσής σας, θα εμφανιστεί το παράθυρο απόδοσης Lottie.

Μετά από λίγα δευτερόλεπτα, η κινούμενη εικόνα σας θα εμφανιστεί στο αναδυόμενο παράθυρο. Το animation θα παίζει σε πραγματικό χρόνο σε βρόχο. Εδώ, μπορείτε να επιλέξετε να αποθηκεύσετε το κινούμενο σχέδιο ή να ανεβάσετε το κινούμενο σχέδιο στη βιβλιοθήκη LottieFiles.

Κάνοντας κλικ Αποθήκευση ως θα σας δώσει δύο επιλογές εξαγωγής: Lottie JSON (*.json) ή dotLottie (*.lottie). Το αρχείο dotLottie είναι ένα συμπιεσμένο αρχείο που περιλαμβάνει μεταδεδομένα, τα οποία δεν χρειαζόμαστε πραγματικά για εξαγωγή. Πήγαμε με τον Lottie JSON.

Το εξαγόμενο αρχείο σας θα είναι αρχείο κειμένου και όχι αρχείο οπτικής κίνησης. έτσι λειτουργούν τα αρχεία JSON. Τι θα γινόταν όμως αν θέλατε το κινούμενο σχέδιο να είναι έτοιμο; Ας δούμε πώς μπορείτε να έχετε πρόσβαση.

Πώς μπορείτε να χρησιμοποιήσετε το κινούμενο σχέδιο Lottie

Για να ανεβάσετε το Lottie στη βιβλιοθήκη LottieFiles, κάντε κλικ Μεταφόρτωση. Αυτό θα αποδοθεί για λίγα δευτερόλεπτα. Στη συνέχεια, κάντε κλικ στο κουμπί με τη σφαίρα πάνω του. Αυτό ανοίγει τον ιστότοπο LottieFiles όπου μπορείτε να υποβάλετε την κινούμενη εικόνα Lottie στη βιβλιοθήκη LottieFiles. Ονομάστε το αρχείο σας και πατήστε Μην αγγίζετε.

Μόλις εγκριθεί η κινούμενη εικόνα σας στη βιβλιοθήκη LottieFiles, μπορείτε να χρησιμοποιήσετε την προσθήκη LottieFiles σε λογισμικό όπως το Adobe XD, το Figma ή το Sketch για να στείλετε τα κινούμενα σχέδια στο σχέδιό σας.

Υπάρχουν άλλοι τρόποι για να χρησιμοποιήσετε την κινούμενη εικόνα LottieFiles εκτός από απευθείας στη βιβλιοθήκη των προσθηκών. Μπορείτε να επεξεργαστείτε περαιτέρω την κινούμενη εικόνα Lottie από το παράθυρο του προγράμματος περιήγησης. Προσφέρει ένα βασικό πάνελ στρώσεων. μπορείτε να αλλάξετε το χρώμα φόντου, την ταχύτητα αναπαραγωγής, το ρυθμό καρέ και μερικά ακόμη πράγματα.

Από το παράθυρο Handoff, μπορείτε να κάνετε λήψη της κινούμενης εικόνας σας ως α Αρχείο JSON για εφαρμογή στην ανάπτυξη ιστού και σχεδίαση ή μπορείτε να το μετατρέψετε σε GIF για πιο συμβατικές χρήσεις. Μπορείτε επίσης να ενσωματώσετε την κινούμενη εικόνα σας με έναν κώδικα ενσωμάτωσης HTML, ενώ υπάρχουν και επιλογές iOS και Android, ώστε να μπορείτε να στείλετε την κινούμενη εικόνα στο σχεδιασμό ιστού σας.

Η ενσωμάτωση του Lottie HTML σάς επιτρέπει να επεξεργαστείτε τον κώδικα για να επεξεργαστείτε την κινούμενη εικόνα σας. Μπορείτε να αλλάξετε τα χρώματα και τα μεγέθη απευθείας στον κώδικα όταν τον προσθέτετε στον ιστότοπό σας.

Η λήψη της εφαρμογής LottieFiles στο τηλέφωνό σας σάς επιτρέπει να σαρώσετε τον κωδικό QR της κινούμενης εικόνας για να κάνετε προεπισκόπηση της κινούμενης εικόνας στην εφαρμογή. Μπορείτε επίσης να χρησιμοποιήσετε το πληκτρολόγιο LottieFiles και να αφήσετε το dotLottie ως σχόλιο σε ορισμένες αναρτήσεις.

Δημιουργήστε ένα Lottie στο After Effects

Αν και μπορεί να εξακολουθεί να φαίνεται σαν ένας ασυνήθιστος τύπος αρχείου, καθώς δεν μπορείτε απλώς να ανεβάσετε το κινούμενο σχέδιο απευθείας στα μέσα κοινωνικής δικτύωσης όπως μπορείτε με ένα GIF ή PNG, το Lottie έρχεται με πολλά οφέλη για προγραμματιστές και σχεδιαστές ιστού που χρησιμοποιούν πρόσθετα ή ενσωματώνουν κώδικες στο σχέδια.

Τα αρχεία Lottie και JSON εξοικονομούν χώρο και χρόνο φόρτωσης και διατηρούν την ποιότητα σε σύγκριση με τους παραδοσιακούς τύπους αρχείων. Η LottieFiles δημιουργεί συνεχώς νέους τρόπους υλοποίησης των σχεδίων, οι δυνατότητες είναι ατελείωτες.

Πώς να δημιουργήσετε ένα κινούμενο σχέδιο χρησιμοποιώντας το Procreate

Η δημιουργία ενός κινούμενου σχεδίου στο Procreate είναι εύκολη και αυτό το άρθρο θα σας δείξει πώς να το κάνετε.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα