Гифки для фотошопа: Как сделать гифку из видео в Фотошопе, GIF с помощью Photoshop

Содержание

Как уменьшить объём файла анимации GIF в Photoshop

Автор Дмитрий Евсеенков На чтение 5 мин Просмотров 2.3к. Обновлено 06.12.2021

Продолжение советов по оптимизации и уменьшению объёма анимированного файла GIF, начало смотрите здесь.

Содержание

1. Подбор оптимальной модели редукции цвета

Всего в Photoshop имеется четыре модели:
Перцепционная (Perceptual) — для создания пользовательской таблицы цветов, наиболее гармоничных для восприятия

Селективная (Selective) — по умолчанию создает таблицу цветов, схожую с перцепционной, но основанную на ключевых цветах изображения, причём предпочтение отдается web-цветам. Эта таблица обычно делает изображение с наибольшей достоверностью цветов. Эта модель выбрана по умолчанию.

Адаптивная (Adaptive) — для создания пользовательской таблицы цветов спектра путём выборки из тех цветов,которые чаще повторяются в изображении. Например, изображение только с оттенками зеленого и синего цвета создаёт таблицу в основном из оттенков синего и зеленого. Большинство цветов изображения концентрируется в определённой области спектра

Ограниченная (Restrictive) — использует стандартную палитру из 216 безопасных Web-цветов.

Справка: Безопасные веб-цвета рекомендуются для экранного дизайна. Они всегда неизменны при переходе от одного браузера к другому, от одного монитора к другому, или от одной платформы к другой, с их различными разрешениями и возможностями цветопередачи.

Если ваше изображение имеет меньше, чем 216 цветов, неиспользуемые цвета удаляются из таблицы.

Ели говорить откровенно, то я всегда подбираю эти модели методом научного тыка.

2. Замена цветов анимации на Web-цвета

Выше мы рассмотрели модели редукции цвета, последней из которых является «Селективная», меняющая ве цвета изображения на Web-безопасные. Это уменьшает объём файла, но и почти всегда ухудшает качество изображения.

Есть другой вариант — использовать одну из первых трёх моделей и заменять не все цвета на Web, а только часть. Делается это с помощью опции «Web-цвета» (Web Snap).

Чем больше значение процентов, тем меньше размер выходного файла, но и хуже качество. Вё зависит от исходных цветов, а, самое главное, переходов между цветами и светами изображения. Так что опять-таки, значение опции определяется эмпирически, в зависимости от каждого конкретного изображения.

3. Дизеринг (сглаживание, Dithering)

В официальных русскоязычных версиях Photoshop с незапамятных времён опция «Dithering» переводится как «Дизеринг», что является, мягко говоря, неточностью. В данном контексте «Dithering» означает «сглаживание», сглаживание переходов от одного цвета к другому.
Поскольку GIF-файлы содержат ограниченное количество цветов, для улучшения вида рисунка может понадобиться создание переходов между отдельными цветами, а для этого нужно имитировать недостающие цвета. Для создания этих цветов и существует опция «Дизеринг». Всего имеется четыре алгоритма для подобной имитации сглаживания — «Без дизеринга», «Случайное», «Регулярный» и «Шум»:

Рассмотрим алгоритмы подробнее (надеюсь, с режимом «Без дизеринга» всё понятно).

Используя алгоритм «Случайное» (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах «Регулярный» (Pattern) и «Шум» (Noise) настройки отсутствуют, Photoshop всё делает автоматически.

Для некоторых изображений «Дизеринг» просто необходим, но следует помнить, что чем больше его значение, тем больше размер файла, т.к. он добавляет разноцветные пиксели в непосредственной близости друг от друга, для имитации вторичных цветов или гладких цветовых градаций.

4. Другие настройки

«Потери» (Lossy) — управление уровнем потерь визуальной информации при сглаживании, которые могут уменьшить размер файла, но также и ухудшить качество картинки. Доступна при отключенной опции «Чересстрочно» (Interlaced).

«Прозрачность» (Transparency) — имеет смысл включить в том случае, если изображение содержит прозрачные участки. Алгоритмы сглаживания работают по принципу опции «Дизеринг» (Dithering) и называются так же.

5. Сравнение исходной и оптимизированной версий

После того, как Вы добавили свои настройки в диалоговое окно сохранения для Web, с оптимизированной версией произошли изменения, и, почти всегда, в сторону ухудшения качества. Тщательно проверьте полученный результат, сравните его с исходником:

Вы можете просмотреть анимацию, а также задать параметры повторов — один раз, постоянно или задать собственное количество повторов:

Если результат Вас удовлетворил, переходите к следующему действию — сохранению анимации.

6. Подогнать оптимизацию анимации под указанный объём файла

Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.

Нажимаем на кнопку в правом верхнем углу и выбираем строку «Оптимизировать по размеру файла» (Optimize to File Size)

7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации

После того, как Вы подобрали нужные настройки, сохраните их в наборе. Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку «Сохранить настройки»:

Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:

Будет показана не только анимация, но и все данные по файлу GIF — объём, линейные размеры и т.д., а также HTML-код. Для примера я взял анимацию из этого урока:

Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку «Сохранить» в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку «Сохранить»:

Анимация будет сохранена. Если сё-таки что-то не понравится, то можно будет произвести оптимизацию заново, используя сохранённый набор настроек.

Как сделать анимированный GIF в Photoshop

GIF, или «Формат обмена графикой», представляет собой формат сжатого файла изображения, который допускает анимацию. Есть много способов создать GIF, но Photoshop работает быстро и просто, со встроенными инструментами для манипуляции изображениями и анимации.

Как и классическая анимация, анимированный GIF состоит из серии неподвижных изображений, последовательно воспроизводимых для создания иллюзии движения. Найдите GIF из Интернета и перетащите его в Photoshop, и вы увидите отдельные кадры, из которых состоит анимация. Эти кадры — то, что мы собираемся построить в этом руководстве, чтобы анимировать рекламный баннер GIF.

Узнайте, как я сделал этот GIF! Фото с помощью graham wizardo.

Без лишних слов, вот как сделать анимированный GIF в Photoshop.

Содержание статьи

1 Шаг 1. Установите размеры и разрешение вашего документа Photoshop —
- 1. 1 Размеры
- 1.2 Разрешение
- 1.3 Цветовой режим
2 Шаг 2. Импорт файлов изображений в Photoshop —
- 2.1 Создание GIF из неподвижных изображений
- 2.2 Создание GIF из видео
3 Шаг 3: Открыть окно временной шкалы —
4 Шаг 4: Преобразуйте свои слои в кадры —
5 Шаг 5: дублировать кадры для создания анимации —
6 Шаг 6: Установите задержку время каждого кадра —
7 Шаг 7: Установите количество циклов анимации —
8 Шаг 8: Предварительный просмотр и повторение анимации —
9 Шаг 9: Экспорт документа Photoshop в формате GIF —
- 9.1 Обрезать размер файла
- 9.2 Уменьшить информацию о цвете
- 9.3 Конвертировать в sRGB
- 9.4 Сохранить
10 Шаг 10: Поделитесь готовым фотошопом GIF! —
- - - 10.0.0.1 Ищете профессиональную помощь в создании анимации?
      - 10.0.0.1.1 Работайте с одним из наших талантливых дизайнеров!

Шаг 1.

Установите размеры и разрешение вашего документа Photoshop
—

Настройте документ заранее. Даже если ваша единственная цель — создать совместный GIF-файл для ваших друзей в социальных сетях, если размер ваших фотографий или видео будет определять размер вашего документа, это может сделать файл больше, чем вам нужно, что приведет к низкому качеству. GIF. В общем, где-то в области 600px-800px хорошо для квадратного изображения.

Установите размеры, разрешение и цветовой режим документа Photoshop

Размеры

Для этого проекта мы работаем с баннерной рекламой GIF, которая имеет стандартные правила определения размеров. Я выбрал макет 720 × 300. Убедитесь, что ваши единицы измерения указаны в пикселях.

Разрешение

Чтобы размер файла был как можно меньше, подойдет разрешение 150. Я пошел с 300, так как я знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы измерения в пикселях на дюйм.

Цветовой режим

Наконец, для экрана создаются анимированные GIF-изображения, поэтому установите цветовой режим на цвет RGB. Нажмите Создать чтобы открыть новый документ.

Шаг 2. Импорт файлов изображений в Photoshop

— Файл> Скрипты> Загрузка файлов в стек… Выберите «Обзор», найдите изображения, выровняйте их, если нужно, и нажмите «ОК»

Создание GIF из неподвижных изображений

Перейдите в Файл> Сценарии> Загрузить файлы в стек и нажмите кнопку «Обзор» в открывшемся окне «Загрузить слои». Это открывает окно Finder / Explorer, где вы можете просматривать ваши файлы и выбирать все те, которые вам нужны. Когда вы закончите, нажмите Открыть и затем OK в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы можете выбрать все слои и перетащить их в рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, перейдите в Файл> Импорт> Видеокадры в слои .

Шаг 3: Открыть окно временной шкалы

— Окно> Временная шкала Настройка окна временной шкалы для анимации кадров

Перейдите в Окно> Временная шкала . Это откроет панель в нижней трети холста. В центре панели щелкните стрелку, чтобы открыть раскрывающееся меню, и выберите Создать анимацию кадров .

Шаг 4: Преобразуйте свои слои в кадры

— Если у вас уже есть готовые изображения, щелкните меню гамбургеров. значок на временной шкале и выберите «Создать кадры из слоев»

Ваш первый кадр уже будет настроен, состоящий из всех видимых слоев (что означает, что видимость слоя или значок глаза включен) в твой документ. Теперь все, что вам нужно сделать, это заполнить временную шкалу несколькими кадрами, чтобы имитировать движение. Есть два способа сделать это: импортировать уже подготовленные кадры или создать анимацию с нуля в Photoshop. В этом разделе будет описан первый сценарий.

Если вы уже настроили неподвижные, последовательные изображения раньше времени (или работаете с импортированными видеокадрами, см. Шаг 2), щелкните значок меню гамбургера в верхнем правом углу панели «Таймлайн». Выберите Создание рамок из слоев . Вы увидите шкалу времени, заполненную кадрами из ваших слоев.

Шаг 5: дублировать кадры для создания анимации

— Под временной шкалой находится панель инструментов, которая содержит (среди прочего) настройка цикла, кнопка предварительного просмотра и кнопка дублирования кадра

Если вы еще не настроили неподвижные изображения заранее или вам необходимо настроить части анимации, созданные в шаге 4, вы можете создавать анимацию вручную кадр за кадром (именно так я и сделал свою анимацию). Для этого продублируйте последний кадр на временной шкале (щелкните значок выделенной страницы на панели инструментов под временной шкалой), внесите необходимые изменения в изображение и повторите.

Например, моя анимация — очки, скользящие по глазам объекта. Чтобы сделать это, я продублировал кадр, переместил солнцезащитные очки на несколько пикселей вниз (сколько пикселей было методом проб и ошибок — подробнее об этом позже) и повторял этот процесс, пока у меня не было около пятнадцати кадров, а солнцезащитные очки были там, где я находился. хотел их, что привело к плавной анимации скольжения вниз.

Фото с помощью graham wizardo.

Шаг 6: Установите задержку время каждого кадра

— Настройка длительности находится в нижней части каждого кадра

Таймер задержки можно найти внизу каждого кадра (время в секундах с выпадающей стрелкой рядом с ним).

Нажмите стрелку, чтобы вызвать меню, и выберите период времени, в течение которого вы хотите, чтобы кадр отображался на экране.

Вы можете установить длительность отдельных кадров или нескольких кадров одновременно, выбрав все необходимые кадры и используя раскрывающееся меню для одного из них.

Подсказка: Многие кадры с короткими задержками — это ключ к плавной анимации, тогда как несколько кадров с длинными задержками создают прерывистый эффект остановки движения.

Шаг 7: Установите количество циклов анимации

—

Также на панели инструментов под временной шкалой находится настройка петли. Вы можете настроить анимацию на цикл навсегда, один раз или определенное количество раз.

Шаг 8: Предварительный просмотр и повторение анимации

—

Кнопка воспроизведения на панели инструментов окна временной шкалы позволяет предварительно просмотреть анимацию. Используйте это, чтобы убедиться, что ваша анимация правдоподобна и ведет себя как следует. Если это не так, попробуйте поработать с задержкой или добавить дополнительные кадры, пока не получите желаемые результаты. И наоборот, это также прекрасное время для экспериментов с удалением как можно большего количества кадров, не разрушая иллюзию движения, чтобы получить максимально возможный размер файла.

Шаг 9: Экспорт документа Photoshop в формате GIF

— Файл> Экспорт> Сохранить для Web (устаревшее)…

Прежде всего, не забудьте сохранить свой рабочий PSD!

Когда вы будете готовы экспортировать окончательный GIF-файл, перейдите в Файл> Экспорт> Сохранить для Интернета (устаревшая версия) . (Примечание: если вы работаете с более старой версией Photoshop, это, вероятно, Файл> Сохранить для Web и устройств). Это откроет окно экспорта.

Здесь много вариантов, но для наших целей нам понадобится всего несколько. Во-первых, убедитесь, что вы установили тип файла GIF в раскрывающемся списке в правом верхнем углу. Остальные параметры, которые я выделил на изображении ниже, являются необязательными, но полезны для создания облегченного файла. Давайте пройдемся по ним сейчас.

Обрезать размер файла

Ваша основная цель с остальными опциями — сохранить размер файла на низком, уменьшив количество деталей в GIF, не жертвуя качеством изображения. Помните, что большой размер файла означает медленное время загрузки, что может быть особенно наказуемым для маркетинговых целей, таких как рекламные баннеры, когда зритель не ищет ваш контент и не будет ждать его загрузки. Стремитесь остаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это толкает. Размер файла GIF можно увидеть в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

Это параметр, на который следует обратить внимание при сохранении.

Для веб-окна

Уменьшить информацию о цвете

Ненужная информация о цвете является основной причиной большого размера файла. Чтобы сократить его, настройте общее количество цветов в раскрывающемся списке с надписью «Цвета» и уменьшите параметр «Сглаживание» (смешение пикселей для создания бесшовной заливки) под ним. При внесении изменений следите за предварительным изображением вашего GIF-файла с левой стороны, чтобы увидеть, как это влияет на разрешение.

Конвертировать в sRGB

sRGB, или «Стандартный RGB», имеет более узкий диапазон цветов, чем «Adobe RGB» по умолчанию, поэтому обязательно установите этот флажок.

Сохранить

Если вы довольны разрешением и размером файла, нажмите кнопку «Сохранить» в нижней части окна. Чтобы убедиться, что все получилось хорошо, вы можете просмотреть готовый файл GIF, перетащив его в поле URL браузера.

Мой готовый баннер с рекламой GIF. Фото через Грэма Волшебника.

Шаг 10: Поделитесь готовым фотошопом GIF!

—

И вот он у вас есть — ваш готовый GIF, готовый для распространения по всей всемирной паутине. Теперь, когда у вас есть навыки для создания основных анимаций Photoshop из видео и неподвижных изображений, вы можете сделать что угодно!

Хотя этот метод полезен для быстрых, забавных GIF-файлов, GIF-файлы для профессиональных целей должны быть намного более надежными, чем моя глупая реклама солнцезащитных очков. Изучить программное обеспечение просто, но сама анимация — сложная форма искусства, требующая практики и опыта. Когда вы будете готовы начать игру в формате GIF, убедитесь, что вы работаете с профессионалом.

Ищете профессиональную помощь в создании анимации?

Работайте с одним из наших талантливых дизайнеров!

Эта статья была первоначально написана Ребеккой Крегер и опубликована в 2013 году. Она была обновлена новой информацией и примерами.

Как создать GIF в Photoshop и экспортировать его для совместного использования

Если вы хотите создать собственную анимацию, вы можете создать GIF в Photoshop, выполнив следующие действия.
Возможность создавать и настраивать свои собственные GIF-файлы может показаться возвышенным, но в Photoshop это достижимая цель. Вам просто нужна партия изображений, чтобы начать.
Посетите домашнюю страницу Business Insider, чтобы узнать больше.

Когда слов недостаточно, GIF-файлы — идеальный способ передать сильные эмоции, такие как возмущение, шок или радость.

Но вы когда-нибудь чувствовали себя ограниченными из-за имеющегося выбора? Возможно, у вас есть серия фотографий, которые эффектно смотрелись бы в формате GIF, если бы вы только знали, как их сделать. Или, возможно, вы хотите улучшить контент, который вы публикуете в социальных сетях, с помощью гладкой, художественно выглядящей анимации.

Хотя создание GIF может показаться трудным делом, если вы выполните следующие шаги в Adobe Photoshop CC 2020, вы будете на пути к созданию пользовательских GIF за считанные минуты.

Ознакомьтесь с продуктами, упомянутыми в этой статье:

Adobe Photoshop (от 239,88 долларов в Adobe)

MacBook Pro (от 1299,99 долларов в Best Buy)

Lenovo IdeaPad 130 (от 299,99 долларов в Best Buy)

Как сделать GIF в Photoshop

Вам просто понадобится пакет изображений, чтобы начать. Использование штатива отлично подходит, если вы хотите создать анимацию в стиле покадровой анимации, или вы можете использовать кадры из видео для захвата движения.

Когда ваши изображения будут готовы, возьмите свой ПК или компьютер Mac и откройте Adobe Photoshop CC 2020.

1. Перейдите в «Окно», вкладку на главной панели задач и выберите «Временная шкала». При выборе слева появится галочка.

2. Затем нажмите «Файл» на той же верхней панели задач и прокрутите вниз до «Сценарии».

3. Выберите «Загрузить файлы в стопку…»

4. В появившемся новом окне под названием «Загрузить слои» нажмите «Обзор…»

Не беспокойтесь о порядке загрузки файлов. Вы можете изменить его позже. Эмма Уитман/Business Insider

5. Выберите изображения — опять же, их должно быть несколько — которые вы хотите использовать для создания анимированного GIF. Удерживайте клавишу «Shift», чтобы выбрать несколько изображений. Затем нажмите «Открыть».

6. Если у вас не было под рукой штатива при создании снимков в формате GIF, нажмите «Попытаться автоматически выровнять исходные изображения» перед выходом из «Загрузить слои», нажав «ОК».

7. Photoshop начнет процесс создания слоя для каждого загруженного вами изображения. Вы можете найти их на панели «Слои» в правом нижнем углу.

Убедитесь, что вы выбрали «Временная шкала» в разделе «Окно» на первом этапе, иначе вы не сможете получить доступ к необходимой панели. Эмма Уитман/Business Insider

8. Следующим шагом будет добавление вновь созданных слоев на панель «Временная шкала» внизу. Начните с нажатия «Создать покадровую анимацию», расположенного в центре панели «Таймлайн». Один из ваших кадров появится внутри панели.

9. Далее вы развернете так называемое всплывающее меню панели «Таймлайн». Меню представляет собой четыре горизонтальные линии, и вы найдете его в правом верхнем углу панели. Откройте меню и выберите «Создать кадры из слоев». Все загруженные вами слои теперь появятся на панели «Таймлайн».

Вам нужно всего лишь одно изображение — неважно, какое — должно появиться на временной шкале, чтобы создать кадры для всех слоев. Эмма Уитман/Business Insider

10. Убедитесь, что кадры — ранее называемые «слоями» — расположены в том порядке, в котором вы хотите, чтобы они располагались при воспроизведении GIF. Просто перетащите значки в нужном вам порядке.

11. Когда вас устраивает порядок кадров, выберите все кадры, удерживая клавишу Shift и нажимая первый и последний кадры.

12. Теперь, когда все кадры выделены, перейдите к любому кадру и нажмите на символ v-образной формы внизу. Вы увидите «0 сек.» слева от него. Выберите 0,1 секунды в меню. Если вам нужна более длительная пауза в каждом кадре вашего GIF-файла во время его воспроизведения, выберите значение больше 0,1 секунды.

Я предпочитаю GIF с коротким временем задержки между кадрами, поэтому выбрал 0,1 секунды, самое быстрое из возможных. Эмма Уитман/Business Insider

13. Вы можете установить зацикливание GIF на «Навсегда» или ограничить воспроизведение анимации определенным количеством раз. Вы увидите эти параметры чуть ниже фреймов на нижней панели инструментов.

14. Теперь ваш GIF готов к предварительному просмотру. Слова «Воспроизведение анимации» появятся, когда вы наведете курсор на кнопку воспроизведения на нижней панели инструментов.

15. Как только вы будете довольны тем, как выглядит ваш GIF, сохраните его. Нажмите «Файл» в верхней строке меню, «Экспорт» во всплывающем меню, а затем «Сохранить для Интернета (предыдущая версия)».

16. При необходимости измените размер, затем нажмите «Сохранить…» и назовите свой GIF. Нажмите «Сохранить» еще раз.

Хотя они довольно эффективны, GIF-файлы после создания занимают значительно больше места не только потому, что они представляют собой несколько изображений, но и потому, что рендеринг анимации добавляет кучу данных.

Эмма Уитман/Business Insider

Возможно, вам придется изменить размер вашего GIF-файла — максимум 500 пикселей по высоте и ширине — это хороший приблизительный диапазон — чтобы сделать его совместимым на разных платформах.

Слишком большой GIF будет обречен оставаться на жестком диске вашего компьютера, а не в ваших текстах и в социальных сетях, где и должны быть GIF.

Короткая анимация. Часто причудливый вид домашних растений подтолкнул меня к идее поместить их в анимированный формат GIF. Эмма Уитман/Business Insider

Как добавить текст поверх изображения в Photoshop и настроить шрифт или цвет
Как автоматически повысить резкость изображения в Photoshop, чтобы уменьшить размытость изображения
Как изменить размер слоя в Photoshop в 4 простых шага
Как удалить фон изображения в Photoshop двумя разными способами

Эмма Уитман

Эмма Уитман — внештатный журналист из Эшвилла, Северная Каролина, с большим интересом пишет об оборудовании, компьютерных играх, политике и личных финансах. Она бывший криминальный репортер ежедневной газеты, а также много писала о барменстве для Insider. Она может или не может судить о вашем заказе напитков, когда вы находитесь за барной стойкой. Следуйте за ней в Твиттере на @emwity.

ПодробнееПодробнее

Insider Inc. получает комиссию, когда вы покупаете по нашим ссылкам.

Как сделать анимированный GIF для вашей следующей маркетинговой кампании по электронной почте с помощью Photoshop Мы прекрасно проводим время, работая с ключевым клиентом Closet52, интернет-магазином одежды, который мы разработали и построили с нуля для авторитетной и известной модной компании в Нью-Йорке. Их руководство всегда работает с нами над совместными идеями для следующей кампании или стратегии, которую мы реализуем. В рамках их реализации мы развернули Klaviyo для Shopify Plus. Klaviyo — известная платформа автоматизации маркетинга с очень тесной интеграцией с Shopify, а также со многими приложениями Shopify.

Как сделать анимационные видео для вас…

Пожалуйста, включите JavaScript

Как сделать анимационные видео для YouTube | Создать Студию Скидка

Моя любимая фишка — их A/B-тестирование в Klaviyo. Вы можете разработать разные версии электронного письма, и Klaviyo отправит образец, дождется ответа, а затем отправит оставшимся подписчикам выигрышную версию — все автоматически.

Наш клиент подписывается на рассылку о моде в отрасли и продолжает отмечать, насколько ему понравились некоторые электронные письма со слайд-шоу из фотографий продуктов. Они спросили, можем ли мы это сделать, и я согласился и построил кампанию с A/B-тестом, где мы отправили одну версию с анимацией 4 продуктов, а другую с одним красивым статическим изображением. Кампания направлена на распродажу их осенних платьев, поскольку они представляют новые линейки продуктов.

Версия A: Анимированный GIF

Версия B: Статическое изображение

Авторство фотографии принадлежит талантливым людям из Zeelum.

Выборка кампании все еще выполняется прямо сейчас, но совершенно ясно, что электронное письмо с анимированной графикой намного превосходит статическое изображение… примерно на 7% открываемости … но поразительно в 3 раза выше рейтинга кликов (CTR)! Я думаю, что тот факт, что анимированный GIF показывал подписчику несколько разных стилей, привел к гораздо большему количеству посетителей.

Я не профессионал в Photoshop. Фактически, единственный раз, когда я обычно использую Photoshop от Adobe Creative Cloud, — это удаление фона и наложение изображений, например размещение снимка экрана поверх ноутбука или мобильного устройства. Тем не менее, я немного покопался в Интернете и понял, как сделать анимацию. Пользовательский интерфейс для этого не самый простой, но в течение 20 минут и после прочтения некоторых руководств я смог его освоить.

Подготовка исходных изображений:

Размеры — Анимированные GIF-файлы могут быть довольно большими, поэтому я позаботился о том, чтобы размеры моего файла Photoshop точно соответствовали ширине нашего шаблона электронной почты шириной 600 пикселей.
Сжатие . Наши исходные изображения имели высокое разрешение и очень большой размер файла, поэтому я изменил их размер и сжал их с помощью Kraken в JPG с гораздо меньшим размером файла.
Переходы — Хотя у вас может возникнуть соблазн добавить анимацию твинов (например, затухающий переход) между кадрами, это увеличивает размер вашего файла, поэтому я бы не стал этого делать.

Чтобы создать анимацию в Photoshop:

Создайте новый файл с размерами, которые точно соответствуют размерам, указанным в шаблоне электронной почты.
Выберите Окно > Временная шкала , чтобы включить представление временной шкалы в базе Photoshop.

Добавляйте каждое изображение как новый слой в Photoshop.

Щелкните Create Frame Animation в области временной шкалы.
В правой части временной шкалы выберите меню гамбургера и выберите Создать кадры из слоев .

В области временной шкалы вы можете перетаскивать кадры в порядке , в котором вы хотите, чтобы изображения отображались. нравится этот кадр для отображения. Я выбрал 2,0 секунды на кадр .
В раскрывающемся списке под кадрами выберите Forever , чтобы анимация повторялась непрерывно.
Нажмите кнопку воспроизведения для предварительного просмотра анимации.
Щелкните Файл > Экспорт > Сохранить для Интернета (предыдущая версия) .

Выберите GIF из вариантов в верхнем левом углу экрана экспорта.
Если ваши изображения непрозрачны, снимите флажок Transparency .
Нажмите Сохранить и экспортируйте файл.

Вот и все! Теперь у вас есть анимированный GIF-файл, который вы можете загрузить на свою платформу электронной почты.