Приветствую! Недавно в одной из своих статей для блога Вордпресс создал гиф баннер и разместил его в самом конце текста, чтобы он не отвлекал от основного контента. Выглядит это дело довольно интересно. Еще интересней оказалось само создание гиф баннера. Создавал его в онлайн сервисе — Канве.
Здесь размещу этот баннер, чтобы можно было его посмотреть визуально
Баннер, который получится в процессе написания инструкции сможете увидеть в завершении.
В Канве можно задавать любые размеры, нужные вам. Сегодня я покажу создание gif (гиф) баннера онлайн, для блога Вордпресс с размерами для своего сайдбара 300 на 500 пикселей. Делать его буду в том же сервисе — Канва. Зайти в него можно здесь>>>
Ниже будет расположена инструкция со скриншотами, а здесь вы можете посмотреть видео:
Инструкция — Создание gif (гиф) баннера онлайн
В Канве необходима регистрация. Можно зарегаться через различные сервисы, или же через свой емейл.
В правом верхнем углу жму “Создать дизайн” и в предложенных вариантах выбираю “Настраиваемый размер”
Задаю нужные мне размеры — ширину 300 пикс., высоту 500 пикселей и нажимаю “Создать дизайн”
Открылась страничка с заготовкой для картинки. Слева в колонке по умолчанию сразу открывается доступ к шаблонам под заданный размер. Сегодня без шаблонов обойдусь ) Хочу фон сделать гардиент — два или более цвета. В левой панели выбираю “Элементы”
В поисковой строке пишу — “Квадратный гардиент” и нажимаю “Еnter” не клавиатуре
Появляются разные варианты, выбираю самый первый и просто жму на него, он переносится на мою заготовку
Дальше мне нужно развернуть этот квадрат и растянуть его за уголки, чтобы заполнить всю область пустого холста
Корректирую цвета гардиента. Сверху жму на два квадратика и поочередно в каждом меняю цвета до тех пор, как меня это устроит
Теперь добавляю текст из левой панели. Жму на иконку “Текст” и кликаю на “Добавить заголовок”
Подбираю шрифт bumblebee — в верхней панели жму в специальное окошко и в поиске ввожу первые две буквы “bu” и происходит автопоиск. Выдает несколько вариантов. Нахожу нужный и кликаю
Далее пишу название рекламируемого продукта — это будет“Легальная подработка вконтакте” Дмитрия Гида и меняю цвет шрифта
Делаю шрифт заглавными буквами. Для этого сверху жму на три точки (скрытые функции) и кликаю на прописные буквы “аА”
Захожу в левой панельке в раздел “Элементы”, нахожу круг и кликом добавляю его на свой холст, затем растягиваю до овала
Добавляю текст в овал, пишу нужное предложение, меняю шрифт и цвет текста
Далее добавляю женщину с книгой и поднятой рукой вверх. Кликаю в левой панеле в раздел “Элементы”, пишу в поиске “женщина с книгой”, пролистываю колесиком мыши вниз и нахожу нужный персонаж, добавляю кликом мышки
Левой кнопкой мышки зажимаю объект с женщиной и тяну его вниз, влево. Растягиваю за уголки до нужных размеров и меняю цвета
Сделаю овал, в форме диалога, как-будто она говорит. Для этого возвращаюсь в “Элементы” и нахожу треугольник, затем его переворачиваю и растягиваю до нужных размеров
И меняю цвет уголка под овал, делаю синим
Добавляю анимацию в текст овала. Сперва кликаю в пустом месте, чтобы снять все выделения и в верхнем меню выбираю “Анимация”, слева открывается панель с вариантами аниме
Выделяю запись в овале кликом мыши и подбираю анимацию для этого текста — “Простые надписи” — “Печать”
Теперь дублирую созданную страницу. Над холстом есть маленькая кнопочка, при наведении курсора появляется надпись “Копировать страницу”
Появилась страница № 2. В ней изменю только текст в овале, анимацию сделаю ту же, что и в предыдущем варианте, после продублирую холст еще раз
Меняю текст в овале и оставлю ту же анимацию, дублирую еще раз холст
В странице под номером 4 опускаю овал с треугольником вниз, они располагаются на холсте за картинкой женщины. Мне нужно сделать овал спереди, выделяю его и в панели сверху жму “Расположение” и “Вперед”
Переношу в овал текст и меняю его на призыв
Теперь мне нужна кнопка, да не простая, а классная, распрекрасная, хотя цвет ей задам желтый. Кнопки тоже есть в Канве просто замечательные. Захожу в элементы и пользуясь поиском набираю “Кнопки”.
Один из первых вариантов меня устраивает. Синяя правда, но я кликаю по ней, чтобы добавить на холст и убедиться, что можно менять цвета. Да, так и есть — можно цветами поработать
Для начала растяну ее за ползунки по углам до размеров верхнего текста, теперь меняю цвета на желтые
Добавлю текст на кнопку и все буквы делаю прописные
Щелкаю левой кнопкой мышки в пустом месте, снимаю выделения и жму “Анимация”, сделаю анимацию для кнопки и надписи в ней.
Сперва выделяю надпись и нахожу раздел “Масштабирование”, в нем эффект “Пульс”
Выделяю кнопку и также жму в анимациях “Пульс”
Хочу еще указатель анимированный для гиф баннера, чтобы явно показывал, куда жать.
Захожу в “элементы” в левой панели и в поисковой строке пишу: нажать пальцем, жму Enter. Долго листал вниз, подбирая подходящий и кое-что нашел, нажал на него для перемещения на холст
Выделяю его на холсте ЛКМ и в верхней панели жму кнопку “Перевернуть” и “Отражение по горизонтали”. Делаю меньше потянув за уголки и пристраиваю к изображению женщины так, будто она кликает на кнопку.
Здесь не видно, но палец этот сам по себе анимационный и он создает эффект клика по кнопке. В завершении инструкции выложу сам баннер, для образца, там и будет видно что к чему.
Просмотреть что получилось, можно при нажатии на кнопку вверху
После просмотра и некоторых корректировок при необходимости жму “Скачать”, в правом верхнем углу. По умолчанию предлагается видео мп 4, жму на “Тип файла” для выбора gif.
Пролистываю вниз и выбираю его
Жму “Скачать”
Все — готово! Мой файл скачался! По умолчанию в папку “Загрузки” моего компа.
И вот что у меня получилось:
Если затрудняетесь с добавлением баннера на блог в новом блочном редакторе виджетов, то читайте инструкцию здесь>>>
Вот такое увлекательное занятие показал сегодня — создание gif (гиф) баннера онлайн. Такие гифки в Канве можно делать не только для блога Вордпресс, но и для социальных сетей, как для рекламы, так и для развлекательных целей — например, поздравлений.
Думаю, на таком навыке также можно и зарабатывать, к примеру на биржах фриланса. Если у вас есть опыт заработка на создании гиф анимаций, поделитесь в комментариях своим опытом.
Благодарю за внимание!
И успехов Вам!
С уважением, Александр Егоров
Спасибо, Александр! Действительно, очень занимательное занятие. Подробно все расписано )
Привет, Андрей! Рад, что понравилось! Надеюсь не возникло никаких сложностей?
Спасибо, очень интересно и подробно получилось. А я на кворк баннеры заказывал, теперь буду здесь делать).
Александр, благодарю, что оценили) Да, можно ведь и самому делать, тем более, что это несложно, да и времени не отнимает много.
Александр, очень увлекательное занятие- создание гиф-баннера. Обязательно попробую. Вы дали подробную инструкцию и думаю, что следуя ей, смогу создать свой шедевр
Надежда, рад, что вам понравилось. Благодарю, что оценили! Уверен, что у вас получиться )
А я вообще не знала,что в Канве можно гиф-ки делать😳Супер! Пойду теперь пробовать!
Пробуй, Юля! Потом напишешь получилось ли у тебя )