Бесплатно создать баннер

Бесплатно создать баннер
besplatno sozdat' banner

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

 

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

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


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

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

Открываю страницу BannerFans:

bannerfans

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

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

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

bannerfans1_

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

Картинка не на весь баннер (это проще), а на часть создаваемого баннера.

Для создания баннера в сервисе контекстной рекламы madvertising я выбрал специфический размер баннера 390×95, такого размера нет в предустановленных размерах BannerFans, значит мне нужно указать его вручную.
Для этого я установил точку Указать размер, написал размеры по ширине и высоте, и ниже нажал на кнопку Изменить баннер. В верхнем окне смотрю результат изменения создаваемого баннера.

2_

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

3_

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

Далее в блоке Загрузка фонового рисунка: выбираю и загружаю картинку, как Вы видите на скриншоте, эта картинка появилась под формой загрузки. Картинки должны быть в форматах JPG, JPEG, GIF, PNG и не более 450 KB.

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

4

Вот так можно бесплатно создать баннер онлайн.

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

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

На этом этапе создания баннера, я могу открыть вкладку Воздействие и установить для каждой линии свои эффекты: Тень, Расстояние, Цвет и т. д. А могу выбрать без эффектов (No shadow) не забывая нажимать на кнопку Изменить баннер и смотреть, что получается. Во вкладке Пограничная я могу выбрать и настроить вид рамки баннера.

Так как я создаю баннер с текстом на английском языке, то для меня в сервисе BannerFans огромный выбор шрифтов, когда я делаю баннер на кириллице, то выбор шрифтов ограничен, посмотрите сами, кириллица хорошо отображается, когда я, нажав на выбор Шрифта, выбираю шрифты из страницы Stock (Arial, Impact и др.)

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

5

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

6_

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

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

7

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

1. Это обычный код баннера:

<a href=”http://www.BannerFans.com”><img src=”http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg” border=”0″ width=”468″ height=”60″ alt=”BannerFans.com” /></a>

Как и написано прекрасно работает для сайтов блогов и т.д.

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

<a href=”https://leonnik.com/free-software-and-online-services/besplatno-sozdat-banner.html”><img src=”http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg” border=”0″ width=”468″ height=”60″ alt=”Бесплатно создать баннер” /></a>

И скорей всего создав баннер, я скачал бы его на компьютер и после оптимизации изображения, загрузил бы его в библиотеку медиафайлов моего сайта и ссылку на изображение в коде изменил с “http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg”  на ссылку из библиотеки, которая выглядела бы примерно так: https://leonnik.com/wp-content/uploads/2013/08/besplatno-sozdat-banner.jpg

Вот окончательный вариант моего кода баннера:

<a href=”https://leonnik.com/wp-content/uploads/2013/08/besplatno-sozdat-banner.jpg”><img class=”alignnone size-full wp-image-1854″ src=”https://leonnik.com/wp-content/uploads/2013/08/besplatno-sozdat-banner.jpg” alt=”besplatno sozdat’ banner” width=”200″ height=”200″ /></a>

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

Бесплатно создать баннер

Переключился обратно в редакторе  и видим уже не код, а сам баннер.

2. Это еще один обычный код баннера, но только более расширенный:

<a href=”http://www.BannerFans.com”><img src=”http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg” border=”0″ width=”468″ height=”60″ alt=”BannerFans.com” /></a>
<br /><textarea style=”font: 10px Verdana, Helvetica; color: #cccccc; background: #141414; border: 1px #000000 solid; width: 250px;” cols=”40″ rows=”3″ wrap=”auto”><a href=”http://www.BannerFans.com”><img src=”http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg” border=”0″ width=”468″ height=”60″ alt=”Powered by BannerFans.com” /></a>
</textarea>

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

3. Третий код баннера:

http://imagizer.imageshack.com/img538/3716/RTY2iI.jpg

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

  • Первая это адрес на который будут переходить люди при клике на баннер (обычно это партнерская ссылка)
  • Вторая строчка, это адрес, где хранится картинка Вашего баннера.

4 и 5. Эти коды баннера хороши для редакторов на форумах, если Вам нужно к сообщению или комментарию добавить Ваш баннер, воспользуйтесь, этими кодами предварительно изменив ссылки BannerFans на Ваши.

Вот, собственно говоря по кодам созданного бесплатно Вами баннера и все.

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

Если статья была Вам полезна, поделитесь ей в любой социальной сети.  Спасибо.

«Автор: Leonid Nikitin»

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

Как создать логотип онлайн, бесплатно в Canva.

Как создавать красивые картинки для социальных сетей

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

P.S. Есть вопросы, пожелания, предложения о том, как бесплатно создать баннер, напишите, пожалуйста, в комментариях. И пробуйте, экспериментируйте, теперь Вы знаете как можно легко и бесплатно создать баннер.

Как создать бесплатно Анимационный баннер (анимированный баннер)

 

Summary
Бесплатно создать баннер онлайн на русском в BannerFans.
Article Name
Бесплатно создать баннер онлайн на русском в BannerFans.
Description
Бесплатно создать баннер онлайн с помощью бесплатного сервиса на русском языке, пошаговая инструкция.
Author
Leonnik.com

26 комментариев к “Бесплатно создать баннер

  1. Спасибо за полезную статью. Все четко и доступно расписали и показали. Я с легкостью создал банер. Только при нажатии “Получить коды” мне почему выдает ошибку.
    перехожу к созданию анимированных баннеров.

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

  3. Большое Вам спасибо! Всё великолепно описано, не запутаешься. Создала баннер.
    Всё проделала с большим удовольствием. Я Вам очень благодарна. Начну делать анимированый баннер.

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

  5. Здравствуйте !
    BannerFans выдает 5 кодов , поясните пожалуйста назначение каждого.
    С уважением Евгений.

  6. Здравствуйте, Евгений. Извините за поздний ответ, свободного времени нет совсем. Я написал для Вас по кодам в конце статьи.

  7. Здравствуйте, Алесь. Да, так и есть, но текст уплывает вверх на баннерах любого размера и для правильного расположения нам нужно самим захватив левой кнопкой мышки строку текста, перетащить её в нужное нам место. Удобней всего, добавлять текст по одной строке и после нажатия на кнопку “Изменить баннер”, добавлять следующую строчку. Можно конечно сразу все, но они все группируются вверху и их неудобно захватывать для перемещения.

  8. Добрый день,

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

  9. Здравствуйте, Тимур. Я думаю, что Вам нужен размер баннера именно в пикселях (px), а не в сантиметрах, ведь в пикселях и обозначаются размеры баннеров, например, самые распространенные 728х90, 468х60, 125х125 и т. д. В Вашем примере 100х50 если в сантиметрах считать, получается метр на полметра.

    Если брать размер 100х50 а пикселях, Вам нужно в Макете выделить вторую строчку (Укажите размер) в первом поле написать нужную ширину баннера, это 100 на сколько я понимаю, во втором поле соответственно укажите 50 (высота) и внизу нажмите кнопку Изменить баннер. Баннер по умолчанию (728х90) изменится на Ваш размер и Вы уже определитесь, такой размер Вам нужен или нет.

  10. Здравствуйте!
    Создал, все без проблем, автору респект!
    Правда, распечатать не мог долгое время,, нашел прогу RonyaSoft Poster Printer, помогла с этой траблой, держите ссылу: http://www.ronyasoft.com/products/proposter/, удачи.

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

  12. Здравствуйте. Активную кнопку в баннер я не создавал и только “чисто теоретически” представляю, как создать активную кнопку в баннере, но нужно пробовать и смотреть, что получится. Пока подсказать не могу.

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

    Что такое баннер? Баннер это изображение с добавленной ссылкой на отдельную интернет-страницу или сайт.

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

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

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

  13. Добрый день! спасибо Вам огромное за подробную статью! все получилось! подскажите, пожалуйста, а можно ли тут вставлять несколько изображений или только одно? также не подскажите ли Вы сайт или программу для изменения размера логотипов? Размер баннера каждый раз разный и поэтому нужно подстраивать логотип. Спасибо.

  14. Здравствуйте. В BannerFans можно вставить для фона баннера, только одно изображение, но оно может быть и только частью фона баннера, а другую часть можно залить нужным Вам цветом. Это все выбирается на странице, когда Вы выбираете “Я хочу, чтобы загрузить свое изображение”.

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

    А менять размеры разных изображений я предпочитаю в бесплатном редакторе и программе для просмотра графики FastStone Image Viewer (эта программа, много чего умеет) Для изменения размера нужно выделить нужное изображение и нажать сочетание клавиш Ctrl + R, а для сохранения изображения с новым размером сочетание Ctrl + A. Ссылку на официальный сайт этой программы Вы увидите в конце статьи о сервисе Canva

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

  16. Я без заморочек скачиваю готовые шаблоны, макеты всяких баннеров визиток на stock.fotoump.ru и редактирую их онлайн как мне нужно. Ещё есть огромный плюс в этих готовых шаблонах они все в формате svg тоесть можно изменить размер без потери качества баннера или визитки.

  17. Можно и готовые шаблоны скачивать, но не всегда можно найти подходящий. Часто бывает, что лучше сделать баннер с ноля своими руками, особенно, когда хочется добавить собственный фон для баннера. И никаких заморочек я не вижу при создании баннера с ноля. Оптимизация изображений, вещь полезная для любых форматов изображений, обычно я использую для уменьшения веса изображения, сервис CompressNow, там можно оптимизировать изображения в форматах JPG, JPEG, GIF, PNG.

  18. Текст на русском он не понимает, вместо него только квадраты

  19. Так и есть. Если делаете баннер на русском, выбирайте шрифт из шрифтов Stock (Arial, Impact и др.). Я предупреждал об этом в статье.

  20. Я для создания своих баннеров использую готовые макеты, шаблоны баннеров на stock.fotoump.ru и редактирую их онлайн

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

Оставить комментарий