Как сделать анимированный баннер с нуля с использованием онлайн-сервисов

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

Баннер - это рекламное графическое изображение. Бывают статические (название говорит само за себя) или анимационные (где изображения двигаются или меняются) баннеры. Применяются на сайтах для различной рекламы. Бывают разных размеров и форм (горизонтальные и вертикальные).

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

Преимущества этого способа: не надо ничего устанавливать на свой компьютер. Достаточно иметь доступ в интернет. И всё!

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

Пошаговая инструкция создания подобного баннера:

Шаг 1. Заходим в сервис canva.com

В сервисе много шаблонов, которые можно использовать, но нас интересует определённый размер, поэтому идём по стрелочке:

и вводим в указанные поля свои размеры

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

нажимаем кнопку "Создать дизайн".

Шаг 2. Попадаем в редактор, где мы и будем создавать содержимое баннера

Шаг 3. Выбираем фон баннера

Все элементы в сервисе Canva делятся на платные и бесплатные. Мы будем использовать бесплатные. Идём во вкладку "Фон" и выбираем (для примера) зелёный фон (как трава на футбольном поле). Можно просто дважды кликнуть на понравившемся фоне, а можно перетащить его на рабочее поле.

Шаг 4. Загружаем изображение

Идём во вкладку "Загрузки"

и нажимаем кнопку "Загрузить изображение"

в открывшемся стандартном диалоговом окне ищем нужный нам файл и дважды кликаем на него. Он попадёт в загрузки.

Перетаскиваем его в рабочую область

Шаг 5. Вставляем текст

Во вкладке "Текст" нажимаем кнопку "Добавить текстовое поле".

появляется надпись "Замещающий текст", который мы и заменим на нужный нам.

меняем текст (просто вбиваем свой) и с помощью ползунков сдвигаем его к левому краю

уменьшаем размер шрифта

и изменяем цвет шрифта на красный

Шаг 6. Сохраняем кадр будущего баннера

Кликаем на стрелочку вниз, выбираем формат файла jpg и кликаем на кнопку "Скачать"

в стандартном диалоговом окне называем файл, как нам хочется (в данном случае "champ1.jpg"), и сохраняем его

Шаг 7

Повторяем шаги 5 и 6 для трёх оставшихся текстов, чтобы в результате получился текст "Чемпионат Мира по футболу 2018" и, соответственно, мы сохранили файлы с именами Champ2.jpg, Champ3.jpg и Champ4.jpg.

На этом работа с сервисом canva.com закончена.

Шаг 8. Делаем анимированный gif-файл в сервисе gifovina.ru

Нажимаем кнопку "Добавить кадры":

в появившемся диалоговом окне выбираем наши ранее сохранённые 4 файла и кликаем на кнопку "Открыть".

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

Сейчас все нужные кадры находятся на панели редактирования и нам осталось только установить дополнительные параметры. Для этого по стрелочке 1 жмём кнопку "Размер", выбираем пункт "Настроить" и вводим размеры 468 по ширине и 60 по высоте. Затем по стрелочке 2 устанавливаем длительность кадров = 0,5. По стрелочке 3 выбираем эффект "Горизонтальные жалюзи" и длительность эффекта = 0,5.

Нажимаем кнопку "Готово"

и наслаждаемся собственноручно созданной анимацией!

Шаг 9. Сохраняем результат в файл

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

Выводы

  1. До начала работы с этой не сильно длинной инструкцией мы не имели ничего! Кроме, возможно, смутной идеи о том, как должен выглядеть наш будущий баннер
  2. После окончания работы мы получили:
    • сам анимированный баннер одного из стандартных размеров, который не стыдно показать кому бы то ни было
    • мы узнали о существовании двух полезных онлайн-сервисов
    • мы поняли принцип работы со связкой этих сервисов
    • мы можем повторить шаги, чтобы создать что-то своё и реализовать свои творческие способности

Успехов вам в творчестве и реализации идей!

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

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

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

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

Сообщение