Как быстро создать анимированный баннер

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

В этой статье я покажу вариант, которым давно и успешно пользуюсь. Для большей наглядности я использую скриншоты моего фильма по созданию анимированного баннера, размещенного в Ютубе. Сочетание статьи и видеоролика позволят более полно разобраться в этой методике.

 

 

В данной методике я использую алгоритм, работая с тремя программами: PowerPoint, Fast Stone Capture и gifovina.

 

 

Компоновка и создание отдельных слайдов я выполняю в  PowerPoint.  В нем удобно создавать нужные рисунки и просто работать с их уровнями. Хотя это на любителя. У каждого может быть свой стиль и свои инструменты. Часто можно встретить методики работы со слоями в PotoShop, но в  PowerPoint проще.

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

Дальше выбирается рисунок с прозрачным фоном (png) и формируются текстовые блоки. В нашем случае два текстовых блока, которые в баннере будут появляться последовательно.

 

 

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

Скачать его можно по ссылке:  FastStone Capture

https://www.dvdvideosoft.com/ru/products/dvd/Free-Screen-Video-Recorder.htm

 

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

 

 

Полученные файлы сохраняем на компьютере в отдельной папке.

 

 

Для окончательной  компоновки и создания  анимации  я использую простую и удобную программу  Gifovina. С ней можно работать перейдя по ссылке   http://gifovina.ru

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

 

 

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

 

 

Следующий шаг - расположение последовательности слайдов для анимации и времени их демонстрации. Нажимая на окно под слайдом устанавливаем время демонстрации. Есть возможность установить одинаковое время или для каждого слайда свое.

 

 

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

 

 

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

 

 

Для сохранения баннера нажимаем на «Скачать» и сохраняем файл в нужном месте на компьютере.

 

 

При нажатии на кнопку «Поделиться» появляются «ссылка» и «код».  Копируем их и сохраняем в блокноте или в любом другом текстовом редакторе для дальнейшего использования. Для выхода на соцсеть есть кнопка «Загрузить В Контакте».

 

 

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

Для четкого определения последовательности действий при создании анимированного баннера можно использовать  чек-лист.

 

 

А теперь посмотрите ролик, в котором показаны все описанные выше действия.

https://www.youtube.com/watch?v=XDOgu83MR8s

Попробуйте такую методику создания анимированого баннера.

Буду благодарен за отзывы на эту статью.

 

Понравилась статья? Поделись!

Нет комментариев

Добавить комментарий

Отправить комментарий Отменить

Сообщение