תמונה אחת שווה אלף תנועות

קסם | אישיות | סגנון | סטייל
יש לא מעט דברים שיכולים לקחת אותכם לשם, Animation Gif הוא אחד מהם.
animation gif, אנימציית גיף, אנימיישן גיף, אנימיישן גיפ,עיצוב בתנועה
נתחיל עם הברקה שהייתה. מה יש, מדי פעם אפשר, מותר ורצוי להחמיא לעצמך, כי אם לא אתלהב מהדברים של עצמי, איפה אמצא דלק להמשיך.
בכל מקרה, ברגע של התגלות, הבנתי ש-animation gif יכול להיות preloader - ההוא שאנחנו צופים בו עד שהאתר טוען את עצמו.
כמו תמיד, היצירתיות חייה בביבים וכשיודעים את זה, כל מגבלה הופכת ליתרון.
בדרך לא דרך, הגעתי למצב שה-preloader שלי היה תמונה פשוטה ללא שום תנועה, דבר בעייתי לכשעצמו
והיות שאני לא מתכנת, אבל גם לא אחד שפוחד לגעת, החלטתי שאני מוצא לכך לפתרון יצירתי.
והרי להחליף תמונה אני יודע, עכשיו רק צריך משהו שגם קצת יזוז – ו..וואלה, קם לתחייה פרילודר חדש.

טוב, ולתכלס, איך עושים את זה, הרי לשם כך התכנסנו.
נכון יש כל מיני יוטיוביים שמסבירים איך עושים את זה, הנה אחד ארוך וקצת מייגע, אבל ראשון ביוטיוב וכזה שאפשר קצת להריץ ועל אף הכל עדיין מלמד ועושה את העבודה, לדוגמא

אז נכון הוא יסביר לכם את הבסיס, אני אנסה לתת לכם את הטיפים איך להפוך את זה למ-ה-מ-ם
אבל קודם, למי שלא הצליח להבין את הבחור המוזר, הנה קיצור תולדות התמונה הנעה:
+ אספו לכם את התמונות שאותם את רוצים להניע.
+ כנסו לפוטושופ וסדרו את השכבות לפי הסדר הראוי
+ בתפריט הראשי window, תמצאו את חלון הפקודות animation
+ בחלון הקטן שיפתח, לחצו על הסימון של האפשוריות/הגדרות, לרוב נמצא בפינה ימנית עליונה
+ שם לחצו על make frames from layers
+ פליי לבדיקה שהכל רץ כמו שצריך, שוב בתוך החלון בשורה התחתונה, מתחתלתמונות שנוצרו, תמצאו את הפליי
+ ייצוא פשוט של התמונה: Alt+Ctrl+Shift+S והגדרה לתצורה של GIF וזהו, אתם קוסמים

או קיי, בואו נעבור למתקדמים.
אז אתם יודעים איך כמה ולמה, אבל עדיין לא יוצא טוב.
גם לי לא יצא, האמת לקח זמן עד שהבנתי איך עושים את זה.
דבר ראשון, צריך לזכור שאנחנו חושבים motion ולא stills, מה שאומר, שכל מי שעורך וידאו יודע, שבשנייה אחת יש 24 פריימים, אם מתייחסים לעולם הקולנוע כרפרנס.
מה זה אומר מבחינתינו, אם אתם בונים על ביצוע מורכב, אולי תקחו בחשבון שלא רע יהיה לשים 24 שכבות של תמונות אותן תרצו להפוך לאנימציה, פלוס מינוס, כן, אף אחד לא יבדוק אותכם בציציות.
זה יעזור בעיקר למי שרוצה תנועה חלקה, למי שלא אכפת מ"קפיצות" אפשר להסתפק בהרבה פחות,
לדוגמא, בסטופ מושן, לרוב מתייחסים ל12 פריימים לשניה, במינימום.
אני לעומת הלכתי על 7 פריימים, ואני מאושר איתם.
הלאה- את הדוגמא למעלה למשל, יהיה לכם מאוד מאוד קשה ואולי אף בלתי אפשרי אם תנסו לצלם תמונה אחר תמונה, והנה הסוד הגדול – צלמו וידאו. כן, להיט – אה? עכשיו הכל מובן, צלמו וידאו של התנועה שאתם רוצים, ומשם בתוכנת העריכה תדוגו 7,12 או 24 פריימים שאתם רוצים ואתם מסודרים.
כמובן, יש עוד. רוב התמונה היא סטילס, פשוט עמדתי שם לכמה שניות, בעריכה לקחתי פריים אחד ועליו שמתי 7 פריימים של הגלגל המסתובב, חתכתי את איזור הגלגל, רק לריבוע והצל.
וכל השאר בכל השכבות, זה אותה תמונה אחת שלי עומד ללא תזוזה.
טיפ נוסף, שימו לב לצל. אם הייתי עומד בתוך הצל של מה שזז, דהיינו הגלגל בתמונה, הגזירה בפוטושופ לא הייתה עובדת והיינו מרגישים קפיצה.
ברגע שיש לכם וידאו, מאוד קל גם לקחת 24 פריימיים, אפשר גם לכוון את המצלמה ל50 או 60 פריים לשנייה ואז אתם בכלל מסודרים, אין שום מריחה ויש המון מבחר.
קחו בחשבון שאם התנועה מהירה, אתם תחוו מה שנקרא rolling shutter אבל זה בפוסט אחר, מבטיח.

מתי כן נשתמש בתמונות סטילס לחלוטין, משהו בסגנון סטופ מושן – כאשר אי אפשר להשתמש בוידאו.
חחחח, סתם, הנה ההסבר: כשאין צילום חי, אלא רק גרפיקה, תדמיינו כפתור או כותרת, וכאשר העכבר עובר עליה, יש אנימיישן גיפ עם איזה סיבוב או תנועה כלשהי.
דבר נוסף, כאשר האובייקט שזז גדול או שהוא דומם ואינו יכול לזוז על ידי תנופה, אז פשוט צריך להזיז טיפה, לצלם, להזיז טיפה, לצלם וחוזר חלילה. והנה דוגמא
אנימיישן גיפ, אנימיישן גיף, עיצוב בתנועה, animation gif
שימו לב, איך רוב הפריים הוא אותה תמונת סטילס.

אתם יכולים להוריד את התמונות, להכניס אותם לפוטושופ ולראות קצת מה קורה מאחורי הקלעים.
אצלי לדוגמא מהירות המעבר בין תמונה לתמונה היא 0.07 השנייה.
בעניין הפרילודור, בייצוא של התמונה מפוטושופ אפשר להוריד איכות, אם אתם רוצים שהוא יטען מספיק מהר כדי שיראו אותו עד שהאתר עולה, אני צמצמתי את מספר הצבעים בתמונה מ256 ל32, שיהיה קליל. והאמת, סוד קטן, אצלי יש טיימר שמעכב את האתר בחמש שניות, אחרת אי אפשר לראות את הפרילודור.
אבסורד, אה? אבל אני כבר יודע, אבסורד זה הלהיט החדש.
דרך נוספת לעיכוב זה שרת בחו"ל או סתם אתר כבד, אבל זה כבר עקום.
והנה עוד כמה דוגמאות מטורפות
אנימיישן גיף, animation gif
animation gif, אנימיישן גיף

אנימיישן גיף, animation gif

או קיי, הפסקה ומנוחה לעיניים – תגללו את המסך עד שהן יעלמו…ויהיה רק את הטקסט הזה.
לא קל אה, אבל בכל זאת חשיבה יצירתית
אם תכניסו את התמונות לפוטושופ, תראו שכאן שמו 50 ואפילו 90 תמונות\פריימים בקצב של 0.04 השנייה.

אם תהיתם בליבכם, מה יקרה אם תנסו לשנות את תמונת הקאבר בפייסבוק לגיפ – אז ניסיתי ומאוד התבאסתי לגלות שזה לא עובד. רק תדמיינו מה היה קורה אם זה היה מצליח, ואוו.

מה בתנור? לבסוף יהיו חמישה גיפים, שבכל פעם שטוענים את האתר
של סטודיו אממה, יטען פרילודור אחר, כך שיש למה לצפות.
כמובן שאם יתווספו תובנות חדשות, אחזור ואעדכן.

רק טוב
אדם שרז | סטודיו אממה

כתיבת תגובה

Required fields are marked *.

*