אנימציית לוגו היא תהליך של הכנסת תנועה או שינויים לאלמנטים החזותיים בלוגו כדי להפוך אותו לדינמי ואטרקטיבי יותר. ניתן להחיל אותו על חלקים שונים בלוגו, כגון טקסט, תמונות, צבעים וצורות, והוא יכול להיות בעל דרגות שונות של מורכבות, החל מהנפשות פשוטות כמו טקסט מהבהב או צבעים דוהים ועד להנפשות מורכבות הכוללות אובייקטים נעים או אינטראקטיביים. אפקטים.
אנימציית לוגו הופכת נפוצה יותר. בין סמארטפונים להתפתחות הכללית של טכנולוגיית האינטרנט, הלוגואים נפוצים כיום הרבה יותר בחללים דיגיטליים, וזה פותח פתח לאפקטים ויזואליים כמו אנימציה שאינם אפשריים במוצרים פיזיים. כמובן, הפופולריות הגוברת של אנימציית לוגו פירושה שיותר ויותר מותגים יצטרכו אותה כדי להישאר תחרותית. אז ללמוד איך להנפיש לוגו יכול להיות מיומנות חשובה שתיקח את הלוגו שלך לשלב הבא.
במקביל, תוכנת האנימציה הפכה גם להיות נפוצה יותר, יעילה ואינטואיטיבית כדי לתמוך בבסיס המשתמשים ההולך וגדל הזה. לכן, לא משנה כמה אנימציית לוגו טכנית ומורכבת עשויה להישמע, אפילו מתחילים יכולים כעת ליצור אנימציות פשוטות אך יעילות.
אנימציית לוגו באפטר אפקטס -
שלב 1. הכן את קובץ הלוגו שלך.
למעשה נתחיל את המדריך שלנו כיצד להנפיש לוגו ב-Adobe Illustrator (או תוכנה דומה לעיצוב לוגו). זה הכרחי כדי להבטיח שהקובץ שלנו לוגו מוגדר לאנימציה.
למרות שתוכנת האנימציה עצמה היא רסטר, קובצי הלוגו המקוריים חייבים להיות בפורמט וקטור. זה מאפשר לך לשנות אותם בלי נֵזֶק לאיכות תמונה (לדוגמה, התקרבות ללוגו רסטר מביאה לפיקסלציה), וזה יהיה שימושי מאוחר יותר בעבודה עם שכבות צורות.
ודא שהלוגו שלך מופרד לשכבות באמצעות החלונית Layers.
הלוגו צריך גם להיות רב-שכבתי במקום לקבץ לאובייקט אחד. זה מקל על יצירת אנימציות מורכבות יותר על ידי הנפשת חלקים בודדים בלוגו. אתה יכול ליצור שכבות חדשות באמצעות " הוסף שכבה חדשה" בתחתית החלונית Layers, ולאחר מכן העתק והדבק חלקים מהלוגו שלך לתוכם.
לבסוף, מכיוון שהאנימציה היא דיגיטלית באופייה, אנו עובדים גם עם צבעי RGB. אם קובץ ה-Illustrator שלך מוגדר ל-CMYK, תוכל לשנות זאת על ידי בחירת הלוגו שלך וניווט אל ערוך > ערוך צבעים > המר ל-RGB.
כשתהיה מוכן, ייצא את הלוגו שלך כקובץ וקטור שכבות מלא. מכיוון שסוגי קבצי After Effects הם חלק ממשפחת התוכנות של Adobe, אני הולך לשמור את הלוגו שיצרתי כקובץ AI (Adobe Illustrator), אך ישנם מספר סוגים שונים של קבצי וקטור לבחירה אם אתה משתמש בתוכנה אחרת.
שלב 2: ייבא את הלוגו שלך אל After Effects. אנימציית לוגו
פתח את After Effects. הממשק עשוי להיראות מסובך במבט ראשון, אז בואו נפרט את היסודות:
- סרגל הכלים : כאן אתה יכול לגשת הראשי כלים גרפייםכגון כלי העט, כלי הקלדה וכו'.
- פאנל פרויקטים : זה המקום שבו אתה מנהל ומארגן קבצי מדיה עבור הפרויקט כולו.
- חלון קומפוזיציה : זהו חלון תצוגה מקדימה של וידאו שבו אתה יכול לצפות בתצוגה מקדימה של האנימציה עבור הקומפוזיציה הנוכחית (המכונה לעתים קרובות קומפוזיציה) עליה אתה עובד. קומפוזיציות הן בעצם סצנות, שלכל אחת יש קווי זמן נפרדים של אנימציה. נדון בחיבורים ביתר פירוט בחלק הבא.
- ציר זמן : זה המקום שבו תיצור את האנימציה שלך. הוא מורכב הן מציר זמן מילולי מימין (שם תגדיר אירועי אנימציה שיפעלו על ציר הזמן) והן מאזור פריסה משמאל (שם תכסה ותערוך את התכונות של נכסי המדיה שלך).
- לוח בקרה : כאן תוכל לגשת לתכונות תומכות שונות כגון מידע מדיה, אפשרויות פיסקה ויישור, וספריות מובנות מראש של אנימציה ואפקטים חזותיים המובנים ב-After Effects.
אם אינך בטוח לגבי כלי או כפתור, העברת העכבר מעליהם תיתן לך תיאור.
כדי לייבא קובץ לוגו, פשוט גרור אותו לחלונית Project או בחר קוֹבֶץ" > « יְבוּא" > « קוֹבֶץ" . בתיבת הדו-שיח הבאה, בחר ייבא מדיה בשם צילומים ושכבות ממוזגות .
שלב 3: הגדר את הקומפוזיציה שלך. אנימציית לוגו.
קומפוזיציה (קומפוזיציה) היא מיכל המאפשר לך לחבר, לערוך ולהחיל אנימציה על קובצי מדיה. הפקה גדולה יותר, כגון סרט, תכיל מספר מסלולים המאורגנים בפאנל פרויקטים. אז אתה יכול לחשוב על הרצועות כסצנה בודדת בסרט הזה, ולכל רצועה יהיה ציר זמן נפרד משלה. במקרה שלנו, אנימציית לוגו שנמשכת פחות מחמש שניות דורשת מעט מאוד קומפוזיציות.
כדי להתאים אישית את הקומפוזיציה שלך, גרור קובצי מדיה לצד שמאל של חלונית ציר הזמן.
נתחיל ברקע פשוט. לחץ לחיצה ימנית על חלונית הפריסה ובחר " לִיצוֹר" > « מוצק" . מכיוון שהלוגו שלי לבן, בחרתי במוצק צבע שחור, אבל אתה יכול לבחור כל צבע. בחלון הבא, שם למוצק (במקרה שלי "BG"), לחץ על " עשה גודל מחשב" ובחר " בסדר" . כעת גרור את קובץ הלוגו שלך מהחלונית Project לחלונית Timeline ואתה אמור לראות את הלוגו שלך בתצוגה מקדימה בחלון הקומפוזיציה. אם לא, הקפד לסדר מחדש את השכבות על ידי גרירת הרקע המוצק מתחת לקובץ הלוגו.
לחץ לחיצה ימנית על קובץ הלוגו בחלונית הפריסה ובחר לִיצוֹר" > « המר לקומפוזיציה רב-שכבתית" . זה יהפוך את קובץ הלוגו שלך להרכב שונה (תראה שהסמל השתנה). לחיצה כפולה על קובץ הלוגו תפתח כעת כרטיסייה חדשה ותעביר אותך לקומפוזיציה החדשה הזו המכילה את כל השכבות הבודדות שהגדרת ב-Illustrator. עכשיו אתה יכול לראות איך קומפוזיציות עובדות: הן בעצם כמו תיקיות משנה.
אנימציית לוגו
אם תרצה, תוכל להמיר כל אחת מהשכבות הללו לקומפוזיציות נפרדות על ידי לחיצה ימנית ובחירה הרכב ראשוני" . זה ייתן לשכבה זו ציר זמן של אנימציה משלה, מקונן בתוך הקומפוזיציה הקודמת. ואם אתה רוצה להנפיש את הלוגו כולו בבת אחת, עליך להשתמש בציר זמן הקשור לקומפוזיציה הראשית.
עם זה מחוץ לדרך, בואו נבין איך קווי זמן אלה עובדים עבור אנימציה.
שלב 4: הנפשה של הלוגו באמצעות Keyframes
After Effects (ורוב תוכנות האנימציה) פועלות באמצעות פריים מפתח. מסגרות מפתח הן בעצם סמנים שאתה יכול להגדיר על ציר הזמן כדי לקבוע מתי אמורים להתרחש מצבי ההתחלה והסיום של האנימציה שלך.
לדוגמה, נתחיל באנימציה פשוטה מאוד: דהייה פנימה. לאובייקט מחוברות תכונות שונות, ותכונות המשתנות במשך פרק זמן נתון הן בעצם אנימציה. כדי לראות תכונות אלו, לחץ על סמל ההרחבה לצד הלוגו ואחריו נכס "המר" .
צור מסגרות מפתח על ידי לחיצה על סמל שעון העצר שליד מאפיינים בחלונית ציר הזמן.
עבור אנימציה דועכת, אתה רוצה לעבוד עם התכונה המודדת את הנראות של אובייקט: אטימות. האטימות מוגדרת ל-100% כי כברירת מחדל הלוגו גלוי במלואו.
לחץ על סמל שעון העצר שליד האפשרות אטימות ותראה יהלום שבו סמן ראש ההשמעה מוגדר (הקו הכחול החלש חוצה את ציר הזמן). זוהי מסגרת מפתח, בעצם תמונת מצב של הערך הנוכחי של תכונה שצוינה. הזז את מסגרת המפתח על ידי לחיצה וגרירתה לסימן 2 השניות על ציר הזמן. גרור את המחוון חזרה לסימון 0 השניות, ואז צור פריים מפתח נוסף והגדר את האטימות ל-0%. הקש על מקש הרווח כדי להציג את ההנפשה בחלון הקומפוזיציה.
תופעות לוואי
תראה שיצרת אנימציית דהייה חלקה על ידי שינוי האטימות מ-0% ל-100% תוך 2 שניות עם שתי פריימים מפתח בלבד. כך מתבצעת כל האנימציה באפטר אפקטס. אתה יכול ליצור פריים מפתח התחלה ופריים מפתח סיום במרווחים שונים לאורך ציר הזמן, ואפטר אפקטס מחשבת אוטומטית את מעברי הפריימים הדרושים כדי להגיע מנקודה A לנקודה B (המכונה באופן מסורתי tween frames בעסקי האנימציה).
אנימציה פשוטה וחלקה נוצרת באמצעות שתי פריימים מפתח עבור המאפיין Opacity.
אתה יכול לראות שיש מספר תכונות שאתה יכול לעבוד איתן להפוך רכוש, שנסביר כאן בקצרה. אל תהסס להתנסות עם פריים מפתח ולשנות כל אחד מהם כדי לקבל תחושה של יכולות האנימציה שלהם:
- מיקום : תכונה זו מתארת את מיקומו של הלוגו במרחב X, Y במסך הפריסה ומאפשרת הנפשה של תנועה ליניארית.
- קנה מידה : תכונה זו מתארת את גודל הלוגו (כאחוז מהגודל המלא של הקובץ המקורי) ומאפשרת ליצור אנימציות זום-אין או כיווץ.
- סיבוב : תכונה זו מתארת את הכיוון במעלות ומאפשרת לך ליצור אנימציות סיבוב.
ייעוץ מאיש מקצוע :
כשמדובר בהנפשת לוגו, הגיוני לעבוד לאחור (כמו שעשינו עם ה-fade-in) מכיוון שהאנימציה צריכה להסתיים בלוגו המוגמר והשלם. משמעות הדבר היא שעליך ליצור מסגרות מפתח לפני שתשנה משהו כדי שיהיו לך צילומי מצב של ערכי התכונה במצב ברירת המחדל שלהם. לאחר מכן תוכל להעביר את הפריימים המרכזיים הללו לנקודת הסיום הרצויה בציר הזמן (בכמה זמן שתרצה שהאנימציה תימשך) וליצור פריימים מפתח חדשים עבור השינויים בתחילת ציר הזמן.
שלב 5. הנפשת הלוגו באמצעות שכבות צורות.
כעת נעבור לטכניקות אנימציה מעניינות יותר באמצעות שכבות צורות. שכבות צורה הן אובייקטים המכילים מידע על נתיב כגון נקודות עיגון וקווי מחבר (בדומה לאלו שבתוכנות וקטוריות), וטיפול בהם פותח את הדלת למגוון שלם של אפשרויות אנימציה מעבר. שינוי מאפיינים .
איך לבחור את הצבע המתאים ללוגו שלך?
ראשית, אנו הולכים להמיר את הלוגו לשכבת צורה. בחלונית Layered Composition (השכבות שנוצרו בשלב 3), בחר את כל השכבות שלך, לחץ לחיצה ימנית ובחר " לִיצוֹר" > « צור צורות משכבה וקטורית" . תראו שכל שכבה משוכפלת ולצדה כוכב – זו שכבת צורה. מקונן מתחת לשכבת הצורה, תמצא נכס תוכן בנוסף שינוי רכוש . לימין ה מאפייני תוכן תראה גם כפתור " לְהוֹסִיף" , מה שיאפשר לך לבחור אפילו יותר תכונות להנפשה.
שכבות צורה מכילות כפתור הוסף (מימין למאפיין Contents) המאפשר להוסיף כל מיני מאפיינים מונפשים, כגון נתיבי גזירה.
שינוי קנה מידה של אובייקט ב-Adobe Illustrator
נתיבי חתוך
עבור הלוגו שלי, השתמשתי באנימציה נפוצה ושימושית למדי באמצעות המאפיין Trim Paths. לשם כך הוספתי "נתיבי יבול" באמצעות הכפתור " לְהוֹסִיף" לשכבות הצורה של כל אות, הגדר את מסגרת המפתח של תכונת End ל-0% בתחילת ציר הזמן ו-100% לאחר כשנייה אחת. כפי שניתן לראות, נראה כי קווי המתאר של האותיות מצוירים על ידי יד בלתי נראית בזמן אמת.
שימוש במאפיין Trim Paths מאפשר לך להנפיש קווים כך שהם מציירים את עצמם בזמן אמת.
בנוסף, רציתי להוסיף קצת אנימציית מבטא לרקע. מכיוון שאני עובד בשחור לבן, בחרתי באפקט מנהרה בלולאה שמזכיר את אזור הדמדומים. לשם כך, השתמשתי בכלי המצולע בחלונית הכלים כדי לצייר צורה במרכז הקומפוזיציה שלי, וליצור שכבת צורה חדשה.
לאחר מכן הוספתי מאפיין Repeater, ריכזתי את המיקום והגדלתי את מספר העותקים. זה משכפל את הצורה, יוצר מנהרה אינסופית לכאורה. התאמת קנה המידה מגדילה את הרווח בין כל עותק, ושינוי הסיבוב מכוון את העותקים לכיוונים שונים לצורך עניין ויזואלי.
לבסוף, כדי לתבל את זה, אני מפתחתי היסט של 0 בתחילת ציר הזמן ובהמשך הגדרתי אותו לערך שלילי בציר הזמן.
באמצעות שכבת צורה מצולעת והמאפיין Repeater, הצלחתי ליצור רקע מונפש.
בטח ניחשתם שיש הרבה אפשרויות לשכבות צורות. זה נכון: יש קורסים מקוונים שלמים בנושא באינטרנט, וכדאי שתפנו זמן להתנסות, לתרגל וללמוד.
אני גם לא יכול להגיד לך איזה סגנון אנימציה יתאים לך לוגו או איזה כלים ספציפיים אנימציות שתצטרך כדי להשיג סגנון זה. עם זאת, אני יכול לתת לך עצות איך לגלות את זה בעצמך. חפש השראה מסמלים מונפשים אחרים, כגון המתחרים שלך, מותגים שאתה מעריץ ו/או אתרים כמו Pinterest או Dribble - בדיוק כפי שעשית כשיצרת את הלוגו במקור.
תגלה שברגע שתתחיל לנתח אותם באמצעות הידע החדש שלך כיצד להנפיש לוגו, רבים מהם מבוססים על פשוט מניפולציות עם צורות וטרנספורמציות (אפילו כאלו שמרובות בבירור עם אפקטים מסוגננים מתקדמים). ברגע שתמצא כמה שאתה אוהב, אתה יכול לעבוד לאחור ב-After Effects כדי לנסות להנדס לאחור את האנימציות האלה לתרגול.
שלב 6: הגדר את השעה.
בואו נדבר על זמן, שמתאר את הקצב של מסגרות האנימציה לאורך האנימציה. אתה יכול לראות ייצוג חזותי של זמן על ידי מעבר לעורך הגרפים. כדי לעשות זאת, לחץ על סמל הגרף (שכותרתו עורך גרפים כאשר אתה מרחף מעליו) בחלק העליון של חלונית ציר הזמן וזה ישנה את ציר הזמן לתרשים קו.
אם תלחץ על אחת ממאפייני ה-keyframe, תראה קו ישר מ-keyframe אחד למשנהו. נכון לעכשיו, כיוון שרק היינו מפתחים את נקודות ההתחלה והסיום, השארנו את After Effects כדי לעשות את התזמון. ללא כיוון, After Effects מזיז כל פריים של האנימציה באופן שווה, וכתוצאה מכך קו ישר לחלוטין.
עורך הגרפים מציג את תזמון הפריימים המפתח כפי שמוצג בתרשים הקו.
עם זאת, השינוי המכוון בזמן הוא זה שנותן לאנימציה תחושה של ריאליזם. לדוגמה, באנימציית כדור קופץ, הכדור נע לאט יותר בגובה הקפיצה ומהר יותר כשהוא מתקרב לקרקע בגלל המומנטום והכבידה. במילים אחרות, הוא לא זז באותה מהירות לאורך כל האנימציה, ואם כן, הוא היה מתבלט כרובוט.
הכלים של Bezier, הממוקמים בתחתית עורך הגרפים, מאפשרים לך להתאים את העקמומיות של קו הגרף.
המרת מסגרות מפתח ל-Auto Bezier
עורך הגרפים מאפשר לך להתאים את התזמון של האנימציה שלך באמצעות מה שנקרא ידיות Bezier כדי להפוך קו גרף לעקומה. בפינה הימנית התחתונה של עורך הגרפים, תראה כמה אייקונים של נקודות מרובעות המחוברות לקווים - אלו הם כלי Bezier.
לחץ על אחת ממסגרות המפתח ורחף מעל הכלים של Bezier עד שתמצא את זה שכותרתו " המרת מסגרות מפתח ל-Auto Bezier" . כאשר תלחץ על זה, תראה סמן צהוב מופיע על הגרף. גרירת ידית זו תגרום לקו להתכופף וזה ישנה את התזמון של האנימציה שלך. היכן שהעקומה בולטת יותר, הפריימים יופיעו מהר יותר, ובמקום שהעקומה חלקה יותר, הפריימים יופיעו לאט יותר.
עקומה חדה יותר מתאימה לסנכרון מהיר יותר, ועקומה חלקה יותר מתאימה לסנכרון איטי יותר.
כדי להבין באמת את הניואנסים של התאמת התזמון שלך צריך ניסיון באנימציה, וזו הסיבה שהתאמה ידנית של עקומות Bezier היא נושא מתקדם יותר. במדריך זה למתחילים, אני ממליץ להשתמש בכלי Bezier קלה קלה (אשר מחיל עקומה אוטומטית על ה-keyframe שתבחר) עבור כל מרווחי הזמן של האנימציה. אתה יכול להגיש בקשה קלה קלה למסגרת מפתח מחוץ לעורך הדיאגרמה על ידי בחירת המסגרת המפתח ולחיצה ימנית.
שלב 7: ייצא את הלוגו שלך.
כשתהיה מוכן לייצא את הלוגו המונפש המוגמר שלך, בחר " קוֹבֶץ" > « יְצוּא" > « הוסף את Adobe Media Encoder לתור" . ייצוא After Effects כברירת מחדל קובץ בפורמט mp4, שמתאים לווידאו. מכיוון שאנו רוצים ליצור קובץ תמונה שניתן לשתף של הלוגו שלנו, נייצא אותו כ-GIF מונפש. בחלון Media Encoder, לחץ על החץ ליד שורת הטקסט הכחולה המודגשת מתחת למילה "פורמט" ובחר " GIF מונפש" . אתה יכול גם להגדיר את תיקיית היעד עבור הקובץ המוגמר שלך על ידי לחיצה על הטקסט הכחול מתחת למילים "קובץ פלט".
כדי לייצא קובץ, עבור אל קובץ > ייצוא > הוסף לתור Adobe Media Encoder ובחר ב-animated Gif מהרשימה הנפתחת בעמודה עיצוב.
לחץ פעמיים על הטקסט הכחול המודגש מתחת להגדרה מראש כדי לפתוח את חלון אפשרויות הייצוא. יש כמה אפשרויות שתרצה להסתכל עליהן כדי להקטין את גודל הקובץ שלך: איכות (הגדרתי אותו ל-20), קצב פריימים (הגדרתי אותו ל-10, אם כי קצבי פריימים גבוהים יותר (fps) מומלצים לווידאו), ו משך זמן, שהוא הפס הכחול בתצוגה מקדימה (קצצתי את שלי ל-4 שניות). בחר אוקיי, כדי לסגור את החלון הזה.
כשתסיים, בחר בסמל ההפעלה הירוק בפינה השמאלית העליונה של Media Encoder והקובץ שלך יוצג בתיקיית היעד שבחרת. זהו: אנימציית לוגו גמורה!
הבא את המותג שלך לחיים עם אנימציית לוגו.
-
אנימציית לוגו היא יותר מסתם טרנד פופולרי שמותגים נאלצים לעקוב אחריו. יש גם קסם שאין להכחישו באנימציית לוגו, וזו דרך מצוינת ליצור רגע של הנאה ויזואלית לכל מי שמקיים אינטראקציה עם המותג שלך. ולמרבה המזל, תוכנת האנימציה התפתחה כך שכמעט כל אחד, ללא קשר למיומנות, יכול להוסיף מעט מהקסם הזה ללוגו שלו.
עם זאת, בעוד שמדריך זה נועד להתחיל עם היסודות של אנימציית לוגו, נדרש הרבה ניסוי וטעייה, תרגול וניסוי כדי להשיג משהו מעבר לאנימציה בסיסית. אם אתה רוצה אנימציית לוגו מיוחדת באמת, אנימטור לוגו מקצועי שווה את ההשקעה.
השאירו תגובה