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

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

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

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

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

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

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

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

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

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

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

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

Вас может заинтересовать:

Как правильно подобрать изображение для вебсайта
Как правильно подобрать изображение для вебсайта
Несколько сооветов, которые помогут вам правильно подобрать графическое изображение, для размещения на сайте...

Графика в HTML 4.01 и HTML 5: сравнительный анализ
Графика в HTML 4.01 и HTML 5: сравнительный анализ
Какие новые возможности предоставляет веб дизайнерам HTML5?

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

Красный цвет в дизайне сайтов
Красный цвет в дизайне сайтов
Вы неравнодушны к красному цвету? Тогда эта статья для вас. Смотрите и комментируйте.

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

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.