Photoshop을 사용하여 다음 이메일 마케팅 캠페인을 위한 애니메이션 GIF를 만드는 방법

이메일 마케팅을 위한 Photoshop 애니메이션 GIF

우리는 주요 고객인 Closet52와 함께 놀라운 시간을 보내고 있습니다. 온라인 드레스 매장 우리는 뉴욕에서 잘 알려진 유명 패션 회사를 위해 처음부터 브랜드화하고 구축했습니다. 그들의 리더십은 우리가 실행하고 있는 다음 캠페인이나 전략에 대한 협업 아이디어에 대해 항상 우리와 함께 일하고 있습니다. 구현의 일환으로 우리는 클라 비요 ...에 대한 쇼피파이 플러스. Klaviyo는 Shopify 뿐만 아니라 많은 Shopify 앱과 매우 긴밀하게 통합된 잘 알려진 마케팅 자동화 플랫폼입니다.

내가 가장 좋아하는 기능은 A / B 테스트 클라비요에서. 다양한 버전의 이메일을 개발할 수 있으며 Klaviyo는 샘플링을 보내고 응답을 기다린 다음 나머지 구독자에게 우승 버전을 자동으로 보냅니다.

우리 고객은 업계의 패션 이메일을 구독하고 제품 사진의 슬라이드쇼와 함께 일부 이메일이 얼마나 마음에 들었는지 계속해서 언급했습니다. 그들은 우리가 그렇게 할 수 있는지 물었고 나는 동의하고 A/B 테스트로 캠페인을 구축했습니다. 한 버전에는 4개의 제품 애니메이션이 포함된 버전과 하나의 아름답고 정적인 이미지가 포함된 다른 버전을 보냈습니다. 캠페인은 폭발을위한 것입니다 가을 드레스 판매 새로운 제품 라인을 선보이기 때문입니다.

버전 A: 애니메이션 GIF

드레스 애니메이션 3

버전 B: 정적 이미지

RB66117 1990 LS7

사진 크레딧은 재능있는 사람들에게 돌아갑니다. 젤룸.

캠페인 샘플링은 현재 계속 실행되고 있지만 애니메이션 그래픽이 포함된 이메일이 정적 이미지보다 훨씬 더 나은 성능을 발휘한다는 것은 분명합니다. 오픈율 7%...하지만 놀라운 클릭률 3배 (클릭률 (CTR))! 애니메이션 GIF가 구독자 앞에 여러 가지 다른 스타일을 부여했다는 사실이 훨씬 더 많은 방문자를 이끌었다고 생각합니다.

Photoshop을 사용하여 애니메이션 GIF를 만드는 방법

저는 Photoshop의 어떤 종류의 전문가도 아닙니다. 사실 내가 평소에 사용하는 유일한 시간은 어도비 크리에이티브 클라우드의 포토샵 랩톱이나 모바일 장치 위에 스크린샷을 놓는 것과 같이 배경을 제거하고 이미지를 레이어링하는 것입니다. 그러나 나는 온라인에서 약간의 파고를 통해 애니메이션을 만드는 방법을 알아 냈습니다. 이것에 대한 사용자 인터페이스는 가장 쉽지는 않지만 20분 이내에 몇 가지 자습서를 읽은 후 녹아웃할 수 있었습니다.

소스 이미지 준비:

  • Dimensions – 애니메이션 GIF는 상당히 클 수 있으므로 Photoshop 파일 크기를 600px 너비의 이메일 템플릿 너비와 정확히 일치하도록 설정했습니다.
  • 압축 – 원본 이미지는 해상도가 높고 파일 크기가 매우 커서 크기를 조정하고 압축했습니다. 크라켄 파일 크기가 훨씬 작은 JPG로 변환합니다.
  • 전학 – 애니메이션을 추가하고 싶을 수도 있지만 트윈 (예: 페이딩 전환) 프레임 간, 파일에 많은 크기를 추가하므로 그렇게 하지 않습니다.

Photoshop에서 애니메이션을 빌드하려면:

  1. 새 파일 만들기 이메일 템플릿에 배치하는 정확한 치수와 일치하는 치수로
  2. 창 > 타임라인 Photoshop 기반에서 타임라인 보기를 활성화합니다.

Photoshop > 창 > 타임라인

  1. 각각 추가 새 레이어로 이미지 포토샵 내에서.

Photoshop > 이미지를 레이어로 추가

  1. . 프레임 생성타임라인 영역에서.
  2. 타임라인 영역의 오른쪽에서 햄버거 메뉴를 선택하고 레이어에서 프레임 만들기.

Photoshop > 타임라인 > 레이어에서 프레임 만들기

  1. 타임라인 영역 내에서 다음을 수행할 수 있습니다. 프레임을 순서대로 드래그 이미지를 표시할 수 있습니다.
  2. 0초라고 표시된 각 프레임을 클릭하고 해당 프레임을 표시할 시간을 선택합니다. 나는 선택했다 프레임당 2.0초.
  3. 프레임 아래의 드롭다운에서 다음을 선택합니다. 영원히 애니메이션이 지속적으로 반복되도록 합니다.
  4. 클릭 재생 버튼 애니메이션을 미리 봅니다.
  5. . 파일 > 내보내기 > 웹용으로 저장(레거시).

Photoshop > 파일 > 내보내기 > 웹용으로 저장(레거시)

  1. GIF 내보내기 화면의 왼쪽 상단에 있는 옵션에서
  2. 이미지가 투명하지 않으면 선택을 취소하십시오. 투명도 옵션을 선택합니다.
  3. . 찜하기 파일을 내보냅니다.

Photoshop 내보내기 애니메이션 gif

그게 다야! 이제 이메일 플랫폼에 업로드할 애니메이션 GIF가 생겼습니다.

공개 : 옷장 52 우리 회사의 고객이고, Highbridge. 이 기사 전체에 걸쳐 제휴사 링크를 사용하고 있습니다. 어도비 벽돌, 클라 비요, 크라켄의 메이크업 시연, 그리고 한국에서 사랑을 담아 보낸 Shopify.