Делаем баннер онлайн. Создание баннера

14.05.2019

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

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

Баннер (англ. banner – знамя) – графическое изображение рекламного характера. В сфере Интернет баннер является особым форматом рекламы, содержащим гиперссылку на рекламируемый сайт.

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

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

1.1 Форматы баннеров

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

Чаще всего в интернете используются следующие стандартные размеры баннеров (сетка взята из рекламной кампании Google Adsense):


Примечание: размеры (горизонтальный Х вертикальный) указаны в пикселях (px).

Посмотреть, как выглядят баннеры данных форматов, можно .

1.2 Виды баннеров

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

  • Статичный баннер – самый простой вариант. В этом случае баннер представляет собой одну статическую картинку (неменяющееся изображение). Преимущества – простота реализации, небольшой вес файла. Недостаток – минимум выразительности; такие баннеры, как правило, менее эффективные, нежели их другие виды.
  • Анимированный баннер представляет собой несколько изображений, поочередно меняющихся во времени. Формат подобного файла – «.gif». Преимущества – высокая эффективность, неплохая выразительность. Недостаток – довольно большой вес баннера по сравнению с предыдущим вариантом.
  • Флеш-баннер (Java-баннер) – самый сложный по степени реализации вариант. Создается по технологии Adobe Flash. Благодаря своим особенностям (использование векторной графики вместо растовой) значительно уменьшается объем файла, но появляются дополнительные возможности (звуковые эффекты, плавное изменение кадров и т.д.). Некоторые баннеры дают возможность совершать интерактивные действия (нажимать кнопки на баннере, играть в мини-игры и т.д.). А рекламная внутри и не видна пользователю. По сути, данный баннер представляет собой программу. Преимущества – высочайшая эффективность, отличная выразительность, небольшой размер файла. Недостаток – дополнительные требования к сайтам (необходима поддержка Java) и браузерам (может не работать на старых версиях браузеров, не поддерживающих Flash-анимацию).

2. Как сделать баннер онлайн

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

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

Несколько красивых шаблонов баннеров можно взять . А для работы в фотошопе можно воспользоваться этими .

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

Теперь о том, как создать баннер для сайта с помощью Bannerfans . Делается это за 5 шагов.

2.1 Шаг первый: создание макета

Итак, сначала нужно перейти в онлайн-конструктор баннеров – вот ссылка . Переключив язык интерфейса на русский (правый верхний угол сайта), выберите закладку «Макет » (первая область на скрине ). Здесь создается фон для будущего баннера.

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

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

В четвертой области выбирается начальный цвет градиента и конечный.

В пятой области выбирается тип (режим) градиента.

2.2 Шаг второй: создание надписи

На этом этапе можно создавать до 6 различных надписей. Но сначала нужно перейти на вкладку «Текст ». На скрине ниже область разделена на семь частей.


Первая область – превью, где можно посмотреть, как будет выглядеть баннер. Эта область примечательна тем, что прямо на ней можно «двигать» надписи, меняя их положение на фоне. К недостатку сервиса по созданию баннеров следует отнести то, что все изменения, которые вы будете вносить, происходят не в онлайн-режиме (для этого приходится нажимать на кнопку «Изменить баннер »).

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

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

Четвертая область – размер шрифта.

Пятая область – цвет надписи. Доступен довольно большой выбор.

Шестая область – наклон надписи (относительно горизонтали).

Седьмая область – кнопка «изменить баннер». Используется для отображения внесенных изменений.

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


Тень – выбор положения тени (справа, слева, сверху, снизу и т.д.)

Расстояние – удаленность тени от основной надписи.

Цвет – выбор цвета тени (по умолчанию выбран серый).

Яркость – выбор яркости тени.

Текст плана – выбор толщины рамки надписи (при создании, текст обводится дополнительным цветом, что делает надпись объемной).

Наброски цветов – выбор цвета рамки.

Этот этап очень простой. Здесь можно сделать при необходимости рамку для своего будущего баннера.

На скрине ниже показаны варианты рамки (отсутсвует, сплошная, пунктирная, двойная сплошная и двойная пунктирная).

Под рамками находятся другие настройки – цвет, размер, удаленность от границ фона и яркость линии.

2.5 Шаг пятый: сохранение баннера

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


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

. GIF – самый «легкий» формат. Невысокое качество, но и малый размер файла.

. JPG – что-то среднее между двумя предыдущими вариантами.

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

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

3.1 Easy GIF Animator

Очень удобной программой для создания баннеров является Easy GIF Animator, которую можно скачать бесплатно по этой ссылке (около 4 Мб). Хотя сама программа платная (стоимость около 30$), все же первые 20 запусков бесплатны (ознакомительные). Программа создает незамысловатые анимированные GIF-баннеры для сайта.

Установив программу и запустив ее, выберите пункт «Создать анимированный баннер ».


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

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

Далее идет окно создания надписей. Тексты (не более 3 штук) будут следовать один за другим с выбранной задержкой. Для надписи можно выбрать шрифт, размер и цвет. Также указывается выравнивание и эффекты появления/исчезания текстов.

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


3.2 Другие программы для создания баннеров

  1. Banner Maker Pro – еще одна небольшая программа (около 6 Мб), которая дает возможность создавать анимированные несложные баннеры, мини-логотипы или кнопки. Очень проста и удобна в использовании, но ее возможности ограничены.

Друзья, снова рад Вас приветствовать! Сегодня расскажу как легко сделать баннер онлайн. Это необходимо уметь делать, если вам надо что-то прорекламировать и заработать денег.

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

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

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

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

И так, мы зашли на сайт и видим перед собой поля, которые надо заполнить, чтобы сделать баннер онлайн. В первое поле вводим ссылку на тот сайт, на который надо лить трафик. Т.е. надо ввести вашу партнерскую или реферальную ссылку.

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

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

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

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

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

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

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

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

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

2 голоса

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

Сегодня же я расскажу немного о другом методе баннерной рекламы. Речь пойдет не о контексте, но чем-то приближенной. Этот способ заработка элементарен до безобразия и более прибылен.

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

Приступим?

Сервис для создания баннеров

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

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

Ну что ж, давайте начнем.

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

Теперь вводите название проекта. Задайте ширину и высоту баннера, можно при помощи ползунков над кнопкой «Создать баннер» или ввести цифры в по бокам визуального эскиза. Обратите внимание, что представлен он здесь не в полном размере, а всего лишь с сохранением пропорций. Мой результат будет в несколько раз больше.

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

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

Изображения хранятся в одноименной категории и «Разное». Тут есть всякие картинки с подарками, векторными человечками, стрелками и так далее. Выбирайте и при помощи мыши перетаскивайте в нужное место. Я добавил человечка. Если вы передумали использовать какой-то элемент, щелкните по нему и в правом верхнем углу рисунка появится кнопка «Удалить».

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

С основными настройками думаю, что проблем не возникнет. Наверняка вы и сами разберетесь с тем, что такое верхний и нижний цвет, вкругление углов и текст. Я хочу поговорить про Open Link Tab. Так как сама кнопка не анимированная, сменяются только изображения в заданное время, то я рекомендую вам не ставить на нее линк, а использовать ссылку для всей картинки.

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

Теперь можете добавить текст. Здесь тоже нет ничего сложного.

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

Теперь вам нужно щелкнуть на «Получить баннер».

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

Теперь на вашу почту автоматически должно прийти еще одно письмо с поздравлением, что вы сделали свой первый рекламный баннер, а также пароль от личного кабинета и логин. Введите их, и переходите в «Мой кабинет».

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

Чуть ниже появится вам проект и html код, который будет нужно добавить на сайт. Скопируйте его.

Как добавить баннер на все страницы

Откройте и зайдите во вкладку «Внешний вид – Виджеты».

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

Кстати, куда именно вы поместите этот виджет, там он и расположится визуально. Если над «Поиском», как я, то картинка встанет над этой панелью. Если под «Рубрики», то… ну вы поняли.

Вставьте скопированный текст в «Содержимое» и поменяйте информацию в кавычках после «a href» здесь должна быть ссылку, куда будет вести ваш баннер. Измените также текст в кавычках после title. Это добавит вашу подсказку. Сейчас она будет выглядеть, как «Баннер сделан на Баннерович».

Вот так у меня получилось в итоге, после всех изменений.

На всех страницах сайта теперь у меня появился этот рисунок.

Добавляем баннер в записи

Если вы хотите вставить картинку в конкретную статью, то откройте категорию «Записи», а затем выберите ту, в которую хотите добавить картинку или создайте новую.

Откройте вкладку «Текст» в правой верхней части поля ввода информации, вставьте html код, измените ссылку и заголовок. Если после этого вы снова откроете «Визуально», то увидите картинку. Ее можно окружить нужным вам текстом.

Готово. Вот так мой баннер.

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

Кстати, создание баннеров – это уже хороший способ делать деньги. Могу предложить вам курс «Как заработать, создавая баннеры ». Это хобби может приносить от 30 000 рублей в месяц. Главное найти хорошего клиента и знать кое-какие нюансы, позволяющие увеличить количество кликов по картинке.

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


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

До новых встреч и удачи в ваших начинаниях.

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

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

В сервисе есть все необходимые инструменты чтобы сделать баннер быстро и качественно и скачать в нужном нам формате. Доступны несколько форматов изображений готовых баннеров:JPG, PNG и PDF.

Чтобы сделать баннер, достаточно просто начать. Перейдите на сайт конструктора.

  1. Мы можем выбрать готовый дизайн из предложенной библиотеки готовых варантов. По сути, если нас устраивает картинка и оформление, мы можем только заменить текст на свой;
  2. Либо, можно начать создавать с чистого листа, задав нужный размер или выбрав из предложенных форматов (для Фейсбук, Инстаграмм, Постер и др) и загрузив в сервис свою картинку.

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

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

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

Для работы с конструктором лучше использовать браузер Хром, так как я заметил, что Мозиле при сохранении, не вписывается расширение.png — это решается простым переименовываением файла и добавлением нужного (в котором скачивали) точка и название (png или jpg). Вроде все.

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

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

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

Просто возьмите и сделайте баннеры! Хочешь сделать хорошо – сделай сам!