כיצד ליצור GIF מונפש עבור מסע הפרסום הבא שלך בשיווק בדוא"ל באמצעות Photoshop

Photoshop אנימציה GIF לשיווק בדוא"ל

אנחנו נהנים לעבוד עם לקוח מפתח Closet52, an חנות שמלות מקוונת אותה מיתגנו ובנינו מהיסוד עבור חברת אופנה מבוססת ומוכרת בניו יורק. ההנהגה שלהם תמיד עובדת איתנו על רעיונות משותפים לקמפיין או האסטרטגיה הבאה שאנו מבצעים. כחלק מהיישום שלהם, פרסנו קלוויו ל Shopify פלוס. Klaviyo היא פלטפורמת אוטומציה שיווקית ידועה עם אינטגרציה הדוקה מאוד ל- Shopify כמו גם לאפליקציות Shopify רבות.

התכונה האהובה עלי היא שלהם בדיקת A / B בקלאוויו. אתה יכול לפתח גרסאות שונות של אימייל, ו- Klaviyo ישלח דגימה, ימתין לתגובה, ואז ישלח לשאר המנויים את הגרסה הזוכה - הכל באופן אוטומטי.

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

גרסה א': GIF מונפש

אנימציית שמלות 3

גרסה ב': תמונה סטטית

RB66117 1990 LS7

קרדיט התמונה מגיע לאנשים המוכשרים ב זאלום.

דגימת הקמפיין עדיין פועלת כרגע, אבל די ברור שהמייל עם הגרפיקה המונפשת עולה בהרבה על התמונה הסטטית... בערך שיעור פתיחה של 7%.… אבל מדהים פי 3 משיעור הקליקים (שק"ל)! אני חושב שהעובדה שה-GIF המונפש שם כמה סגנונות שונים לפני המנוי הובילה להרבה יותר מבקרים.

כיצד ליצור GIF מונפש באמצעות פוטושופ

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

הכנת תמונות המקור שלנו:

  • מידות - קובצי GIF מונפשים יכולים להיות די גדולים, אז הקפדתי להגדיר את ממדי קובץ הפוטושופ שלי כך שיתאימו בדיוק לרוחב תבנית הדוא"ל ברוחב 600 פיקסלים שלנו.
  • דְחִיסָה - התמונות המקוריות שלנו היו ברזולוציה גבוהה וגודל קובץ גבוה מאוד, אז שיניתי את הגודל שלהן ודחסתי אותן קראקן לקובצי JPG עם גודל קובץ קטן בהרבה.
  • מעברים - למרות שאתה עלול להתפתות להוסיף אנימציה תאומים (למשל מעבר דהייה) בין מסגרות, שמוסיף הרבה גודל לקובץ שלך אז הייתי נמנע מלעשות זאת.

כדי לבנות את האנימציה בפוטושופ:

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

Photoshop > חלון > ציר זמן

  1. הוסף כל אחד תמונה כשכבה חדשה בתוך פוטושופ.

Photoshop > הוסף תמונות כשכבות

  1. נְקִישָׁה צור Frame Animaבאזור ציר הזמן.
  2. בצד ימין של אזור ציר הזמן, בחר בתפריט ההמבורגרים ובחר צור מסגרות משכבות.

Photoshop > ציר זמן > צור מסגרות משכבות

  1. בתוך אזור ציר הזמן, אתה יכול גרור את המסגרות לסדר שאתה רוצה שהתמונות יופיעו בהן.
  2. לחץ על כל מסגרת שבה כתוב 0 שניות, ובחר את הזמן שתרצה שהמסגרת תציג. אני בחרתי 2.0 שניות לפריים.
  3. בתפריט הנפתח מתחת למסגרות, בחר לָנֶצַח כדי להבטיח את לולאות האנימציה באופן רציף.
  4. לחץ על לחצן הפעלה לתצוגה מקדימה של האנימציה שלך.
  5. נְקִישָׁה קובץ > ייצוא > שמירה לאינטרנט (מדור קודם).

Photoshop > קובץ > ייצוא > שמירה לאינטרנט (מדור קודם)

  1. בחר GIF מהאפשרויות בפינה השמאלית העליונה של מסך הייצוא.
  2. אם התמונות שלך אינן שקופות, בטל את הסימון של שקיפות אוֹפְּצִיָה.
  3. נְקִישָׁה שמור וייצא את הקובץ שלך.

פוטושופ ייצוא GIF מונפש

זהו זה! כעת יש לך את ה-GIF המונפש להעלאה לפלטפורמת האימייל שלך.

גילוי נאות: ארון52 הוא לקוח של המשרד שלי, Highbridge. אני משתמש בקישורי שותפים לאורך מאמר זה עבור Adobe, קלוויו, קראקן, ו Shopify.