วิธีทำ GIF แบบเคลื่อนไหวสำหรับแคมเปญการตลาดทางอีเมลครั้งต่อไปของคุณโดยใช้ Photoshop

Photoshop Animated GIF สำหรับการตลาดผ่านอีเมล

เรากำลังมีช่วงเวลาที่ดีในการทำงานกับลูกค้าคนสำคัญ Closet52 และ ร้านขายชุดออนไลน์ ที่เราสร้างแบรนด์และสร้างขึ้นจากพื้นฐานสำหรับบริษัทแฟชั่นที่มีชื่อเสียงและเป็นที่ยอมรับในนิวยอร์ก ความเป็นผู้นำของพวกเขาทำงานร่วมกับเราเสมอเกี่ยวกับแนวคิดการทำงานร่วมกันสำหรับแคมเปญหรือกลยุทธ์ถัดไปที่เรากำลังดำเนินการ เป็นส่วนหนึ่งของการใช้งาน เราได้ปรับใช้ Klaviyo for ShopifyPlus. Klaviyo เป็นแพลตฟอร์มการตลาดอัตโนมัติที่มีชื่อเสียงพร้อมการผสานรวมอย่างแน่นหนากับ Shopify รวมถึงแอป Shopify จำนวนมาก

ฟีเจอร์โปรดของฉันคือของพวกเขา ทดสอบ A / B ในกลาวิโย คุณสามารถพัฒนาอีเมลในเวอร์ชันต่างๆ ได้ และ Klaviyo จะส่งตัวอย่าง รอการตอบกลับ จากนั้นส่งเวอร์ชันที่ชนะให้กับสมาชิกที่เหลือ ทั้งหมดนี้โดยอัตโนมัติ

ลูกค้าของเราสมัครรับอีเมลแฟชั่นในอุตสาหกรรมและยังคงตั้งข้อสังเกตว่าพวกเขาชอบอีเมลบางฉบับพร้อมสไลด์โชว์ภาพถ่ายผลิตภัณฑ์มากน้อยเพียงใด พวกเขาถามว่าเราทำได้ไหม และฉันตกลงและสร้างแคมเปญด้วยการทดสอบ A/B โดยที่เราส่งเวอร์ชันหนึ่งที่มีแอนิเมชั่นผลิตภัณฑ์ 4 รายการ และอีกเวอร์ชันหนึ่งมีภาพนิ่งที่สวยงามเพียงภาพเดียว แคมเปญนี้มีไว้เพื่อระเบิด ขายชุดฤดูใบไม้ร่วง ในขณะที่พวกเขากำลังนำเสนอสายผลิตภัณฑ์ใหม่

เวอร์ชัน A: Animated GIF

แอนิเมชั่นการแต่งกาย3

เวอร์ชัน B: ภาพนิ่ง

RB66117 1990 LS7

เครดิตภาพไปที่คนเก่งที่ ซีลุม.

การสุ่มตัวอย่างแคมเปญยังคงทำงานอยู่ในขณะนี้ แต่ค่อนข้างชัดเจนว่าอีเมลที่มีกราฟิกแบบเคลื่อนไหวนั้นมีประสิทธิภาพเหนือกว่าภาพนิ่งมาก… ประมาณ อัตราการเปิด 7%…แต่น่าประหลาดใจ อัตราการคลิกผ่าน 3 เท่า (CTR)! ฉันคิดว่าความจริงที่ว่า GIF แบบเคลื่อนไหวได้ใส่สไตล์ต่างๆ มากมายไว้ข้างหน้าผู้สมัครสมาชิกทำให้มีผู้เยี่ยมชมมากขึ้น

วิธีการสร้างภาพเคลื่อนไหว GIF โดยใช้ Photoshop

ฉันไม่ใช่มืออาชีพด้าน Photoshop อันที่จริง ครั้งเดียวที่ฉันมักจะใช้ Photoshop ของ Adobe Creative Cloud คือการลบพื้นหลังและเลเยอร์รูปภาพ เช่น การวางภาพหน้าจอบนแล็ปท็อปหรืออุปกรณ์เคลื่อนที่ อย่างไรก็ตาม ฉันได้ขุดค้นทางออนไลน์และคิดหาวิธีสร้างแอนิเมชั่น อินเทอร์เฟซผู้ใช้สำหรับสิ่งนี้ไม่ง่ายที่สุด แต่ภายใน 20 นาทีและหลังจากอ่านบทช่วยสอนแล้ว ฉันก็ทำได้สำเร็จ

กำลังเตรียมภาพต้นฉบับของเรา:

  • ขนาด – GIF แบบเคลื่อนไหวอาจมีขนาดค่อนข้างใหญ่ ดังนั้นฉันจึงแน่ใจว่าได้กำหนดขนาดไฟล์ photoshop ของฉันให้ตรงกับความกว้างเทมเพลตอีเมลแบบกว้าง 600px ของเราทุกประการ
  • การอัด – ภาพต้นฉบับของเรามีความละเอียดสูงและขนาดไฟล์สูงมาก ดังนั้นฉันจึงปรับขนาดและบีบอัดด้วย คราเคน เป็น JPG ที่มีขนาดไฟล์เล็กกว่ามาก
  • การเปลี่ยน – ในขณะที่คุณอาจถูกล่อลวงให้เพิ่มแอนิเมชั่น บิด (เช่น การเปลี่ยนภาพเฟด) ระหว่างเฟรม ซึ่งจะเพิ่มขนาดให้กับไฟล์ของคุณอย่างมาก ดังนั้นฉันจะไม่ทำเช่นนั้น

ในการสร้างแอนิเมชั่นใน Photoshop:

  1. สร้างไฟล์ใหม่ ด้วยขนาดที่ตรงกับขนาดที่คุณวางในเทมเพลตอีเมลของคุณ
  2. เลือก หน้าต่าง > ไทม์ไลน์ เพื่อเปิดใช้งานมุมมองไทม์ไลน์ที่ฐานของ Photoshop

Photoshop > หน้าต่าง > ไทม์ไลน์

  1. เพิ่มแต่ละรายการ ภาพเป็นเลเยอร์ใหม่ ภายใน Photoshop

Photoshop > เพิ่มรูปภาพเป็นเลเยอร์

  1. คลิก สร้างแอนิเมชั่นเฟรมในภูมิภาคไทม์ไลน์
  2. ที่ด้านขวามือของขอบเขตไทม์ไลน์ ให้เลือกเมนูแฮมเบอร์เกอร์แล้วเลือก สร้างเฟรมจากเลเยอร์.

Photoshop > ไทม์ไลน์ > สร้างเฟรมจากเลเยอร์

  1. ภายในเขตไทม์ไลน์ คุณสามารถ ลากเฟรมตามลำดับ ที่คุณต้องการให้รูปภาพปรากฏ
  2. คลิกแต่ละเฟรมที่มีข้อความว่า 0 วินาที แล้วเลือกเวลาที่คุณต้องการให้แสดงเฟรมนั้น ฉันเลือก 2.0 วินาทีต่อเฟรม.
  3. ในรายการดรอปดาวน์ด้านล่างเฟรม ให้เลือก ตลอดไป เพื่อให้แน่ใจว่าภาพเคลื่อนไหวจะวนซ้ำอย่างต่อเนื่อง
  4. คลิก ปุ่มเล่น เพื่อดูตัวอย่างภาพเคลื่อนไหวของคุณ
  5. คลิก ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ (ดั้งเดิม).

Photoshop > ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ (ดั้งเดิม)

  1. เลือก GIF จากตัวเลือกที่ด้านบนซ้ายของหน้าจอส่งออก
  2. หากรูปภาพของคุณไม่โปร่งใส ให้ยกเลิกการเลือก ความโปร่งใส ตัวเลือก
  3. คลิก ลด และส่งออกไฟล์ของคุณ

photoshop ส่งออกภาพเคลื่อนไหว gif

แค่นั้นแหละ! ตอนนี้คุณมี GIF แบบเคลื่อนไหวเพื่ออัปโหลดไปยังแพลตฟอร์มอีเมลของคุณ

การเปิดเผยข้อมูล: ตู้เสื้อผ้า52 เป็นลูกค้าของบริษัทของฉัน Highbridge. ฉันใช้ลิงค์พันธมิตรในบทความนี้เพื่อ อะโดบี, Klaviyo, คราเคนและ Shopify.