Как сделать мигающий баннер для сайта

Обновлено: 04.07.2024

Что такое баннеры

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

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

Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами баннеров. Различают следующие их типы:

Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате JPEG или PNG . Характеризуются малым весом, не влияющим на скорость загрузки страницы.
Анимированные баннеры – анимация создана с помощью GIF . Состоит из нескольких картинок, сменяющих друг друга с заданной частотой. Вес баннера зависит от количества используемых в нем изображений.
Flash – в таком баннере анимация сделана на основе Flash . Она может реагировать на действия пользователя.

Интерактивное содержимое может быть представлено в форме игры или анкеты с добавлением звука. Рисунки для анимации создаются с помощью векторной графики.

Существует много различных размеров баннеров для сайта. Но самыми популярными из них являются:

88 на 31 пиксель;
120 на 60 пикселей;
120 на 90 пикселей;
120 на 240 пикселей;
125 на 125 пикселей;
120 на 600 пикселей;
160 на 600 пикселей;
180 на 150 пикселей;
234 на 60 пикселей;
240 на 400 пикселей;
250 на 250 пикселей;
300 на 600 пикселей;
300 на 250 пикселей;
336 на 280 пикселей;
150 на 150 пикселей;
468 на 60 пикселей;
728 на 90 пикселей.

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

Признаки эффективного рекламного баннера

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

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

Закономерности, которые стоит учитывать перед тем, как размещать баннер на сайте:

Чем больше баннер, тем выше вероятность перехода по нему пользователя. Самым эффективным размером считается 240 на 400 пикселей;
Наибольшим эффектом обладает баннерная реклама, размещенная сверху ( в шапке ). Также она может быть размещена сбоку или внизу страницы, но эффективность здесь несколько ниже;
Анимированные баннеры способны быстрее привлечь внимание пользователя – интуитивно глаз человека реагирует на движение.

Создание и размещение рекламного баннера

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

Код большинства баннеров соответствует шаблону:

Но не обязательно разрабатывать баннер самостоятельно. Для этого можно воспользоваться специальными онлайн-генераторами. Чтобы сгенерировать код баннера на таком сервисе, нужно заполнить несколько полей и нажать на кнопку:

Или можно заказать создание баннера в профессиональной студии. Тогда это обойдется дороже… Вот примерные расценки:

Разработка обычного GIF баннера – от 25$;
Создание баннера на основе Flash – 70-150$;
Ресайз – примерно 50% от первоначальной его цены.

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

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

Вот что получилось:

Создание анимированных и видео баннеров

Рассмотрим на примере как сделать анимированный баннер с помощью программы Ulead GIF Animator .

Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр:

При желании к анимированной картинке можно добавить движущийся текст. В специальном окне набирается текст и настраивается его анимация ( задается скорость и направление движения ):

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

Ulead GIF Animator позволяет сохранить созданный баннер в разных форматах. В том числе и как видео:

Главное не реализация, а идея!

Технология создания баннера не главное. Куда сложнее разработать его основную концепцию и идею. Так что перед тем, как сделать видео баннер, постарайтесь до конца продумать его дизайн и концепцию. А реализация – дело наживное!

В этом уроке Вы узнаете, как создать анимированный баннер в Photoshop CS5, используя временную шкалу.

Сложность урока: Средний

Анимированные Gif файлы были поводом для многих шуток в дизайнерских обществах. Это потому, что анимационные картинки известны тем, что немного навязчивы и загромождают интернет-странички. Однако при правильном использовании, анимация может привлечь внимание к себе и заставить забыть о другом содержимом страницы. Сегодня мы покажем, как использовать Photoshop CS5 для создания анимированных GIF баннеров. Давайте начнем!

Прим. переводчика: для этого урока подойдёт и Photoshop CS4.

Это тот самый баннер, о котором пойдёт речь в этом уроке.

Шаг 2. Поместите логотип в верхней центральной части баннера

Шаг 3. Напишите слоган под логотипом.

Откройте диалоговое окно Стили слоя (layer styles)и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 2px.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение (Multiply) с непрозрачностью 28%.

Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно), Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.

Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

Откройте диалоговое окно Стили слоя (layer styles) и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 1px.

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках все как есть.

Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity) 6%

Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.

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

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

(нажмите на изображение, чтобы увеличить)

Шаг 11. Ваша Временная шкала (Timeline Animation), должна выглядеть примерно так, как ниже.

(нажмите на изображение, чтобы увеличить)

Вот и все! Вот такой баннер у нас получился!

А это баннер переводчика по уроку. Практика очень хорошо закрепляет теорию!

В рамках бизнеса появляются задачи, когда требуется быстро создать или редактировать существующий баннер и залить его на площадку. До этой статьи я не знала, что такое Google Web Designer, но изучив его, я поняла, что освоить его можно за один вечер.

Что такое Google Web Designer

Google Web Designer – это бесплатное приложение для создания объявлений и других видов онлайн-контента в формате HTML5. В нем существует как визуальный редактор, так и редактор кода. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript и XML.

Google Web Designer будет полезен web-дизайнерам и маркетологам, которые хотят попробовать себя в сборке баннеров.

Я расскажу и покажу, как создавать баннеры формата HTML5 для загрузки в Google Ads и Yandex Direct. Для этого нам пригодится как визуальный редактор, так и редактор кода.

Как он выглядит

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

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

Выбираем платформу Google Ads или Внешнее объявление и задаем размер. Многие рекламодатели предпочитают заказывать креативы, которые подойдут и для Google Ads, и для Yandex Direct.

Какие разрешения мы можем использовать на обеих площадках:

160×600, 240×400, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90, 970×250.

Вес каждого из них не должен быть более 150 КБ.

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

Быстрый режим анимации — для создания креативов покадрово (сцена за сценой).

Расширенный — для редактирования анимации каждого элемента в отдельности.

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

Посмотрим, как выглядит рабочая область Google Web Designer:

1. Панель инструментов. Тут находятся инструменты для создания и управления элементами в рабочей области. Здесь нам понадобятся инструменты выделения, пути перемещения, рука и масштаб. Здесь также можно создавать маску объекта, различные фигуры и кривые Безье. Есть пипетка и создание текста. Если понадобится, тут даже можно работать с 3D-объектами.

2. Панель настроек инструмента. Если выбрать какой-либо инструмент — в этой панели отобразятся все доступные действия с ним.

3. Временная шкала. На ней есть 2 режима управления анимацией – быстрая (покадрово) и расширенная (с каждым элементом на холсте). Именно с помощью этой панели мы будем делать анимацию.

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

5. Рабочие панели. Выбор цвета, форматирование текста, структурный редактор, в котором находятся слои, как в Adobe Photoshop. Также есть инспектор объявления — он показывает, все ли условия нами соблюдены и можно ли загрузить баннер на рекламную площадку. Есть и другие панели, но мы рассмотрим только те, с которыми будем работать при создании баннера.

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

7. Холст документа. На нём мы будем создавать наш баннер.

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

Создаем анимированный баннер с чистого листа

Выбираем изображения

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

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

Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.

Подбираем шрифты и с помощью Adobe Illustrator рисуем логотип бренда и призыв к действию. Создаем вариант логотипа и три состояния кнопки призыва к действию для компонента взаимодействия, который мы будем использовать: кнопка не нажата, на кнопку наведен указатель, кнопка нажата. Помните, что если в процессе работы возникнет необходимость замены каких-либо элементов, то в GWD мы можем это сделать в любой момент.

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

У всех изображений прозрачный фон, они в формате PNG, за исключением фона. Только фон у нас непрозрачный, в формате JPEG.

Верстаем баннер для Google

Давайте теперь соберем наш первый баннер для Google Ads, формат 300х250.

Добавим все элементы, которые будут участвовать в этом баннере на холст.

Переименуем изображение здесь, чтобы не путаться. Изображений будет много.

Следующим идет изображение фруктов. Просто переносим, зажав мышкой, картинку на холст. Обращаем внимание на Инспектор — нам уже придется уменьшить все наши креативы. Не проблема — в сети достаточно бесплатных конвертеров. Для примера используем iLoveIMG.

Сейчас уже лучше. Поставим замочки на эти слои – они не будут участвовать в анимации.

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

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

Для большей реалистичности добавим немного завершающего движения с вращением в Ease-out. Пример можно увидеть на временной шкале ниже.

Пришло время для появления логотипа. Давайте сделаем его появление из ниоткуда. Центрируем лого по вертикали, изменим масштаб до 0.05 и заливку до 0, а в последнем ключевом кадре вернем показатели по умолчанию.

Сделаем так, чтобы кнопка мигала. Копируем через каждые 4 клетки ключевое действие и чередуем заливку и масштаб 0,9 и 0,9 и 1 и 1. В первом ключевом кадре заливку оставим 0. Так сделаем 7 раз. Итого у нас получается 14 ключевых кадров. В конце заставим ее полностью исчезнуть — масштаб и заливка будут равны 0.

С логотипом мы поступим иначе — заливка будет равна нулю, но масштаб выставим 4. Логотип будет будто наезжать на экран. А после этого заставим фрукты укатиться за кадр с динамикой Ease-in.

Зациклим нашу анимацию, чтобы она повторялась. Добавляем ключевые кадры до начала анимации каждого объекта и до последней секунды. Делаем это для того, чтобы объекты повторялись идентично друг другу. Не забудьте выставить заливку 0 у логотипа и призыва к действию для того, чтобы эти объекты оставались невидимыми. Затем задаем повтор анимации 2 раза. Общее время должно быть не более 30 секунд, а так как мы создали повтор, то в итоге наша анимация теперь составляет 11.5 х 2 = 23 секунды.

Верстаем баннер для Яндекса

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

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

Теперь переходим в режим кода.

И делаем следующее:

meta name="environment" content="gwd-genericad"

вставляем такой код:

где width и height — ширина и длина нашего баннера.

Так как у нашего баннера размеры 300х250, вставляем строчку:

meta name="ad.size" content="width=300,height=250"

Не забудьте поставить скобки <> перед началом строчки и после нее

Находим абзац с телом баннера body. Со следующей строки, после открытия тела кода, вводим:

Находим /gwd-genericad в теле кода и закрываем тег:

И сразу после него добавляем скрипт:

script

document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
/script

Также не забудьте о скобках в начале и конце тега, как на скриншоте:

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

Сохраняем изменения и публикуем баннер как в прошлом разделе. Баннер для Яндекс.Директа готов.

Верстка других форматов и модерация объявлений

Остальные 3 формата, 240×400, 300×600 и 336×280, мы можем создать используя уже готовый баннер 300×250. Эти советы помогут ускорить работу:

Создайте новое объявление нужного вам размера и откройте уже созданный вами баннер. Скопируем некоторые объекты в новый баннер для ускорения процесса.

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

Из временной шкалы предыдущего баннера скопируйте движущиеся объекты на новый. Нужные объекты можно выделить с помощью SHIFT и скопировать / вставить Ctrl+C / Ctrl + V. Они копируются вместе с анимацией.

Так как вы копируете объекты на баннер большего или меньшего размера, то их надо будет подогнать под актуальный размер таким образом, чтобы они смотрелись гармонично.

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

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

Давайте добавим созданные нами объявления в кабинеты площадок. В Google Ads объявления одобрены.

В Яндекс.Директе объявления одобрены.

Как Google Web Designer упрощает рабочие задачи

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

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

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

— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.

— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.

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

*) На самом деле все равно сложно, но зато проще, чем было раньше.

История началась с постановки задачи: нужно сделать анимированный баннер с примерно тридцатью объектами средствами HTML+javascript за один день. За день, конечно, баннер сделан не был, а был сделан за два усилиями трех человекодней. После выполнения задания осталась библиотека пакетной анимации, которую я назвал Scenario. О её доработанной версии я и хочу рассказать.

Запуск сценария из любого места предельно прост:

Осталось только разобраться, что писать вместо трех точек в примере :)

Описание сценариев

element — указатель на HTML-элемент или несколько элементов, представляющих данный анимируемый объект. Указать на HTML-элемент можно тысячей и одним способом, поэтому подробное описание этого свойства я пока опущу.
scene — массив сцен или одна сцена. Сценой в данном случае называются какие-то действия над анимируемым объектом, имеющие время начала и время окончания.
child — массив дочерних объектов или один дочерний объект.

time — единственное обязательное свойство. Массив из двух или трех элементов. Первый элемент — время начала данной сцены в миллисекундах, отсчитываемое от старта сценария, т.е. от момента вызова функции $.scenario(). Второй — время окончания, отсчитываемое от того же события. Общая продолжительность всего сценария равна самому большому времени окончания сцены.
Третий опциональный элемент — название функции изинга (easing), которая будет применяться для данной сцены. Изинг берется из jQuery, поэтому сторонние функции изинга должны работать нормально.
before — объект с css-свойствами, которые нужно применить к элементу до старта анимации, т.е. в момент time[0].
after — объект с css-свойствами, которые нужно применить к элементу после завершения анимации, т.е. в момент time[1].
animate — объект, в котором перечислены анимируемые css-свойства и их конечные значения. В качестве начальных значений берутся текущие css-свойства анимируемого элемента. Пока поддерживаются только числовые значения.
start — функция, которая будет вызвана при старте сцены, непосредственно после применения css-свойств из свойства before.
end — функция, которая будет вызвана после завершения сцены, непосредственно после применения css-свойств из свойства after.
step — функция, которая будет вызвана на каждом шаге анимации, пока текущее время находится между time[0] и time[1].

Ну и сферический код облаков в вакууме:

Обратите внимание, что элемент .cloud вообще не имеет анимации, а элемент eq(0) не содержит свойства scene, но содержит свойства time, before и animate — это возможность еще немного сократить запись сценария.

Для усвоения основных принципов пока хватит.

Почему бы не сделать все на jQuery.animate. Живой пример

На первую часть подзаголовка я отвечу второй. Я подготовил пример анимации, сделанной с помошью Scenario. Пример очень похож на баннер, о котором шла речь в самом начале, правда я вырезал из него всю айдентику и заменил главных персонажей на ниндзя. Кроме того, ради интереса я сделал такой-же баннер на jQuery.animate (тот, что снизу).

Живой пример

Это, конечно, печально, но жить можно, если бы не…

Киллер-фича Scenario

Представьте: анимация, которую вы делаете, длится 20 секунд. Вы делаете финальную сцену, которая длится секунды две. Сколько времени тратится впустую, пока вы просматриваете баннер до последних секунд? Как решить проблему в jQuery? Закомментировать кусок кода, делающий большую часть работы. При этом не факт, что все объекты будут на своих местах, ведь код, который их двигал, закомментирован.

Решение от Scenario — просто укажите с какого времени начать сцену и в какое закончить. Ну и скорость воспроизведения можно задать. И частоту кадров до кучи.

Пример с возможностью настраивать время

Отладка — одно удовольствие.

Еще немного о сценариях

Функция обратного вызова step, помимо этих двух параметров, принимает еще один параметр с подробной информацией о текущем шаге анимации:
— time, время с начала сценария;
— passed, время с начала сцены;
— progress, время с начала сцены, нормированное по отрезку 0..1;
— position, это progress после применения функции изинга.

Код Scenario на Гитхабе

Планы на будущее

Придумать способ безболезненной модификации сценариев. Сейчас, чтобы сделать разные сцены для браузеров, поддерживающих css-трансформации и нет, придется помучиться, доставая объекты и сцены по индексам в массивах.

Читайте также: