Paano Gumawa ng Animated GIF Para sa Iyong Susunod na Email Marketing Campaign Gamit ang Photoshop

Photoshop Animated GIF para sa Email Marketing

Nagkakaroon kami ng isang kahanga-hangang oras sa pakikipagtulungan sa pangunahing kliyente na si Closet52, isang online na tindahan ng damit na binansagan at itinayo namin mula sa simula para sa isang matatag at kilalang kumpanya ng fashion sa New York. Ang kanilang pamumuno ay palaging nakikipagtulungan sa amin sa mga collaborative na ideya para sa susunod na kampanya o diskarte na aming isinasagawa. Bilang bahagi ng kanilang pagpapatupad, nag-deploy kami Klaviyo para ShopifyPlus. Ang Klaviyo ay isang kilalang marketing automation platform na may napakahigpit na pagsasama sa Shopify pati na rin sa maraming Shopify Apps.

Ang isang paboritong tampok ko ay ang kanilang Pagsubok na A / B sa Klaviyo. Maaari kang bumuo ng iba't ibang bersyon ng isang email, at magpapadala si Klaviyo ng isang sampling, maghintay ng tugon, at pagkatapos ay ipadala sa mga natitirang subscriber ang nanalong bersyon - lahat ay awtomatiko.

Nag-subscribe ang aming kliyente sa mga fashion email sa industriya at patuloy na binanggit kung gaano nila nagustuhan ang ilang email na may slideshow ng mga larawan ng produkto. Tinanong nila kung magagawa namin iyon at sumang-ayon ako at gumawa ng campaign na may A/B test kung saan nagpadala kami ng isang bersyon na may animation ng 4 na produkto, at isa pang may iisang, maganda, static na imahe. Ang kampanya ay para sa isang blowout pagbebenta ng kanilang mga damit sa taglagas habang nagdadala sila ng mga bagong linya ng produkto.

Bersyon A: Animated na GIF

animation ng damit 3

Bersyon B: Static na Larawan

RB66117 1990 LS7

Ang credit ng larawan ay napupunta sa mga mahuhusay na tao sa Zeelum.

Ang sampling ng kampanya ay tumatakbo pa rin sa ngayon, ngunit medyo malinaw na ang email na may animated na graphic ay malayo sa pagganap sa static na imahe... sa halos isang 7% bukas na rate… ngunit isang kamangha-mangha 3 beses ang click-through rate (CTR)! Sa tingin ko ang katotohanan na ang animated na GIF ay naglagay ng maraming iba't ibang mga estilo sa harap ng subscriber na humantong sa mas maraming mga bisita.

Paano Gumawa ng Animated GIF Gamit ang Photoshop

Hindi ako kahit anong uri ng pro sa Photoshop. Sa katunayan, ang tanging mga oras na karaniwan kong ginagamit Photoshop ng Adobe Creative Cloud ay mag-alis ng mga background at mag-layer ng mga larawan, tulad ng paglalagay ng screenshot sa ibabaw ng isang laptop o mobile device. Gayunpaman, gumawa ako ng ilang paghuhukay online at naisip kung paano gumawa ng animation. Ang user interface para dito ay hindi ang pinakamadali, ngunit sa loob ng 20 minuto at pagkatapos basahin ang ilang mga tutorial, nagawa kong i-knock out ito.

Inihahanda ang aming pinagmulang mga larawan:

  • Mga Dimensyon – Maaaring malaki ang mga animated na GIF, kaya tiniyak kong itakda ang aking mga sukat ng file sa photoshop upang eksaktong tumugma sa aming 600px na lapad na lapad ng template ng email.
  • Pagpiga – Ang aming mga orihinal na larawan ay mataas ang resolution at napakataas na laki ng file, kaya binago ko ang mga ito at ini-compress ang mga ito Kraken sa mga JPG na may mas maliit na laki ng file.
  • Mga Paglilipat – Habang maaari kang matukso na magdagdag ng animation tweens (hal. fading transition) sa pagitan ng mga frame, na nagdaragdag ng maraming laki sa iyong file kaya maiiwasan kong gawin iyon.

Upang bumuo ng animation sa Photoshop:

  1. Gumawa ng bagong file kasama ang mga sukat na tumutugma sa eksaktong mga sukat na inilalagay mo sa iyong template ng email.
  2. piliin Window > Timeline upang paganahin ang view ng timeline sa base ng Photoshop.

Photoshop > Window > Timeline

  1. Idagdag ang bawat isa imahe bilang isang bagong layer sa loob ng Photoshop.

Photoshop > Magdagdag ng Mga Larawan Bilang Mga Layer

  1. I-click ang Lumikha ng Frame Animation sa Rehiyon ng Timeline.
  2. Sa kanang bahagi ng rehiyon ng Timeline, piliin ang menu ng hamburger at piliin Gumawa ng mga Frame mula sa Mga Layer.

Photoshop > Timeline > Gumawa ng Mga Frame mula sa Mga Layer

  1. Sa loob ng rehiyon ng Timeline, magagawa mo i-drag ang mga frame sa pagkakasunud-sunod na gusto mong lumabas ang mga larawan.
  2. Mag-click sa bawat frame kung saan ito nagsasabing 0 seg, at piliin ang oras na gusto mong ipakita ang frame na iyon. Pinili ko 2.0 segundo bawat frame.
  3. Sa dropdown sa ibaba ng mga frame, piliin Magpakailanman upang matiyak na patuloy na nag-loop ang animation.
  4. I-click ang I-play ang Button upang i-preview ang iyong animation.
  5. I-click ang File > I-export > I-save para sa Web (Legacy).

Photoshop > File > Export > Save for Web (Legacy)

  1. piliin GIF mula sa mga opsyon sa kaliwang tuktok ng screen ng I-export.
  2. Kung hindi transparent ang iyong mga larawan, alisan ng check ang Aninaw pagpipilian.
  3. I-click ang I-save ang at i-export ang iyong file.

photoshop export animated gif

Ayan yun! Mayroon ka na ngayong animated na GIF upang i-upload sa iyong email platform.

Pagsisiwalat: Closet52 ay isang kliyente ng aking kumpanya, Highbridge. Gumagamit ako ng mga kaakibat na link sa buong artikulong ito para sa Adobe, Klaviyo, Kraken, at Shopify.