LottieFiles יצרה סוג קובץ מהיר, ניתן להרחבה, שניתן לעריכה לאחר רינדור, וקל לך להיות מעורב וליצור אנימציות בפורמט הזה. באמצעות Adobe After Effects ובכמה תוספים, אתה יכול להיות חלק מההייפ החדש ביותר של סוגי הקבצים: הלוטי.
מה זה לוטי?
לוטי, או dotLottie, הוא סוג קובץ שכובש את מפתחי האינטרנט בסערה. ייתכן שעשית אנימציות לכלול בעיצובים שלך, בין אם הן מיועדות למדיה חברתית, עיצוב אתרים או עיצוב UX וממשק משתמש. וכנראה שאתה שומר את האנימציות שלך כקובצי GIF, SVG או PNG. קובץ לוטי הוא כל החלקים הטובים של סוגי הקבצים האלה, אבל קטן יותר, מהיר יותר וקל יותר לעריכה לאחר רינדור.
LottieFiles הוא מסד נתונים ענק של אנימציות מוכנות מראש שנשמרו בפורמטים של Lottie או JSON. אנימציות אלה מעובדות בזמן אמת, ומאפשרות משלוח מהיר יותר לתוך העיצובים שלך. אין לחכות להורדת הקבצים האלה; הם יופיעו ברגע שהדף ייפתח.
למידע נוסף על LottieFiles, בדוק את שלנו היכרות עם הלוטי.
מתחילים
אנחנו הולכים ליצור לוטי באמצעות Adobe After Effects, אבל יש תוכנות אחרות שבהן אתה יכול להשתמש כדי ליצור אנימציה לוטי שלך. אתה יכול להשתמש ב-Adobe Animate עם התוסף LottieFiles כדי ליצור Lottie. אתה יכול גם להמיר אנימציה בפורמט SVG ללוטי אם כבר יצרת אנימציה בפורמט זה.
עם זאת, After Effects היא הבחירה המובילה שלנו, בהתחשב ב-LottiFiles נוצר במקור כדי לשמש ב-After Effects. בואו נתחיל.
1. צור את האנימציה שלך
היבט האנימציה של לוטי שלך זהה לכל פורמט אחר. יצרנו את האיור של האנימציה שלנו באמצעות Adobe Illustrator. זה שומר על השכבות נפרדות ומוכנות לייבא לתוך After Effects. לאחר שהאיור שלך מיובא, אתה יכול להתאים את שכבות הקומפוזיציה שלך להנפשה הסופית.
אנימציות לוטי פועלות בלולאה מתמשכת, אז קחו זאת בחשבון עבור נקודות הסיום וההתחלה של העיצוב שלכם. האנימציה צריכה להיות פשוטה ובאורך כשלוש שניות.
2. הורד את התוספים
ישנם שני תוספים שבהם אתה יכול להשתמש כדי ליצור קובץ Lottie: התוסף LottieFiles או הפלאגין Bodymovin. שניהם זמינים עבור After Effects, אך ניתן למצוא את התוסף LottieFiles גם בתוכנות אחרות. כל אחד מהם עושה דברים מעט שונים, אבל אנחנו הולכים להתמקד בתוסף LottieFiles עכשיו.
כדי להוריד את התוסף LottieFiles, עבור אל עמוד התוספים של LottieFiles After Effects. תמצא שתי אפשרויות הורדה.
האפשרות בצד ימין דורשת מנהל הרחבה מ-Anastasiy שעובד גם עם Mac וגם עם Windows. לאחר שהורדת את מנהל ההרחבות, הורד את הפלאגין ZXP מדף LottieFiles.
לאחר הורדת הפלאגין ZXP, פתח את מנהל ההרחבות של Anastasiy, לחץ תופעות לוואי, בחר בתוסף LottieFiles מהרשימה, והקש להתקין.
בחזרה לדף הפלאגין LottieFiles, הורד גם את התוסף של Adobe Exchange; פתח את אפליקציית שולחן העבודה של Creative Cloud והתקן את התוסף. חזור לסיים שלך אנימציה באפטר אפקטס.
לחלק מהאנשים יש שגיאת הרשאה בעת שימוש בתוספים אלה. כדי להימנע מבעיה זו, עבור אל תופעות לוואי > העדפות > סקריפטים וביטויים > Scripting של יישומים וסמן את התיבה עבור אפשר לסקריפטים לכתוב קבצים ולגשת לרשת.
ברגע שזה נעשה, החלון הקופץ של LottieFiles יבקש ממך להתחבר. אם עדיין אין לך חשבון LottieFiles, זה הזמן ליצור אחד.
3. ייצא את לוטי שלך
עם התוספים של LottieFiles מותקנים, אתה יכול לעבד את האנימציה של Lottie שלך. בזמן על הרכב האנימציה המוגמר שלך, לחץ חַלוֹן > הרחבות > LottieFiles. זה יציג חלון קופץ עם שמות היצירות שלך. לחץ על חץ ירוק ליד שם הקומפוזיציה שלך, זה יביא את חלון העיבוד של לוטי.
לאחר מספר שניות, האנימציה שלך תופיע בחלון הקופץ. האנימציה תתנגן בזמן אמת בלופ. כאן, אתה יכול לבחור לשמור את האנימציה שלך או להעלות את האנימציה שלך לספריית LottieFiles.
לחיצה שמור כ ייתן לך שתי אפשרויות ייצוא: Lottie JSON (*.json) או dotLottie (*.lottie). קובץ dotLottie הוא קובץ דחוס הכולל מטא נתונים, שאנו לא באמת צריכים לייצוא. הלכנו עם לוטי JSON.
הקובץ המיוצא שלך יהיה קובץ טקסט, לא קובץ אנימציה חזותית; כך פועלים קבצי JSON. אבל מה אם היית רוצה שהאנימציה מוכנה לצאת לדרך? בוא נראה איך אתה יכול לגשת אליו.
איך אתה יכול להשתמש באנימציית לוטי שלך
כדי להעלות את Lottie שלך לספריית LottieFiles, לחץ העלה. זה יוצג לכמה שניות. לאחר מכן, לחץ על הכפתור עם הגלובוס עליו. זה פותח את אתר LottieFiles שבו אתה יכול לשלוח את האנימציה של Lottie שלך לספריית LottieFiles. תן שם לקובץ שלך ולחץ למסור את.
לאחר שהאנימציה שלך אושרה בספריית LottieFiles, תוכל להשתמש בתוסף LottieFiles בתוכנה כמו Adobe XD, Figma או Sketch כדי לשלוח את האנימציה שלך לעיצוב שלך.
ישנן דרכים אחרות להשתמש באנימציית LottieFiles שלך מלבד ישירות בספריית הפלאגין. אתה יכול עוד לערוך את האנימציה של Lottie שלך מהחלון בדפדפן. הוא מציע פאנל שכבות בסיסי; אתה יכול לשנות את צבע הרקע, מהירות ההשמעה, קצב הפריימים ועוד כמה דברים.
מחלון Handoff, אתה יכול להוריד את האנימציה שלך בתור א קובץ JSON ליישום בפיתוח אתרים ועיצוב, או שאתה יכול להמיר אותו ל-GIF לשימושים קונבנציונליים יותר. אתה יכול גם להטביע את האנימציה שלך עם קוד הטמעת HTML, ויש גם אפשרויות iOS ואנדרואיד, כך שתוכל לשלוח את האנימציה לעיצוב האינטרנט שלך.
הטבעה של Lottie HTML מאפשרת לך לערוך את הקוד כדי לערוך את האנימציה שלך. אתה יכול לשנות צבעים וגדלים ישירות בקוד כשאתה מוסיף אותו לאתר שלך.
הורדת אפליקציית LottieFiles בטלפון מאפשרת לך לסרוק את קוד ה-QR של האנימציה כדי לצפות בתצוגה מקדימה של האנימציה באפליקציה. אתה יכול גם להשתמש במקלדת LottieFiles ולשחרר את dotLottie שלך כתגובה בפוסטים מסוימים.
צור לוטי באפטר אפקטס
למרות שזה עדיין עשוי להרגיש כמו סוג קובץ לא שגרתי, מכיוון שאתה לא יכול פשוט להעלות את האנימציה שלך ישר למדיה חברתית כמו אתה יכול עם GIF או PNG, הלוטי מגיע עם יתרונות רבים למפתחי אתרים ומעצבי אינטרנט שמשתמשים בתוספים או מטמיעים קודים שלהם עיצובים.
קבצי Lottie ו-JSON חוסכים מקום וזמן טעינה, ומשמרים איכות בהשוואה לסוגי קבצים מסורתיים. LottieFiles יוצרים כל הזמן דרכים חדשות ליישם את העיצובים, האפשרויות הן אינסופיות.
יצירת אנימציית תנועה ב-Procreate היא קלה, והמאמר הזה יראה לך איך לעשות זאת.
קרא הבא
- יְצִירָתִי
- אנימציה ממוחשבת
- אדובי
- המרת קבצים
רובי הוא כותב בקטגוריית הקריאייטיב של MUO, המתמקד בכתיבה על תוכנות עיצוב. לאחר שעבד כמעצב, מאייר וצלם, לרובי יש גם תואר ראשון בתקשורת גרפית ותואר שני באנגלית עם כתיבה יצירתית.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם
