Баннер на html5

Способы реализации (как изготовить).

Разработка тянущегося баннера HTML5 несколько сложнее, чем изготовление баннера с фиксированными границами, так как требует от дизайнера уделить особое внимание вопросу: как разместить значимую информацию на баннере при условии отсутствия четких границ?

Способ 1
Баннер с растягивающимся фоном.

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

Способ 2
Пропорциональное растяжение.

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

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

Способ 3
Адаптивная верстка.

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

Для сохранения целостности дизайна и легкости восприятия информации используется адаптивная верстка макета тянущегося баннера. То есть к позиции и виду элементов баннера применяются особые правила с учетом текущей ширины баннера. Логотип, кнопка, изображения могут занимать разные места и формы в зависимости от применяемой для данной ширины верстки. А текст может менять форматирование, размер и количество строк.

Данный вариант изготовления, тянущегося HTML5-баннера наиболее кропотливый, но в то же время наиболее корректный с точки зрения аккуратности дизайна и его соответствия брендбуку и фирменному стилю заказчика.

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

Выбор способа изготовления, тянущегося HTML5-баннера, зависит от условий размещения и содержания баннера. Опираясь на опыт, мы всегда предложим оптимальное решение и подробно разъясним – почему выбран именно такой способ.

Так что мне заказать? Тянущийся (резиновый) HTML5-баннер или обычный, фиксированного размера?

В данный момент, наиболее популярные форматы для рекламных сетей (Google adWords, РСЯ Яндекс, Адфокс, Адривер) – это баннеры фиксированного размера (768х90px, 300х250px, 160х600px и т.д). Поэтому, для проведения рекламной кампании в этих сетях, лучше заказать комплект анимированных баннеров HTML5 стандартных фиксированных размеров.

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

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

Популярные виды объявлений на сайте:

Графический — простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.

Флеш-баннер — имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.

HTML5-баннер —комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

Главные отличия HTML от других типов баннеров

По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:

  • Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера.
  • HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения.
  • Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
  • Для оценки эффективности баннеров на HTML5 можно просмотреть статистику пользоваться в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.

Существенным недостатком флеш-технологий, стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.

2. Adobe Edge Animate

Тем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, javascript и CSS3. Программа поддерживает импорт таких форматов, как .svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.

Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:

Основные преимущества Adobe Edge Animate:

  1. Множество доступных видеоуроков в Сети по использованию программы.
  2. Простой функционал, большинство процессов автоматизированы
  3. Программа не требует знаний в HTML5, javascript и CSS3.
  4. По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов javascript, html и файл формата An — для последующего редактирования файла в программе.

  5. Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Есть и несколько недостатков:

  1. Интерфейс только на английском языке.
  2. С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.

Adobe Animate CC

Animate CC — это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и javascript.

Интерфейс очень схож с Flash Professional, но возможности у программ различаются.

Преимущества Animate CC:

  1. Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
  2. В отличие от Edge Animate Animate CC, имеет большой выбор векторных кистей и возможность работы с растровой графикой.
  3. Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
  4. Имеется русскоязычная версия.
  5. Расширенные возможности экспорта файла в форматы: javascript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.

Недостатки:

  1. Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается не просто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
  2. Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

Google Web Designer

Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords. Если мы посмотрим на окно создания нового файла, заметим, что в программу уже встроены размеры шаблонов рекламы.

Преимущества Google Web Designer:

  1. Простой интерфейс.
  2. Наличие шаблонов для рекламы в google.
  3. Полностью бесплатная программа.
  4. Наличие русскоязычной версии.
  5. Заложен адаптивный дизайн баннеров, html-баннер будет отлично выглядеть в любом разрешении экрана.

Недостатки:

  1. Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
  2. Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.

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

Существует еще множество других программ и сервисов, способных дать качественный продукт, но мы рассмотрели 4 основных способа разработки продвинутого HTML-баннера с интересной анимацией, которые используем в своей работе. Мы также можем для вас разработать баннеры или рекламную кампанию целиком.

Делаем анимацию в adge animate

Переносим все изображения в adge animate.

  1. 1 Оформим логотип. Он состоит из картинки logo и прямоугольника rectangle tool такого же размера. Логотип добавляем внутрь прямоугольника.
  2. 2Делаем четыре картинки сверху вниз по очереди анимации. У первой картинки выставим непрозрачность 100 процентов, у других ноль. Перейдем в инструменты в timeline. Разберем каждый.
  • auto-keyframe кнопка для создания анимации.
  • auto-transition вторая кнопка для создания анимации. При добавлении анимации две кнопки должны быть активными, нажаты.
  • toggle pin нажимаем на кнопку и переносим пин на шкале времени, во вторых меняем положения элемента. Отжимаем кнопку pin и проверяем. Если получилась обратная анимация, то выделяем кадр и нажимаем правую кнопку, выбираем invert transition.
  • Выбор вида анимации по кривой движения. Выделяем кадр и внутри выбираем, какая будет анимация линейная или движение по кривой.

Продолжаем делать анимацию первой картинки с волком.

Переносим курсор на пол секунды и ставим метки всем изображением add keyframe for opacity.

Переносим курсор на секунду и вставим у первой картинки непрозрачность ноль, ставим метку.

Для второй картинки ставим в этот момент прозрачность 100 процентов.

Получилось, первая постепенно погасла, а вторая одновременно появилась.

Для других изображений делаем такие же кадры.

Чтобы посмотреть результат в интернет браузере нажмем комбинацию клавиш ctrl+enter.

Делаем анимацию логотипа.

  1. Выделяем прямоугольник и логотип.
  2. Зажимаем инструмент pin.
  3. Переносим интервал на секунду в бок.
  4. Берем прямоугольник и переносим вниз, чтобы он перекрыл картинку.
  5. Зажимаем логотип и перетаскиваем вниз к краю.
  6. Отжимаем pin и проверяем анимации.

Делаем анимацию таким же способом вверх.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *