איך עושים אנימציה בפוטושופ – מדריך קל

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

חשוב לי להדגיש שהמילה אנימציה היא מילה גדולה מדיי ובפוסט הזה אנחנו הולכים ליצור תמונת אנימציה פשוטה מאוד שבסוף התהליך נשמור אותה בפורמט GIF. פורמט GIF (Graphics Interchange Format) הוא קובץ בודד המכיל בתוכו מספר תמונות דחוסות ועושים בו יותר שימוש בדפי אינטרנט.

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

אוקי, אז עכשיו אחרי שסגרנו את הפינה הזאת נתחיל.

יצירת אנימציה בפוטושופ מתאפשרת מגרסת פוטושופ CS2 ומעלה.

זה מה שנעשה בפוסט הזה:

קליק כאן להורדת קובץ המקור לפוסט הזה

שלב 01.

פתחו את פוטושופ ואת קובץ המקור. כמו שאתם רואים יש לנו 7 שכבות: רקע + עיגולים + מספרים 5 עד 1. חלק מהשכבות מוסתרות ותיכף תבינו מדוע.

שלב 02.

פתחו את חלון האנימציה שנמצא בשורת התפריט העליון תחת Window>Animation.

שלב 03.

חלון האנימציה ניפתח. רואים את השכבות מסודרות אחת מעל השנייה ברצועות ארוכות שנקראות Time line  או בתרגום חופשי לעברית “רצועת זמן”. אנחנו הולכים לשנות את תצוגת המסך במקום רצועות זמן ל-“פריימים” שיהיה לנו יותר קל לעבוד לפחות כרגע. שימו לב לאייקון קטן שנראה כמו סרט צילום שנמצב בפינה הימנית תחתונה בחלון האנימציה. ראו דוגמה:

שלב 04.

אחרי שמצאתם את האייקון המתחבא ולחצתם עליו החלפתם את התצוגה לפריימים וזה אמור להיראות כך:

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

שלב 05.

אוקי לאנימציה! פריים ראשון כבר נוצר לנו אוטומטית. בפריים הזה אנחנו רואים את העיגול עם הספרה 5. עכשיו אני רוצה ליצור פריים חדש עם הספרה 4. כדי לעשות את זה לחצו על האייקון של יצירת פריים חדש. עכשיו גשו אל חלון השכבות (F7) ולחצו על העין שנמצאת סמוך לשכבה 5 כדי להסתיר אותה. לחצו על העין של שכבה מספר 4 כדי להציג את השכבה בתוך הפריים. ראו דוגמה:

שלב 06.

עכשיו עשו את אותו תהליך שוב פעם לשאר השכבות. בסופו של דבר זה מה שאתם צריכים לראות:

אתם מוזמנים ללחוץ על כפתור ה- Play ותראו איך הפריימים עוברים מאחד לשני בהשהיה של 0.23 שניות. המעבר קצת מהיר מדיי אז לחצו על החץ השחור הקטן ושנו ל- 0.5 שניות.

שלב 07.

כדי לשמור את האנימציה ניגש אל שורת התפריט העליון נלחץ על File>Save For Web And Devices. יפתח לנו חלון שמירה בו נוכל לקבוע שסוג הקובץ יהיה GIF כדי שתהיה לנו הנפשה ולדאוג שהוא יהיה בלופ. בחרו שם ושמרו את הקובץ.

לסיכום:

בפוסט הזה ראינו את הבסיס ליצירת אנימציה בפוטושופ בפורמט GIF ע”י שימוש בפריימים ושכבות. בעזרת חלון האנימציה תוכלו ליצור אנימציות בקל קלות העיקר להמשיך לחקור ולעבוד! שיהיה בהצלחה!

34 תגובות על “איך עושים אנימציה בפוטושופ – מדריך קל

  • 04/01/2010 at 22:03
    Permalink

    חחחחחח תווודהה D::::

    תותח!!

    Reply
  • 23/04/2011 at 16:48
    Permalink

    תודה!זה עובד יפה, אבל…איך אני מעלה את הקובץ בתור תמונה לבלוג שלי?

    Reply
    • המעצב בתחתונים
      23/04/2011 at 22:04
      Permalink

      אהלן, ראשית יש לך אחלה אתר
      ושנית אני לא יודע איך אתה אמור לעלות את התמונה לבלוג שלך
      בהצלחה :)

      Reply
  • 29/04/2011 at 14:52
    Permalink

    מדריך מגניב ופשוט, יצאו לי תוצאות יפות .
    תודה רבהה !

    Reply
  • 29/04/2011 at 15:02
    Permalink

    אני יכולה לעשות מין מעברים בין התמונות יפים כאלו כמו טשטוש,העברת תמונה.. ?

    Reply
    • המעצב בתחתונים
      30/04/2011 at 13:15
      Permalink

      כן

      Reply
  • 03/07/2011 at 10:57
    Permalink

    שלום מעצב בתחתונים מקווה שתראה את ההודעה הזאת ותחזור אלי באימייל או משהו כזה יש לי כמה שאלות

    1.אתה יכול לשים במדריך מקום להוריד ממנו את הפוטושופ

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

    almog.alo99@gmail.com בבקשה תחזור אלי עם הסבר

    Reply
  • 01/01/2012 at 16:08
    Permalink

    המדריך טוב אבל אצלי יש בעיה …
    עשיתי את כל השלבים לפי הסדר והכל הלך יופי .
    אבל אחרי שאני שומרת אז כשאני פותחת תצוגה מקדימה אני לא רואה את התמונה מתחלפת . היא פשוט תקועה במצב ההתחלתי .. \:
    אפילו את ההגדרות בשמירה עשיתי בדיוק כמו אצלך.
    איך אני מסדרת את זה ?

    Reply
    • המעצב בתחתונים
      09/01/2012 at 12:36
      Permalink

      בטוח שאת שומרת את התמונה כבפורמט GIF?
      יכול להיות שבטעות שמרת את זה כתמונה רגילה
      את צריכה פורמט
      GIF

      Reply
  • 28/05/2012 at 10:44
    Permalink

    יש לי פוטושופ cs6 – גרסת הניסיון ל-30 יום.
    ניכנסתי לחלון ה- windos ולא היה שם animation .
    זה בגלל הגרסת ניסיון? למה זה לא מופיע?

    Reply
    • המעצב בתחתונים
      11/06/2012 at 12:30
      Permalink

      אין לי מושג… יש לי cd5.5 ושם הכול תקין

      Reply
  • 28/07/2012 at 22:36
    Permalink

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

    Reply
  • 04/08/2012 at 13:40
    Permalink

    היי יש לי בעיה יש לי פוטושופ CS6 ואין בו את אותו התפריט וכו’ תוכל להכין גם מדריך בפוטושופ CS6
    תודה מראש
    חסוי

    Reply
  • 11/08/2012 at 12:57
    Permalink

    היי , איזה מספר פוטושופ השתמשת ? והאם הפוטושופ הזה עם וירוסים כי אני משתמשת במחשב נייד והם מאוד רגישים XD

    Reply
  • 12/08/2012 at 13:19
    Permalink

    היי
    גם אני לא הצלחתי לעשות..
    כאילו המדריך ממש טוב!
    ושמרתי את זה בפורמט אבל זה תקוע לי …
    פשוט זה לא זז
    זה תקוע על המספר 5
    זה כמו הבעיה של מיקה
    אני פשוט לא מצליחה..
    מקווה לתשובתך…

    Reply
  • 21/09/2012 at 21:48
    Permalink

    היי .. יש לי פוטושופ CS3 בעברית ואין לי את האנימציה בחלון
    אולי אתה יודע איפה זה ?

    Reply
    • המעצב
      11/10/2012 at 22:21
      Permalink

      אם זה לא נמצא תחת חלונות אז זה לא נמצא.

      Reply
    • 19/04/2013 at 05:28
      Permalink

      בעברית זה “הנפשה” ולא אנימציה.

      Reply
      • המעצב
        20/04/2013 at 21:41
        Permalink

        תודה. :)

        Reply
  • 31/03/2013 at 13:17
    Permalink

    אני לא מצליח לעשות את שאר המספרים.

    Reply
  • 11/11/2013 at 17:00
    Permalink

    דבר ראשון, המון תודה! זה מאוד עוזר לי!

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

    Reply
    • המעצב
      13/11/2013 at 13:07
      Permalink

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

      Reply
  • 23/02/2015 at 12:41
    Permalink

    תודה רבה זה ממש היה ברור

    Reply
  • 27/11/2015 at 01:04
    Permalink

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

    רב תודות
    שלמה טיגר

    Reply
  • 03/12/2015 at 14:16
    Permalink

    תודה ..
    הסבר ברור.
    אם יש אפשרויות נוספות מונפשות יותר נשמח לראות הדרכה..

    Reply
  • 15/05/2016 at 14:14
    Permalink

    הדרכה מצוינת!
    תודה רבה!!
    אבל למה בשמירה הוא אומר לי שלא ניתן להשלים את הפקודה כי לא ניתן למצוא את הקובץ…?

    תודה שוב!!

    Reply
  • 13/06/2016 at 01:45
    Permalink

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

    Reply
  • 15/08/2016 at 00:28
    Permalink

    היי
    אין לי בפוטושופ בcs6 קטגוריה מתחת לwindows בשם animation’ פעם ידעתי לעשות קובץ גיף משני חלקים חייבת דחוף לדעת,אשמח אם תעזור לי

    Reply
  • 20/11/2017 at 17:26
    Permalink

    זה נמצא בקטגוריה TIMELINE

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *