четверг, 2 июля 2020 г.

Реклама - двигатель не только торговли: Как смастерить баннер

Стоит открыть какой-нибудь сайт, как тут же на нас обрушивается лавина рекламных баннеров с заманчивыми предложениями "купить слона". Рекламируется всё и вся!

Но рекламировать можно не только элитную косметику. Можно (и даже нужно!) рекламировать хорошие книги, школы и библиотеки, мероприятия, выставки, творческие работы и многое-многое другое.

Поэтому предлагаю сегодня попрактиковаться в создании рекламных баннеров.

Такой вариант получился у меня - небольшая виртуальная выставка "10 лучших летних книг". К сожалению, просмотр таких объектов блокируется сервисами вроде AddBlock (блокировщик рекламы). Поэтому временно придётся его отключить.



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


Регистрация


Для начала открываем главную страницу сервиса. И сразу приятная неожиданность: у сайта есть русификация! Из выпадающего списка языков выбираем русский (RU) и смело нажимаем "Зарегистрироваться".


Заполняем стандартную форму регистрации: имя, электронная почта, пароль (не менее 8 символов). Чтобы упростить процедуру, можно воспользоваться аккаунтами Facebook и Google.


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


После авторизации сервис предлагает создать один баннер или сразу несколько, если пользователь оформил платную подписку. Нас интересуют бесплатные возможности, поэтому будем создавать баннеры по одному (Single design).





Шаблоны


Для начала определимся с выбором шаблонов. Все они сгруппированы в несколько разделов. "Display" - анимированные баннеры разных размеров.


"Social media" - статичные обложки и картинки для социальных сетей: Facebook, Twitter, YouTube, Instagram.


"Print" - шаблоны для печатной продукции: флаеры, карточки, посторы, приглашения, резюме, даже меню.

"Personal" - разные необычности: от обложки книги до слайд-шоу.



Создаём баннер


Давайте потренируемся на кошках на баннерах. Сначала нужно выбрать размер будущей нетленки. Либо что-то из предложенного, либо самостоятельно продумать размеры баннера (в том случае, если хотим вписать его в блог или на страницу сайта).

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

Но мы трудностей не боимся! В разделе "Самое популярное" давайте выберем "Пользовательский размер" и в открывшемся окошке укажем размеры будущего баннера в пикселях: width - это ширина, height - это высота. В моём случае размеры были такие: 800 на 600.


Переходим в редактор. Слева - набор элементов для добавления на слайды баннера. Справа - сами эти слайды в миниатюрном виде (раздел так и называется "Слайды"). Рядом другая вкладка - "Слои": здесь отображаются элементы, размещённые на каждом слайде. В центре находится стартовая страница баннера. В правом нижнем углу прячется "Временная шкала". Она нам понадобится чуть позже - для настройки анимации.



Фон и текст


Рассмотрим поподробнее кнопки на левой панели инструментов.

В разделе "Bkground" находятся фоновые изображения и инструменты для заливки фона. Они очень удобно разделены на категории: цвета, градиенты, текстуры и пользовательские изображения. Во вкладке "Мои изображения" можно загрузить свои картинки для фона (Upload file(s)), принимаются практически любые форматы.

Одно условие - фон на всех слайдах баннера будет одинаковый. Сделать все слайды "разномастными" у меня так и не получилось.


Кнопка "Текст" вызывает шаблоны для добавления надписей. Можно выбрать один из трех способов оформления текста: заголовок (Add heading), подзаголовок (Add subheading)  и обычный текст (Add body text). Чуть ниже - готовые шаблоны для надписей.


Выбираем нужный формат и щёлкаем по слайду в том месте, где нужна надпись. Для дополнительного оформления текста тут же появляется специальное окно сбоку. Давайте присмотримся к нему повнимательнее. Тут много интересного.

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


Летим дальше. Значок "Палитра" отвечает за окрашивание текста. Можно настроить затенённость и размытие.


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


Очень интересная кнопка - "Действия". Она позволяет добавить надписи интерактива. Можно прикрепить к тексту ссылку на веб-ресурс (GoToURL) или другой слайд баннера (GoToSlide).


Следующая кнопка (со значком "кинокадр") отвечает за анимацию. Нажимаем её - и тут же внизу появляется временная шкала. На ней отмечены все объекты, размещённые на слайде. Двигая цветные маркеры по ленте времени, можно установить, когда объект появляется на экране (на какой секунде-минуте), а когда исчезает.

Но и это ещё не всё. Лента времени помогает добавить анимацию объекта "на вход и выход". Для этого в начале или в конце временной отсечки щёлкаем по значку со стрелкой и открываем варианты анимации. Платные опции помечены оранжевым значком. Выбираем подходящий вариант (этих вариантов 4 страницы) и закрываем ленту времени, нажав на надпись "Временная шкала".


Три последние значка - вспомогательные. Значок с "плюсом" дублирует надпись. Значок "Замочек" закрепляет текст на слайде, а значок "Корзинка" - его удаляет.


Изображения 



Возвращаемся назад - к панели инструментов слева. Вкладка "Elements" помогает добавить на слайд фотографии, иконки и другие изображения. Картинок тут достаточно много: стоковые фото, фигуры, линии, иконки, иллюстрации, логотипы и виджеты.


Увы и ах, но бОльшая часть изображений доступна лишь при наличии платной подписки (прежде всего это касается коллекций "Иллюстрации" и "Стоковое видео"). Но не отчаиваемся: любую картинку и даже видео можно загрузить через вкладку "Мои загрузки" с компьютера.


Добавить картинку на слайд очень просто: щёлкаем по ней "мышкой" - и вот она уже появилась на слайде. Тут же слева открывается "окошко дополнительных возможностей", похожее на то, которое мы видели при работе с текстами. Кнопки практически те же самые.

"Цвет" помогает размыть и затенить изображение, применить фильтры.


В "Настройках" можно заменить одну картинку на другую (вдруг старая вам разонравилась).


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


Остальные кнопки - такие же, как и при работе с текстом: добавление ссылок, анимации, дублирование, закрепление объекта и его удаление.


Кнопки


На панели инструментов есть специальная вкладка для добавления интерактивных кнопок -
"Buttons". Правда, большинство шаблонов платные. Но всё равно можно что-то выбрать.

Настройка интерактивной кнопки похожа на работу с текстами. В меню "Палитра" кнопку можно перекрасить, в том числе и с помощью градиента.


А в меню "Рамка" можно добавить окантовку для кнопки или тень.


О назначении других кнопок я уже рассказывала выше.



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


В меню слева есть ещё одна интересная кнопка -"Animator". Она, как и лента времени, тоже добавляет анимацию на слайд, но применяет её ко всем объектам вместе взятым. Удобно, конечно, сделать это одной клавишей, только из волшебной анимации к нашим услугам только один-единственный бесплатный эффект (Alpha).


Последняя кнопка на панели инструментов - "Resize". Это новинка: кнопка позволяет волшебным образом изменить размер шаблона на любой другой. При этом весь контент останется цел и невредим. Очень приятная опция, как по мне.


Теперь давайте "метнёмся" вправо и присмотримся ко вкладке "Слайды". После каждой миниатюры слайда указано время (в секундах) его показа. Щёлкаем по этой надписи "мышью" и вручную меняем продолжительность слайдов.

Тут же находится инструмент для настройки переходов между слайдами. Нажимаем "Добавить переход" и выбираем подходящий вариант. Правда этих вариантов не так много, но всё же...

Если присмотреть, внизу можно заметить ещё одну интересную надпись - "Количество циклов". Это количество показов слайдов баннера на экране. Я выбрала опцию "Бесконечно" (Forever).


Готовый слайд можно проиграть, нажав на чёрную кнопку со стрелкой вверху.


Публикация


Осталось только сохранить и опубликовать баннер. Для этого нажимаем зелёную кнопку "Сохранить". Если вы ещё никак не назвали ваше творение, то самое время это сделать. И потом нажать ещё раз "Сохранить".


Мы возвращаемся обратно в рабочий кабинет. Выбираем нужный баннер, нажимаем на значок с тремя точками (More) и выбираем подходящий вариант. Можно получить прямую ссылку на созданный шедевр или код, чтобы добавить его на страницу сайта или блога.


Кода на выбор целых два. Можно обычный (script), а можно - iFrame.



Что бы ещё такого смастерить?


Основная функция сервиса - создавать баннеры. Но, не отходя от кассы, можно смастерить здесь и статичное изображение (постер, флаер, сертификат или пост для соцсетей). Только сразу предупреждаю: все более-менее красивые шаблоны для оформления платные.

Редактировать шаблоны ещё проще, чем создавать баннеры. Просто заменяем тексты на свои, редактируем шаблонные картинки или загружаем свои изображения. Меню для работы с текстами и изображениями - то же самое, что и при работе с баннерами. Вот - смотрите сами. Это конструктор постеров.


Полученное изображение можно скачать в форматах JPEG, PNG и GIF. А если постер планируется разместить на сайте или в блоге, то можно добавить ещё слайдов и сделать его многостраничным. И так наш постер превратится (та-дам!) в баннер.

Ещё из интересного отметила для себя создание слайд-шоу двух типов: обычное и качеством HD. Первое более квадратное, второе более вытянутое.

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

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


Слайд-шоу можно листать "стрелочками", а можно любоваться им с помощью автопросмотра. В итоге у меня получилось вот такое виртуальное фотопутешествие по Мурманской области. Автор фотографий - Вячеслав Басов.



19 комментариев:

  1. Класс!!! Срочно делаю свой баннер в блог!

    ОтветитьУдалить
    Ответы
    1. Да, сервис очень понравился. Несложно, быстро. А получается очень эффектно!

      Удалить
  2. Здорово. Спасибо за подсказку. Стоит попробовать.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста! Заходите к нам еще :)
      Действительно, попробовать стоит. Оторваться невозможно, настолько интересно работается в этом сервисе. Отличная площадка для творчества!Надеюсь, Вам понравится.

      Удалить
  3. Пробовала,действительно интересный, лёгкий в освоении сервис! Результат мгновенный.

    ОтветитьУдалить
  4. Здорово! Обязательно сделаю такой же. Огромное спасибо за обучалку!

    ОтветитьУдалить
  5. Совушка, спасибо большое (и за ссылку на сервис и за обучалку)! Обязательно сделаем баннеры для блогов :)!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста!
      Баннеры - хорошее дело. И эффектно, и оригинальное. Можно и как рекламу услуг библиотеки пристроить, и как виртуальную выставку.

      Удалить
  6. Я ввосторге!!! Мне так нужен банер. Спасибо!!! Так вовремя. Закон информации: если тебе это нужно, то Бог, Вселенная, пространство ответят тебе.Ты получишь эту информацию.

    ОтветитьУдалить
    Ответы
    1. Приятно, что информация приходит вовремя, когда в ней нуждаешься. Со мной иногда тоже такое бывает. Теперь буду знать, что это целый Закон информации! :)

      Удалить
  7. Обалдеть! пару дней оторвись от Инета, и тут сразу такие дела творятся! Мудрая Сова, ты когда-нибудь отдыхаешь?:-)

    ОтветитьУдалить
    Ответы
    1. Owl never sleep! Сова никогда не спит! :)
      А если серьезно, то это сроки в "ВикиСибириаде" Сову подгоняют. Буквально за несколько дней надо узнать про кучу дванольных сервисов, наваять виртуальных выставок. А за это все получить сертификат особой совиной учености! Все, что я успела за это время натворить, сразу в блоге и выставляю на всеобщее обозрение.
      Вот закончится учеба - как отдохну!

      Удалить
  8. СПасибище ОГРОМНОЕ!!! Сейчас чего -нибудь смастерю!!!

    ОтветитьУдалить
    Ответы
    1. Не менее большое пожалуйста! Мастерите на здоровье! Это так увлекательно... :)

      Удалить
  9. Спасибо за науку: по вашим инструкциям, пошагово, сделала первый баннер для библиотечного сайта - анонс предстоящей конференции. Если б не вы, ничего бы не вышло при моём полном незнании английского (это главная трудность). Вторая - трудно правильно рассчитать размер баннера, он получился немного велик. Третье - в конечном варианте текст спускается ниже, чем он выглядит во время монтажа. В общем есть нюансы, но первый опыт вот такой: http://beloyarlib.ucoz.ru/news/znakomstvo_s_budushhimi_klassikami_prodolzhenie_sleduet/2012-09-26-372
    Огромное спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Елена, у Вас получился отличный баннер! Мне очень понравился. Поздравляю!
      Очень приятно, что моя маленькая мастерилка Вам так помогла. :)

      Размер баннера, предлагаемый в сервисе, не всегда идеально вписывается в размер блога или сайта. Я свой баннер "подгоняла" под блог. Открыла в редактировании вкладку с html-кодом, нашла там размеры баннера: height - высота, width - ширина, рядом в кавычках - цифры (размер в пикселях), можно стереть заданные и вставить свои. Примерный размер моего баннера - 680 на 360, по-моему, так.

      А вот про то, что сервис так "задирает" текст, я только от Вас и узнала. Спасибо! В следующий раз учту. :)

      Удалить

Этот пост ждёт ваших комментариев.
Не знаете, как оставить комментарий?
Тогда эта инструкция для вас!

- Нажмите на стрелку рядом с окошком "Подпись комментария".
- Выберите "Имя/URL".
- Напишите своё имя, строчку URL можно оставить пустой.
- Нажмите "Продолжить" и комментируйте.

Заранее спасибо!