Что такое баннеры, как правильно писать это слово в единственном и множественном числе, их размеры и виды, а также изготовление в онлайн сервисах и программах

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Для интернет-пользователей, наверное, нет секрета в том, что значит слово «баннер» (или в другой интерпретации «банер»). Эти элементы сплошь и рядом встречаются на просторах сети в качестве рекламы.

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

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

«Баннер» или «банер» — как правильно?

Но для начала обратимся к нюансам правописания и корректного произношения данного термина. Здесь есть парочка нюансов. Во-первых, в сети часто задают вопрос, как пишется это слово: «баннер» или «банер». Ну а во-вторых, возникает сомнение по поводу его использования во множественном числе (баннеры или баннера́?).

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

Что касается второго нюанса, то здесь вступает в силу грамматика, в соответствии с которой при образовании множественного числа в именительном падеже преимущество отдается окончаниям «-и» и «-ы», если нет особых отметок в словарях (несмотря на то, что данное понятие является англицизмом, оно уже прочно вошло в русский язык). Поэтому «баннеры» — это правильно.

Рекламные баннеры в реальной жизни

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

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

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

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

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

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

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

• баннерная ткань (на основе винила) — о ней было упомянуто выше. Ее отличает высокая прочность, стойкость к воздействию погодных явлений (ветер, дождь, снег и т.д.), а значит, гарантируется долговечность изделия;
• фронтлит (frontlit) — ламинированная основа с матовой поверхностью. Является светонепроницаемой, поэтому сделанное на ее базе полотно освещается обычно спереди;
• бэклит (backlit) — великолепно пропускает и рассеивает свет, потому изготовленный из этого материала баннер освещается сзади и функционирует в любое время суток;
• блокаут (blockout) — с помощью этого материала, который является непроницаемым для световых лучей, можно задействовать обе стороны баннерного полотна;
• Removable — материал с клеевой прослойкой, позволяющей произвести быстрый демонтаж.
• баннерная бумага — отличается от обычной высоким содержанием нейлона и латекса, что обеспечивает ей прочность. Конечно, она уступает по всем параметрам выше перечисленным материалам, поэтому во внешней рекламе применяется не так часто и обычно в течении короткого промежутка времени, но для внутренних баннеров это наилучший вариант.

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

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

Ну а теперь в экспресс-режиме ознакомьтесь со всеми этапами современного производства одного из видов баннера (установка рулона с баннерной тканью, подготовка к печати, контроль качества, непосредственно печать, постпечатная обработка):

А также взгляните на процесс монтажа уже готового изделия:

Виды и размеры баннеров в интернете

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

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

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

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

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

Кстати, банерный формат в наши дни гораздо более эффективен в составе контекста (доступ к размещению такой рекламы, а значит, и к возможности получения прибыли, вебмастера могут реализовать через регистрацию и создание своих аккаунтов в РСЯ и Google Adsense).

Далее рассмотрим стандартные размеры рекламных баннеров, встречающиеся в интернете:

А теперь давайте посмотрим, как можно классифицировать все рекламные баннеры по разным признакам. Скажем, по назначению они делятся на:

1. Продающие — стимулируют пользователя сделать клик по нему для совершения целевого действия, а именно: купить товар или услугу либо оформить подписку.

2. Имиджевые — призваны добавить популярности бренду и максимально увеличить лояльность к нему со стороны потенциальных подписчиков и клиентов.

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

По виду функционала (вместе с примерами и соответствующими кодами):

1. Статичные — имеют вид изображения в формате PNG или JPG. Основное преимущество такого банера заключено в его малом весе, следовательно, он не сильно уменьшит скорость загрузки страниц ресурса. Вот как может выглядеть подобный банер с вшитой в него гиперссылкой:

А вот соответствующий ему код, внедряемый на сайт:

<a href="https://clck.ru/Gxvrt" target="_blank"><img src="https://goldbusinessnet.com/images/banners/kwork_1.jpg"></a>

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

2. Анимированные (динамические), содержащие картинку аниме в формате GIF. Их плюс заключается в реализации анимации, которая помогает лучше привлекать внимание посетителей. Ведь любое движение на странице невольно улавливается человеческим глазом. Однако, минус в том, что такие элементы имеют больший вес, чем статические аналоги. Это надо иметь ввиду.

Код для вставки выглядит приблизительно следующим образом:

<a target="_blank" href="https://goo.gl/IUsIya"><img src="https://goldbusinessnet.com/images/banners/728x90_binpart_gif.gif" /></a>

3. Flash (флеш) — пожалуй, наиболее эффективные среди всех веб-баннеров, но изначально и самые тяжелые, хотя современные средства оптимизации позволяют значительно их облегчить. Как и выше указанный вид в формате ГИФ, их вполне можно отнести к динамическим.

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

В отличие от двух предыдущих видов в варианте флеш используется не растровая, а векторная графика в формате SWF, которая отличается гибкостью масштабирования, а также очень высоким качеством изображений. При этом его анимация разнообразнее, чем у варианта в ГИФ-формате (чтобы активировать такой баннер, нужно установить или просто включить Adobe Flash Player).

При желании вы можете использовать универсальный код для размещения банера на сайте с использованием тегов <object> и <embed>, в котором, правда, некоторые элементы (например, атрибуты classid, codebase, align, bgcolor) являются невалидными, но зато подобный вариант на сегодняшний момент воспринимается практически всеми браузерами даже устаревших версий:

<object 
     classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="468" height="60" id="468x60" align="middle">
         <param name="allowScriptAccess" value="sameDomain">
         <param name="allowFullScreen" value="false">
         <param name="movie" value="https://goldbusinessnet.com/images/banners/468x68-rotaban.swf">
         <param name="quality" value="high">
         <param name="bgcolor" value="#ffffff">
<embed src="https://goldbusinessnet.com/images/banners/468x68-rotaban.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="468x60" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

Для того, чтобы код для этого же самого флеш-элемента стал валидным по действующей на этот момент версии HTML 4.01, его надо привести (включив только тег <object>) к такому виду:

<object 
     type="application/x-shockwave-flash"  
     data="https://goldbusinessnet.com/images/banners/468x68-rotaban.swf" 
     width="468" height="60">
        <param name="allowScriptAccess" value="sameDomain">
        <param name="allowFullScreen" value="false">
        <param name="movie" value="https://goldbusinessnet.com/images/banners/468x68-rotaban.swf">
        <param name="quality" value="high">
        <param name="bgcolor" value="#ffffff">
</object>

Здесь атрибут «type» определяет MIME-тип объекта, который необходим, поскольку отображение флеш-элемента в браузере осуществляется посредством специального приложения (в данном случае программы Adobe Flash Player). Атрибут «data» указывает адрес SWF-файла. Ну а тег <param> позволяет передавать нужные характеристики для объекта при его выводе на страницу.

Да, гиперссылка на целевую веб-страницу может быть вшита непосредственно в файл SWF либо указана в коде вставки баннерного элемента на сайт. Ежели она отсутствует в файле, то ее можно прописать с помощью того же элемента «param», добавив в выше приведенный код ниже следующую строчку, где в качестве значения атрибута «value» нужно добавить ссылку, по которой и будут переходить посетители после клика по флеш-баннеру:

<param name="flashvars" value="bannerLink=http://goo.gl/PLcEI5">

Главный недостаток flash-банеров на современном этапе состоит в утрате их былых позиций. Это стало прямым следствием того, что многие крупнейшие корпорации (такие как Apple, Mozilla, Amazon), определяющие развитие инноваций, отказываются от флеш-технологий в принципе.

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

Одним из этих шагов стала для начала установка опции «Спрашивать» в настройках по умолчанию в отношении flash-анимации в браузере Хром. Это значит, что в этом случае необходимо дать отдельное разрешение на отображение флеш-контента на страницах. Ну а на следующем этапе уже появилось предупреждение о том, что самая мощная интернет-корпорация прекращает поддерживать флеш-технологии начиная с 2021 года.

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

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

Тот же Google в своих рекламных сетях начинает повсеместно использовать HTML5-баннеры, которые позволяют добиться аналогичных с технологией flash результатов (а в недалеком будущем и превзойти их) при массе преимуществ, главные из которых заключаются в следующем:

• рекламные объявления в формате ХТМЛ5 одинаково качественно отображаются на всех современных устройствах без дополнительных расширений и приложений;
• подобная технология обеспечивает малый вес элементов, которые не замедляют загрузку страниц сайта, что очень важно при продвижении проектов в интернете;
• HTML5 позволяет интегрировать в веб-баннеры практически все доступные элементы в виде надписей, изображений, кнопок, форм, скриптов, видео и т.д.;
• возможность изменения баннера после его установки.

Итак, по всем прикидкам, именно ХТМЛ5-банеры заменят в будущем (и процесс уже пошел) flash-аналоги. Естественно, это процесс не одного дня, на многих веб-ресурсах в интернете пока еще используются стандартная технология, но тенденция, как видите, налицо.

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

Как создать banner онлайн бесплатно

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

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

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

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

Но сегодня мы рассмотрим единственный онлайн-сервис, который позволяет бесплатно делать банеры традиционных уже форматов (JPG, PNG либо GIF).

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

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

Сначала (на вкладке «Макет») вам необходимо выбрать размеры будущего изделия (из числа стандартных или указать свои) и определиться с фоном. Можно исполнить однотонную заливку, с выбранным градиентом либо загрузить собственное изображение, которое будет служить фоном:

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

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

На этом функционал в отношении текста не исчерпан. Его еще можно поворачивать относительно горизонтальной оси. Для этого предусмотрена специальная опция «Вращение»:

Далее идет вкладка «Воздействие». Здесь есть все инструменты для создания и настройки теней, но не только. Вы в силах задать месторасположение тени, например, внизу-слева («bottom left»); расстояние, на которое надписи будут отбрасывать тень; цвет; яркость; толщину обводки букв («текст плана»). Можно даже наложить дополнительный цветовой оттенок («наброски цветов»):

Следующая вкладка «Пограничная» (пример некорректного перевода) позволяет прикрутить и настроить рамку, если, конечно, она вообще вам нужна, а на последнем шаге уже можно скачать полученный баннер в трех возможных форматах (PNG, JPG, GIF):

Вы можете протестировать все три варианта и уже затем выбрать тот, который больше подходит по определенным характеристикам. Обращаю внимание на то, что в конструкторе Bannerfans можно сделать только статичные баннеры. Формат ГИФ предназначен для того, чтобы в нем сохранить несколько изображений для анимации, которую затем можно скомпилировать в других профильных онлайн сервисах либо программах.

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

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

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

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

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

Покупка позволяет сохранять готовый продукт на сервисе и скачивать его в любых возможных форматах, включая восхваляемый (не только мною) ХТМЛ5 с анимацией.

Программы для создания разнообразных баннеров

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

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

Вот подробнейшая инструкция по использованию бесплатного приложения Google Web Design, позволяющего делать анимированные банеры в HTML5-формате:

А вот и детальный разбор наложения анимации в Adobe Animate: