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

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

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

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

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

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

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

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

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

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

создать гиф баннер онлайн бесплатно

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

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

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

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

создать гиф баннер онлайн бесплатно

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

создать гиф баннер онлайн бесплатно

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

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

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

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

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

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

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

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

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

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

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

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

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

Жму “Скачать

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

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

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

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

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

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

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

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

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

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

  1. Спасибо, Александр! Действительно, очень занимательное занятие. Подробно все расписано )

    1. Привет, Андрей! Рад, что понравилось! Надеюсь не возникло никаких сложностей?

    1. Александр, благодарю, что оценили) Да, можно ведь и самому делать, тем более, что это несложно, да и времени не отнимает много.

  2. Александр, очень увлекательное занятие- создание гиф-баннера. Обязательно попробую. Вы дали подробную инструкцию и думаю, что следуя ей, смогу создать свой шедевр

    1. Надежда, рад, что вам понравилось. Благодарю, что оценили! Уверен, что у вас получиться )

  3. А я вообще не знала,что в Канве можно гиф-ки делать😳Супер! Пойду теперь пробовать!

Добавить комментарий для Юлия Зорина Отменить ответ

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.