Как лучше сделать баннер

Как сделать баннер для сайта

Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких « мудреных » мы и поведаем, как сделать баннер.

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

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

Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые « созвучны » с тематикой ресурса:

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

  • Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате 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 страницы.

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

  • a href=»/ссылка на сайт рекламодателя» – адрес ресурса, на который приведет пользователя щелчок по баннеру;
  • title=»заголовок» – текст, отображающийся в сплывающей подсказке при наведении на область баннера;
  • target=»_blank» – задает правила отображения сайта рекламодателя после перехода по ссылке баннера («_blank»- откроется в новом окне);
  • rel=»nofollow» – запрещает поисковикам обработку этой ссылки;
  • img src=»https://www.internet-technologies.ru/wp-content/uploads/%D0%BF%D1%83%D1%82%D1%8C%20%D0%BA%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E» – задает путь к изображению, отображаемому в баннере;
  • alt=»альтернативный текст» – текст, который будет отображен в баннере, если его рисунок не загружен.

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

Читайте также:  Как сделать диетическую лепешку

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

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

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

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

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

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

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

В меню « Файл » выбираем пункт « Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:

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

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

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

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

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

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

Источник

Гайд по созданию рекламных баннеров для новичков: правила и советы по дизайну

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

Содержание:

Важность баннеров для бизнеса
и основные виды

Яркие картинки с текстом, продвигающие какой-то продукт, можно увидеть в личных блогах, в выдаче поисковиков, на стартовой странице или в группе ВК, Instagram*, Facebook* и даже в любимых мобильных играх. Чем так привлекателен баннерный формат рекламы для маркетинга?

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

Основные виды баннеров

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

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

    1 Leaderboard и растяжка

Если вы хотите создать баннер для размещения на главной странице сайта, горизонтальный лидерборд станет оптимальным вариантом. Чаще всего он располагается в верхней части страницы, оттого и подобное название. Это стандартный тип встраиваемой рекламы Google Ads и для директа Яндекс, ее размеры составляют 728×90, 970×250, 1000×120, 468×60.

Пример яркого баннера-растяжки от Яндекса

2 Вертикальный баннер и широкий небоскреб

Узкий прямоугольник подходит для рекламы на смартфонах, так как он идеально вписывается в экран. На сайтах кликабельный блок встраивается посередине текста или сбоку (в зоне, доступной для большого пальца правой руки). На Яндексе прямоугольные объявления могут группироваться, имитируя стандартные статьи.

На сайтах можно встретить баннеры разных форматов и типов

А вот небоскреб для смартфонов не подходит – его обычно встраивают в боковой сайдбар, как на примере ниже.

Баннер небоскреб часто занимает целый экран и находится в сайдбаре

Стандартные ширина и высота таких вставок – 120х600, 160х600, 300×600.

3 Квадрат и встроенный прямоугольник

Квадрат – универсальный вариант, который можно увидеть и внутри текста, и сбоку страницы. На мобильной версии сайта им разбивают длинную статью.

Компактные квадратные баннеры наиболее универсальны

Иногда формат слегка «не дотягивает» до квадрата, тогда это встроенный прямоугольник. Но размеры все же должны быть приближены к квадрату. Стандартом считается 125х125, 300х300, 300х250.

Правила оформления баннеров

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

Читайте также:  Как сделать выгонку тюльпана

Обозначьте общую композицию

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

Отличный пример расположения информационных блоков

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

Если достаточно места, можно добавить третий блок дополнительной информации, которая зацепит пользователя. Например, большая скидка работает только до 8 Марта, и посетителю нужно поспешить.

Ориентируйтесь на площадку

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

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

Размещая рекламные макеты на чужом сайте, учитывайте особенности выбранного ресурса

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

То же касается цветовой гаммы. Обратите внимание на фон сайта и основную цветовую палитру и постарайтесь сыграть на контрасте.

Правильно подбирайте шрифт

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

Отдавайте предпочтение нейтральным шрифтам полужирного начертания

Соблюдайте баланс

Чуть выше мы уже упоминали, что должно быть на баннере. Максимум, что можно добавить к этому – кнопку действия (CTA, call to action или призыв к действию) и фирменный логотип. Не стоит выходить за пределы 3 – 4 элементов, иначе оформление будет выглядеть перегруженным, и главная информация «потеряется».

Хороший пример промо: информации мало, но она вмещает все самое нужное

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

Где можно создать баннер с нуля

Закономерный вопрос, который возникает у начинающих пользователей – в какой программе можно сделать макет баннера самостоятельно. Сверстать рекламу можно в программах для ПК и с помощью онлайн-сервисов.

ФотоКОЛЛАЖ

Программа ФотоКОЛЛАЖ направлена на создание различного рода креатива: открыток, коллажей, пригласительных, промо-листовок, фото баннеров и т.д. Пользователи могут вручную регулировать размер создаваемого проекта и сжимать вес файлов, сохраняя высокое качество изображения. Приложение включает в себя инструменты редактирования графики, есть коллекция рамок и стикеров, можно добавлять стилизованные надписи. Софт подойдет для пользователей без опыта в графическом дизайне либо с начальными навыками. Если вам нужна удобная программа для создания баннеров на русском, скачать бесплатно инсталлятор можно по кнопке ниже.

Adobe Photoshop

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

Adobe Creative Cloud Express

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

Adobe Creative Cloud Express

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

Pixlr X

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

Читайте также:  Как сделать воздушные тефтели

Canva

Если вам нужна разработка дизайна рекламного баннера, шаблоны и примеры вы можете найти на сайте Canva. Сервис предлагает большой выбор готового дизайна для соцсетей, есть даже шаблоны для контекстной рекламы. Пользователи могут загружать файлы, которые сохраняются во внутренней медиатеке, или использовать материалы из библиотеки. Хотя здесь нет продвинутых опций, как в Pixlr, но есть вся необходимая база: анимация, добавление текста, обрезка фотографий, изменение фона. Небольшим недостатком сервиса является то, что в бесплатной версии мало качественных шаблонов. Также без оплаты заблокированы такие функции как: удаление фона, смена разрешения и выбор качества.

PicCollage

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

Создаем баннер для рекламы
своими руками

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

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

Скачайте инсталлятор ФотоКОЛЛАЖа и установите софт на ваш компьютер.

Запустив программу, выберите вариант «Новый коллаж». Так как баннеры обладают нетипичными размерами, мы будем указывать параметры самостоятельно. Поэтому выбираем «Чистый проект».

Для дизайна баннера подойдет режим Чистый проект

Раскройте пункт «Формат страницы» и установите пользовательские параметры. В окне настроек впишите значения «Ширина» и «Высота». Не забудьте убедиться, что вы указываете новые размеры в пикселях. Если баннер наружный – в сантиметрах.

Укажите параметры ширины и высоты в нужной единице измерения

Нажмите «Готово», чтобы перейти к следующему шагу дизайна.

2 Настройте фон

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

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

Фон не должен быть чересчур активным, чтобы текст оставался читаемым

3 Наложите дополнительную графику

Мы отдадим предпочтение более лаконичному дизайну, т.е. будем использовать минимум графики. На этом этапе мы добавим одно фото, которое подчеркнет основное послание – факт распродажи. Для этого переходим во вкладку «Фотографии» и перетягиваем нужную картинку на основной холст.

Вы можете добавлять поверх фона любое количество картинок и стикеров

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

При необходимости вы можете отделить основной объект от фона

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

4 Добавьте информацию

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

Каждую фразу лучше добавлять отдельным текстовым слоем

Вы можете выбрать готовый дизайн, кликнув «Стили текста». Чтобы детально отредактировать оформление, нажмите «Настройки текста» – здесь можно установить заливку текста, добавить контур, настроить расстояние между буквами.

5 Сохраните результат

Экспортировать макет можно двумя способами: быстро создать файл JPG или сжать картинку специально для загрузки в интернет. В первом случае выберите кнопку «Сохранить» на панели инструментов и кликните «Сохранить как изображение».

Программа предлагает несколько способов сохранения макета

Во втором варианте раскройте пункт меню «Файл» и отыщите строчку «Сохранить JPEG с настройкой качества». Укажите желаемое качество файла и ползунком регулируйте степень сжатия, отслеживая результат в окне предпросмотра.

Настройте оптимальное качество сжатия, если хотите сохранить в JPEG

Лучше всего ориентироваться на текст – он не должен быть размытым, и вокруг не должно быть «артефактов». Новый размер отобразится справа, под окном просмотра. Когда все будет готово, нажмите «Сохранить».

В заключение

Из этой статьи вы узнали, как сделать макет баннера для печати самому. Как видите, создание промо-материалов – не очень сложная задача, главное при этом знать базовые правила дизайна. Еще одним важным шагов становится выбор подходящего софта. Если вы ищете удобный и простой в освоении софт, советуем скачать программу ФотоКОЛЛАЖ. Она поможет быстро справиться с поставленной задачей и при этом предлагает практически неограниченный простор для креатива.

Источник

Поделиться с друзьями
Ответ и точка