Создание gif (гиф) баннера онлайн в Канве, для блога Вордпресс

Приветствую! Недавно в одной из своих статей для блога Вордпресс создал гиф баннер и разместил его в самом конце текста, чтобы он не отвлекал от основного контента. Выглядит это дело довольно интересно. Еще интересней оказалось само создание гиф баннера. Создавал его в онлайн сервисе — Канве.

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

Баннер, который получится в процессе написания инструкции сможете увидеть в завершении.

В Канве можно задавать любые размеры, нужные вам. Сегодня я покажу создание gif (гиф) баннера онлайн, для блога Вордпресс с размерами для своего сайдбара 300 на 500 пикселей. Делать его буду в том же сервисе — Канва. Зайти в него можно здесь>>>

Ниже будет расположена инструкция со скриншотами, а здесь вы можете посмотреть видео:

Инструкция — Создание gif (гиф) баннера онлайн

В Канве необходима регистрация. Можно зарегаться через различные сервисы, или же через свой емейл. 

В правом верхнем углу жму “Создать дизайн” и в предложенных вариантах выбираю “Настраиваемый размер”

Задаю нужные мне размеры — ширину 300 пикс., высоту 500 пикселей и нажимаю “Создать дизайн”

Открылась страничка с заготовкой для картинки. Слева в колонке по умолчанию сразу открывается доступ к шаблонам под заданный размер. Сегодня без шаблонов обойдусь ) Хочу фон сделать гардиент — два или более цвета. В левой панели выбираю “Элементы”

В поисковой строке пишу — “Квадратный гардиент” и нажимаю “Еnter” не клавиатуре

Появляются разные варианты, выбираю самый первый и просто жму на него, он переносится на мою заготовку

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

Корректирую цвета гардиента. Сверху жму на два квадратика и поочередно в каждом меняю цвета до тех пор, как меня это устроит

Теперь добавляю текст из левой панели. Жму на иконку “Текст” и кликаю на “Добавить заголовок”

Подбираю шрифт bumblebee — в верхней панели жму в специальное окошко и в поиске ввожу первые две буквы “bu” и происходит автопоиск. Выдает несколько вариантов. Нахожу нужный и кликаю

Далее пишу название рекламируемого продукта — это будет“Легальная подработка вконтакте” Дмитрия Гида и меняю цвет шрифта

Делаю шрифт заглавными буквами. Для этого сверху жму на три точки (скрытые функции) и кликаю на прописные буквы “аА”

Захожу в левой панельке в раздел “Элементы”, нахожу круг и кликом добавляю его на свой холст, затем растягиваю до овала

Добавляю текст в овал, пишу нужное предложение, меняю шрифт и цвет текста

Далее добавляю женщину с книгой и поднятой рукой вверх. Кликаю в левой панеле в раздел “Элементы”, пишу в поиске “женщина с книгой”, пролистываю колесиком мыши вниз и нахожу нужный персонаж, добавляю кликом мышки

Левой кнопкой мышки зажимаю объект с женщиной и тяну его вниз, влево. Растягиваю за уголки до нужных размеров и меняю цвета

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

И меняю цвет уголка под овал, делаю синим

Добавляю анимацию в текст овала. Сперва кликаю в пустом месте, чтобы снять все выделения и в верхнем меню выбираю “Анимация”, слева открывается панель с вариантами аниме

Выделяю запись в овале кликом мыши и подбираю анимацию для этого текста — “Простые надписи” — “Печать”

Теперь дублирую созданную страницу. Над холстом есть маленькая кнопочка, при наведении курсора появляется надпись “Копировать страницу”

Появилась страница № 2. В ней изменю только текст в овале, анимацию сделаю ту же, что и в предыдущем варианте, после продублирую холст еще раз

Меняю текст в овале и оставлю ту же анимацию, дублирую еще раз холст

В странице под номером 4 опускаю овал с треугольником вниз, они располагаются на холсте за картинкой женщины. Мне нужно сделать овал спереди, выделяю его и в панели сверху жму “Расположение” и “Вперед”

Переношу в овал текст и меняю его на призыв

Теперь мне нужна кнопка, да не простая, а классная, распрекрасная, хотя цвет ей задам желтый. Кнопки тоже есть в Канве просто замечательные. Захожу в элементы и пользуясь поиском набираю “Кнопки”. 

Один из первых вариантов меня устраивает. Синяя правда, но я кликаю по ней, чтобы добавить на холст и убедиться, что можно менять цвета. Да, так и есть — можно цветами поработать

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

Добавлю текст на кнопку и все буквы делаю прописные

Щелкаю левой кнопкой мышки в пустом месте, снимаю выделения и жму “Анимация”, сделаю анимацию для кнопки и надписи в ней. 

Сперва выделяю надпись и нахожу раздел “Масштабирование”, в нем эффект “Пульс”

Выделяю кнопку и также жму в анимациях “Пульс”

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

Захожу в “элементы” в левой панели и в поисковой строке пишу: нажать пальцем, жму Enter. Долго листал вниз, подбирая подходящий и кое-что нашел, нажал на него для перемещения на холст

Выделяю его на холсте ЛКМ и в верхней панели жму кнопку “Перевернуть” и “Отражение по горизонтали”. Делаю меньше потянув за уголки и пристраиваю к изображению женщины так, будто она кликает на кнопку. 

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

Просмотреть что получилось, можно при нажатии на кнопку вверху

После просмотра и некоторых корректировок при необходимости жму “Скачать”, в правом верхнем углу. По умолчанию предлагается видео мп 4, жму на “Тип файла” для выбора gif. 

Пролистываю вниз и выбираю его

Жму “Скачать”

Все — готово! Мой файл скачался! По умолчанию в папку “Загрузки” моего компа.

И вот что у меня получилось:

Если затрудняетесь с добавлением баннера на блог в новом блочном редакторе виджетов, то читайте инструкцию здесь>>>

Вот такое увлекательное занятие показал сегодня — создание gif (гиф) баннера онлайн. Такие гифки в Канве можно делать не только для блога Вордпресс, но и для социальных сетей, как для рекламы, так и для развлекательных целей — например, поздравлений.

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

Благодарю за внимание!

И успехов Вам!

С уважением, Александр Егоров