בפלאש אפשר לסגור גיפ ישר בתוכנה, בלי לייבא לפוטושופ.
הדרכה ליצירת גיפ בפוטושופ מתוך אתר "המעצב": (
http://www.hameazev.com/2010/01/660/)
[h=2]שלב 01.[/h]
פתחו את פוטושופ ואת קובץ המקור. כמו שאתם רואים יש לנו 7 שכבות: רקע + עיגולים + מספרים 5 עד 1. חלק מהשכבות מוסתרות ותיכף תבינו מדוע.
רוצים להישאר תמיד מעודכנים? עשו לייק בפייסבוק של המעצב [h=2]שלב 02.[/h]
פתחו את חלון האנימציה שנמצא בשורת התפריט העליון תחת Window>Animation.
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"264","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-1.jpg"}[/IMG2] [h=2]שלב 03.[/h]
חלון האנימציה ניפתח. רואים את השכבות מסודרות אחת מעל השנייה ברצועות ארוכות שנקראות Time line או בתרגום חופשי לעברית “רצועת זמן”. אנחנו הולכים לשנות את תצוגת המסך במקום רצועות זמן ל-“פריימים” שיהיה לנו יותר קל לעבוד לפחות כרגע.
שימו לב לאייקון קטן שנראה כמו סרט צילום שנמצב בפינה הימנית תחתונה בחלון האנימציה. ראו דוגמה:
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"233","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-2.jpg"}[/IMG2] [h=2]שלב 04.[/h]
אחרי שמצאתם את האייקון המתחבא ולחצתם עליו החלפתם את התצוגה לפריימים וזה אמור להיראות כך:
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"157","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-3.jpg"}[/IMG2]
החץ הקטן השחור פותח לנו אפשרות לבחור כמה זמן אנחנו רוצים להשהות את הפריים. הכוונה תוך כמה זמן (בשניות) נעבור לפריים הבא.
בנוסף שימו לב לאייקונים של יצירת פריים חדש ומחיקת פריים. [h=2]שלב 05.[/h]
אוקי לאנימציה! פריים ראשון כבר נוצר לנו אוטומטית. בפריים הזה אנחנו רואים את העיגול עם הספרה 5. עכשיו אני רוצה ליצור פריים חדש עם הספרה 4. כדי לעשות את זה לחצו על האייקון של יצירת פריים חדש. עכשיו גשו אל חלון השכבות (F7) ולחצו על העין שנמצאת סמוך לשכבה 5 כדי להסתיר אותה. לחצו על העין של שכבה מספר 4 כדי להציג את השכבה בתוך הפריים. ראו דוגמה:
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"336","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-4.jpg"}[/IMG2] [h=2]שלב 06.[/h]
עכשיו עשו את אותו תהליך שוב פעם לשאר השכבות. בסופו של דבר זה מה שאתם צריכים לראות:
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"176","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-5.jpg"}[/IMG2]
אתם מוזמנים ללחוץ על כפתור ה- Play ותראו איך הפריימים עוברים מאחד לשני בהשהיה של 0.23 שניות. המעבר קצת מהיר מדיי אז לחצו על החץ השחור הקטן ושנו ל- 0.5 שניות. [h=2]שלב 07.[/h]
כדי לשמור את האנימציה ניגש אל שורת התפריט העליון נלחץ על File>Save For Web And Devices. יפתח לנו חלון שמירה בו נוכל לקבוע שסוג הקובץ יהיה GIF כדי שתהיה לנו הנפשה ולדאוג שהוא יהיה בלופ. בחרו שם ושמרו את הקובץ.
[IMG2=JSON]{"data-align":"none","data-size":"full","height":"718","title":"\u05d9\u05e6\u05d9\u05e8\u05ea \u05d0\u05e0\u05d9\u05de\u05e6\u05d9\u05d4 \u05d1\u05e4\u05d5\u05d8\u05d5\u05e9\u05d5\u05e4","width":"690","src":"http:\/\/www.hameazev.com\/wp-content\/uploads\/2010\/01\/ph_animation_cs3-6.jpg"}[/IMG2]
לסיכום:
בפוסט הזה ראינו את הבסיס ליצירת אנימציה בפוטושופ בפורמט GIF ע”י שימוש בפריימים ושכבות. בעזרת חלון האנימציה תוכלו ליצור אנימציות בקל קלות העיקר להמשיך לחקור ולעבוד! שיהיה בהצלחה!