יום שני, 14 במאי 2012

יצירת סרטון בפורמט Animated GIF באמצעות Photoshop

בעבר הרחוק, הרבה אתרי אינטרנט השתמשו בתמונות וסרטונים קצרים בפורמט GIF (סיומת gif).
לפורמט זה יש מספר חסרונות, בין היתר תמיכה ב-256 צבעים בלבד.  לכן, כשדפדפנים התחילו לתמוך ב-Flash ותמונות מסוג PNG, רב מפתחי האתרים זנחו את הפורמט המיושן.
כיום, השימוש בפלאש בדעיכה עקב חוסר התמיכה ב-Smart Phones ו-Tablets וכן כניסתו של HTML5.
התבקשתי לאחרונה לייצר סרטון או באנר מונפש לאתר אינטרנט, עם הדרישה שהאנימציה תוצג כראוי בכל המכשירים החכמים למיניהם.
לשם כך ייצרתי סרטון קצר באפטר אפקטס והשתמשתי בפוטושופ כדי להמיר אותו ל-Animated GIF (סרטון בפורמט GIF).  אמנם הפורמט מיושן, אך הוא נתמך בדפדפנים של רוב המכשירים והקבצים עצמם יחסית קטנים. פוטושופ מסוגלת גם להתגבר על המספר המוגבל של הצבעים בעזרת טכניקת Dither (ערבוב פיקסלים של צבעים שונים ליצירת צבע חדש).

1. ראשית יש לייצא סרטון בפורמט Quicktime Animation מתוכנת הוידאו שלכם. התמונה משמאל מדגימה איך לייצא סרטון בפורמט זה מאפטר אפקטס.
כדי שהקובץ הסופי לא יהיה גדול מדי מומלץ לייצר סרטון עם קצב של 15 או 12 פריימים לשניה (FPS).
יצוא סרטון Quicktime Animation מאפטר אפקטס
2. הפעלת פוטושופ 32 Bit פתחו את פוטושופ.
שימו לב: יש להשתמש בגירסת ה-32Bit של פוטושופ בלבד.
מגירסה CS4 יש למעשה שתי גירסאות של פוטושופ מותקנות על המחשב: אחת 64Bit ואחת 32Bit.  אפשרות יצירת ה-Animated GIF קיימת רק בגירסת ה-32Bit (ראו דוגמא בתמונה משמאל).
3. יבוא הסרטון לפוטושופ בפוטושופ, בחרו מתפריט:
File → Import → Video Frames to Layers
כדי לייבא את סרטון ה-Quicktime שייצרתם באפטר אפקטס.

לאחר שבחרתם בקובץ הסרטון ליבוא, פוטושופ תשאל אם לייבא את כל הסרטון או רק חלק ממנו. פשוט תלחצו על OK כדי לייבא את כל הסרטון.
4. פתיחת חלון Save for Web & Devices בפוטושופ הסרטון יפתח בפוטושופ כך שכל פריים ופריים יושב על שכבה משלו.  בחרו מתפריט:
File → Save for Web & Devices
כדי לפתוח את חלון היצוא.
5. הגדרת שמירה כ-Animated GIF שנו את הגדרות היצוא בצד הימני העליון לפי התמונה משמאל.  שימו לב שיש מספר לא קטן של אפשרויות יצוא וההגדרות האלו מבטיחות שיתקבל סרטון בפורמט Animated GIF באיכות טובה וגודל קובץ מינימלי.
שימו לב לאפשרות ה-Looping מימין למטה: בתמונה משמאל מצוין שהסרטון יתנגן בחזרה אינסופית (מתאים לבאנרים). ניתן לבחור גם כמות מסוימת של חזרות או לבטל את החזרות לגמרי (מתאים לכפתורים).
לאחר מכן לחצו על כפתור Save.
6. שמירת הסרטון כקובץ Animated GIF כמעט מסיימים. בחלון השמירה, הקלידו שם לקובץ המיועד וודאו שהפרמטרים הבאים מוגדרים כך:
Format: Images Only
Settings: Background Image
לסיום לחצו על כפתור Save כדי לשמור את הסרטון.
התוצאה הסופית:
קובץ Animated GIF סופי
את קובץ הסרטון הסופי ניתן לשתול בכל אתר בעזרת תג ה-HTML הבסיסי: <img>.

אין תגובות:

הוסף רשומת תגובה

שתפו בפייסבוק
שתפו בטוויטר
שתפו בגוגל פלוס
שתפו במייל
רשתות נוספות