Анимация на сайте и в рассылках

Если вы заметили, в последнее время все чаще стали применять на сайтах и в почтовых рассылках анимационные элементы в формате GIF - совмещенные фрагментов фильмов и статичные элементы, воспроизводящиеся в непрерывной последовательности, что получается вполне симпатично и привлекательно. К тому же, в эпоху широкого распростанения iPhone и iPad, которые, как известно, не воспроизводят Flesh, анимация в формате GIF легко воспроизводится на этих устройства. В основном, этот прием применяют в своих рассылках сайты, которые предоставляют видеоконтент.

Как же сделать такой, например, рекламный баннер, чтобы на нем были и элементы видео и статичные, и чтобы все это быстро, и чтобы воспроизводилось на всех устройствах... Пожеланий много, а решение достаточно простое - нужна программа Photoshop. Эта, всем известная программа, позволяет внедрять видеоролики, разбивая их покадрово, что нам и нужно.

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

Используя пункт меню "ФАЙЛ -> Импортировать -> Кадры видео в слои", импортируем фрагмент видеоролика. Обратите внимание, что нам нужен небольшой фрагмент, из которого мы выберем подходящий кусок видео, продолжительностью буквально несколько секунд, а иначе выходной файл получится большого размера. Если помните - односекундный видеоролик содержит 24 кадра. 

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

Далее, поверх анимации располагаем слои со статичными элементами. В моем примере это текст и фигура Харрисона Форда. Если вы хотите прорекламировать свой фильм, то используйте его яркий видеофрагмент и фигуру главного персонажа. Это вовсе может быть и не художественный фильм, а реклама, например, пылесоса. Тогда в ролике покажите его работу, а на переднем плане сам пылесос и рекламный текст.

Когда выбран отрезок видео, удалены лишние кадры и размещены все статичные элементы, сохраните свое творение в формате GIF, выбрав пункт меню ФАЙЛ -> Сохранить для Web. Наш рекламный баннер готов. Анимация придаст ему привлекательность и повысит кликабельность.

Вот, что получилось:

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