Как быстро конвертировать HTML5 в GIF

Дима Зубков

10 538

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

Рассмотрим наиболее важное применение покадровой GIF анимации. Например, вы хотите оформить свое портфолио на behance.net или на главной фриланс площадке в рунете fl.ru. К сожалению показать HTML5 анимацию внутри страницы вашего портфолио на этих сервисах не получится, за то мы можем выкладывать покадровый GIF.

Чтобы растровая анимация была максимально качественной, мы будем использовать программу Honeycam. Обратите внимание, что free версия имеет ограничение записи в 10 секунд. Если вы не хотите платить деньги за полную версию, то это легко обойти применяя свежую версию Adobe Photoshop.

Задача: конвертировать готовый HTML5 баннер в GIF и разместить его в портфолио на сайте https://www.fl.ru/users/Obelix2000/

Для работы нам понадобится

• Готовый HTML5 баннер;
• Программа Honeycam.

Этапы конвертации

Открываем программу Honeycam, нажимаем на кнопку «Запись».

Устанавливаем размер записи экрана. Значение FPS рекомендуем ставить 20-25, это не сильно испортит плавность анимации, но хорошо сократит вес баннера. Внимание! Мы в студии используем платную версию программы и вам рекомендуем ее купить. Но если вы используете бесплатный функционал, то сверху появится водяной знак. В таком случае,  размер записываемой области вы устанавливаете больше, для того чтобы в дальнейшем обрезать водяной знак в фотошопе.

Нажимаем на кнопку «Запись» и ждем чтобы анимация на баннеры проиграла от начала и до конца. Внимание! Если баннер больше 10 секунд, а у вас бесплатная версия, записывайте анимацию частями, в дальнейшем вы склеите ее в фотошопе.

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

Если у вас есть водяной знак, подрезаем баннер до нужного нам размера (см. пункт 2).

Сохраняем баннер при помощи сочетания клавиш shift+ctrl+alt+s или файл/сохранить для web. Выбираем формат GIF, 256 цветов (можно меньше, зависит от требуемого качества конечной гиф анимации). Делаем цикличное воспроизведение.

Наслаждаемся результатом.

Полезно знать

• Основным минусом GIF анимации является его вес. Считается нормальным, если сохраненный вами файл будет весить не более 3мб, но чем меньше тем лучше;
• Для того, чтобы экспериментировать с качеством картинки и её весом, используйте параметры фотошопа во вкладке «файл/сохранить для web». А также, пользуйтесь функционалом программа Honeycam.

И напоследок совет. Делайте качественное портфолио, для того, чтобы работать с самыми лучшими клиентами.