Как сделать (создать) самому рекламный баннер онлайн и почувствовать себя профессиональным дизайнером

Время чтения статьи: примерно 6-8 минут.

Сделать баннер онлайн

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

Здравствуйте друзья!

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

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

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

Создание баннера онлайн на бесплатных сервисах

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

Вот они:

1) bannerovich

2) Banner Fans

3) printdesign

4) artbanner

5) banner-s

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

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

После тщательного отбора, мой выбор пал на онлайн сервис Bannerovich и именно ему я посвящаю свою статью!

Как сделать баннер онлайн, в сервисе Bannerovich.ru

Как только вы зайдёте на сайт Bannerovich.ru, увидите справа голубую кнопку «Создать баннер». Жмёте на неё и попадаете сюда:

Создать баннер

Здесь всё интуитивно понятно. Вверху пишите название баннера, а ниже выбираете его размеры, в зависимости от его будущего месторасположения на блоге. Сейчас я буду создавать баннер для сайтбара, значит мне нужно выбрать ширину сайтбара — 240 px и высоту — 400 px. Нажимаете на «Создатъ баннер» и попадаете сюда:

редактирование баннера

Вот сейчас всё только начинается.

Первым делом можете создать рамку (границу) для баннера. Нажимаете на кнопку «Другие элементы» ⇒ «Редактировать границу» и у вас откроется окошко, в котором можно выбрать цвет рамки и её ширину.

Редактирование границы баннера

После этого нажимаете на «Закрыть окно» и идёте дальше.

Загрузить фон — если нажмёте на эту кнопку, то сможете загрузить собственный, заранее подготовленный фон для баннера. Такой фон можете создать самостоятельно через специальные программные редакторы или скачать с интернета. Лично я покажу вам как воспользоваться разными фонами, которые предлагает сервис bannerovich.ru

Добавить фон — нажимаете на эту кнопку и у вас появится большой выбор интересных фонов.

Загрузить фон для баннера

Как видите, выбор просто огромный. Для примера я выбрал фон, который называется «Лёгкая линия»

Кстати, почитайте эту статью тоже:   Проверить скорость загрузки сайта. Обзор 13 популярных сервисов

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

Фон и рамка баннера

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

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

Добавить изображение в баннер

Из всеx изображений я выбрал картинку под названием «Хорошая работа» Так это выглядит:

Картинка в баннере

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

Подвинуть картинку в баннере

Добавить кнопку — нажимаете на этот пункт и в баннере добавится красивая кнопка:

Добавить кнопку в баннер

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

Редактирование кнопки

Как вы можете видеть, графический редактор в сервисе bannerovich.ru очень многофункциональный. Чего только нельзя в нём сделать: округление углов, прозрачность, размеры, отступы, тени, пробелы, шрифты и ещё многое другое.

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

Разное — если нажмёте на эту кнопку, то перед вами появится окно с дополнительными многочисленными картинками.

дополнительные картинки сервиса bannerovich.ru

Здесь также достаточно большой выбор картинок. Давайте я добавлю в мой баннер две 3D стрелочки. Получилось так:

Добавить стрелки

Далее я нажал снова кнопку «Изображение» и выбрал другую картинку под названием «Большая кнопка» Уменьшил её по желаемому мной размеру и вот что получилось:

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

Добавить текст — нажимаете на эту кнопку и увидите, что появится текст в баннере. Нажимаете два раза на этот текст и перед вами откроется редактор.

Редактирование текста bannerovich.ru

Здесь вы может редактировать ваш текст, как только пожелаете.

И так, прошу любить и жаловать мой новый баннер:

Баннер, сделаный через сервис bannerovich.ru

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

Как получить и скачать баннер с сайта bannerovich.ru

После того, как ваш баннер будет готов, вы должны нажать на кнопку «Получить баннер» и у вас откроется такое окошко:

Скачать баннер с сервиса bannerovich.ru

Здесь в верхней строчке пишете свой e-mail, а в нижней вставляете ссылку на ту страницу, которая будет открываться при клике на баннер. Далее нажимаете на жёлтую кнопку «Получить баннер» и он сразу же начнёт создаваться сервисом bannerovich.ru

Кстати, почитайте эту статью тоже:   Маленький, да удаленький! Как уменьшить размер и вес картинки в 30 раз, не теряя её качества

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

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

Мой кабинет в сервисе bannerovich

Все личные данные (пароль и имя пользователя) вы получите по своей электронной почте.

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

html код для баннера

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

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

Сохранить картинку как

Далее заливаете картинку на ваш сайт через FTP клиент или через административную панель.

Как установить баннер на сайт

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

Далее пишете заголовок для баннера и в окошке вставляете этот код:

<a href="ссылка которая ведёт на желаемую страницу при клике на баннер">
<img src="Ссылка на картинку баннера" 
title="Название баннера" border="0" style="margin: 5px; 
border: 0; padding: 0;" /></a>

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

Например, у меня это будет выглядеть так:

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

Чтобы узнать ссылку на картинку баннера, вам нужно зайти в «Медиафайлы», выбрать нужную картинку и нажать на неё и слева увидите ссылку на файл.

Ссылка на файл

Вот её и вставляете в соответствующее место в коде.

Ну вот в принципе и всё.

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

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

А я с вами прощаюсь и до новых скорых встреч. Пока-пока.

С уважением, Игорь Черноморец

Если вам понравилась статья - поделитесь ею в социальных сетях с друзьями!

Подпишитесь на обновления блога!

Введите свой e-mail адрес

К записи "Как сделать (создать) самому рекламный баннер онлайн и почувствовать себя профессиональным дизайнером" оставлено 76 коммент.
  1. Вот спасибо! я тоже фотошоп не могу освоить, никак не получается. Буду вечером разбирать твои инструкции, стану мастером по баннерам smile

    • Привет Галочка! Сразу же тебя предупреждаю, баннеры через онлайн сервисы по любому не могут быть настолько профессиональны, как например через специальные программы или через услуги профессиональных дизайнеров. Но для начала это как раз то что надо! Мне было бы очень интересно посмотреть на твоё произведение искусств после создания баннера через этот сервис. Ведь всё зависит от фантазии, а у тебя её огого сколько 03

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

    • Привет Сергей!

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

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

  4. Ой, прям прыгаю до небес — с непревзойдённым юмором и — тем более — профессионализмом!!! Вот это разрекламировал….  Благодарю!  До профессионализма ещё далековато будет, но я обожаю фотошоп и работаю там в удовольствие! А сервер мне понравился — бывает заказчик, которому горит и ничего сложного не надо — вот тогда им и воспользуюсь!А тем, что не освоили фотошоп — милости прошу — сделаю дёшево, а, иногда, и бесплатно, поскольку я вас всех давно знаю и люблю! Фотошоп — это моё хобби, я его освоила ещё до блогинга! Как вспомню реки сдёз — смешно становится….

    • Галка, а у тебя нет желание на блоге уроки по фотошопу нам написать? Ты объяснять умеешь, я у тебя все понимаю.

      • Присоединяюсь к просьбе Гали Некрасовой 02

        • Уроков очень много есть от настоящих профессионалов — у меня просто хобби!Ну, и если быть честным, то это у меня было три месяца каждодневных заданий, которые меня просто выбешивали ибо не получались, сидела за компом целыми днями, даже плакала. В основном, во сне приходило решение….А потом появился блог и я на нём некоторые картинки переделывала из интернетовских. Это я о том, что очень это трудоёмкое занятие. Я сама не до конца знаю все его возможности.Разве что основы? И то не пойдёт — много инструментов!

        • Заходи — первый урок по фотошопу уже на блоге! Уболтали вы меня с Галкой Некрасовой…14

          • УРА! я уже побывал у тебя в гостях и посмотрел твой супер урок! Комментировать не успел, надо было работать. Скоро отблагодарю тебя от всей души у тебя, а пока что здесь пару слов….
            Галя, когда я написал, что у тебя непревзойдённый юмор, обаяние и профессионализм, я не ошибся! Огромное спасибо тебе за поздравление и за такой качественный урок по фотошопу! 17

            • рада, что понравился урок! Но, если честно — его бы надо сократить — боялась я редактировать. Хотя в этом есть плюс — все всё увидели с начала и до конца без вырезания. Возможно, кому-то и так пригодится…11

      • Галка, хвастаюсь — уже сделала, но побоялась редактировать… Длинный вышел, надо было вырезать много чего. Зато следующий будет лучше….

        • Классный урок, Галочка! ничего не делай больше, только испортишь. Рада, что у тебя получилось со звуком.

          • Получилось со звуком благодаря Камтазии — там это просто, как оказалось… Правда, я весь день пробовала в Аудасити, но — вспомнила, что у меня есть Камтазия — и звук получился!Спасибо, Галочка, за похвалу…

    • Ну а что? как думаю, так и говорю! А разве кто-то захочет поспорить на счёт того, что у тебя непревзойдённое чувство юмора? Пусть только попробуют 30

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

  6. Красивенькие баннеры выходят. И достаточно просто. Здорово! Чего только нет в Интернете22

    • Здравствуй Людмила!
      Так тебе тоже понравился баннер? Я рад.
      Согласен с тобой, что через этот сервис очень просто сделать совсем неплохой баннер, так что попробуй.

  7. Потрясно! О таком сервисе слышу впервые. Однако горю желание создать свой собственный баннер уже давно) Спасибо, Игорь! 

    • Здравствуй Илья! Я очень рад, что информация этой статьи оказалась тебе полезной! Давай делай баннер через этот сервис, а потом покажи мне и всем. Уж очень интересно посмотреть на работы других блогеров.
      Спасибо тебе за комментарий Илья

  8. Привет, Игорь. Хорошая подборка, да и баннер классный получился 28 А как с продажами? Есть покупатели?

    • Спасибо Андрей! Рад что тебе понравилось. Как с продажами? Великолепно 03До сих пор продал аж…0 07

      • Главное не сдавайся!

        • Ну…я не сдаюсь, хотя, мне мало верится, что выйдет из этого что-то грандиозное. Дело в том, что на такое предложение могут обратить внимание только новички. Таким как вы акулам блогинга, это уже давно не нужно! Вы уже достаточно курсов понакупались, поэтому здесь нужна наверно контекстная реклама, директ и т.п. Ну ладно, буду думать что да так

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

  10. Как у вас здоров все написано и главное понятно. Захотелось попробовать.

    • Здравствуй Лена! Спасибо за то, что оценила статью. Обязательно попробуй, мне будет интересно посмотреть, что из этого выйдет.
      А можно вопрос? В своём имени ты вставила партнёрскую ссылку на курс Борисова07 Это кто тебе советовал так делать? Лично я советую тебе так больше не делать, так как авторы многих блогов за такое сразу банят 06
      Подобные ссылки можешь вставлять на форумах, или на каких-то коммерческих сайтах, но не на авторских блогах, хорошо? Ты только не злись на меня, это чисто дружеский совет 17

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

    • Привет Ni4ka!
      Да, ты права, тому, кто не умеет рисовать (как я) этот сервис окажется кстати!
      А вот ты говоришь, что у некоторых фирм баннеры еще хуже…это намек на то, что мой баннер настолько плох? 01

  12. Марина:

    Здравствуйте, Игорь!
    Не могу вставить ссылку на переход, у меня даже нет такой графы, только код верификации и поле для почты и все!Что делать?

    • Здравствуйте Марина! Если вывидите строку скодом верификации и строку с почтой, значит выдо сих пор не зарегистрировались в сервисе. Проверьте ваш email там должен быть код, вставьте в строку и тогда высможшете зайти в личный кабинет. Там уже будет ваш баннер. Скачаете его и тогда установите ссылку на пережод, как показано в статье. 

      Или я вас не правильно понял?

  13. Константин:

    Здравствуйте!Скажите,что надо добавить в код баннера,что бы он открывался в новом окне?
    <a href=»http://bannerovich.ru/»><img src=»http://bannerovich.ru/makebanner/output/bannerovich_ru_file_2949_353x151(PRJ3425).jpg» title=»Баннер сделан в http://www.bannerovich.ru» border=»0″ style=»margin: 5px; border: 0; padding: 0;» /></a>
    Пример кода.

    • Здравствуй Константин. Для того, чтобы баннер отркывался в новом окне, нужно добавить атрибут   target=»_blank»

      Добавь его перед закрывающей скобкой > сразу же после этого — a href=»http://bannerovich.ru/

      В конечном итоге код баннера получится такой: 

      a href=»http://bannerovich.ru/» target="_blank"><img src=»http://bannerovich.ru/makebanner/output/bannerovich_ru_file_2949_353x151(PRJ3425).jpg» title=»Баннер сделан в http://www.bannerovich.ru» border=»0″ style=»margin: 5px; border: 0; padding: 0;

      Обязательно уведомите меня, получилось ли или нет, хорошо? 

  14. Василиса:

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

    • Здравствуй Василиса. Спасибо за оценку статьи.

      С одной стороны я с вами согласен, нет смысла платить за простую картинку, но…ключевое слово это -простая картинка!

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

  15. Svetlana:

    Банер можно сделать, но он бесполезен, поскольку ссылку для банера вставить нельзя. Что делать?

    • Здравствуй Светлана!
      Что значит нельзя вставить ссылку? Я же показал в статье как это делать. Другое дело, если у вас нет своего сайта…тогда вам нужно действовать немного подругому.
      Скажите Светлана, у вас есть свой сайт? Куда вы хотите установить свой баннер?

  16. Привет, Игорь! Прикольная статья! Мне очень понравилось. Главное очень быстро можно создать баннер! Спасибо! 

  17. Крутой сервис, и расписано круто. Пишешь подробно. Только этому сервису не хватает анимации, тогда бы вообще было круто.

  18. Здравствуйте, Игорь. Очень понравился Ваш блог. Много полезной информации, особенно для новичков. Сделала сама баннер по Вашей инструкции, вроде бы получился неплохой, спасибо. Я хотела подписаться на блог, но что — то не пойму, ввела капчу, а дальше все идет на английском, почему? И на почту ничего не пришло. 

    • Здравствуйте Людмила! Я очень рад, что вам понравился мой блог. Буду рад видеть вас частым гостем 17

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

      В лубом случае, спасибо за добрые слова и за комментарий

  19.  Добрый вечер, Игорь. Проверила почту, приходят сообщения о коментариях и все. Это и есть подписка? По поводу банера: в последнем окошке у меня было не «вставить ссылку на сайт», а код верификации. И теперь в коде баннера нет моей ссылки. Мне нужно, чтобы клик по баннеру вел на мой сайт, как это сделать? 

    • Людмила, то что приходят вам на почту уведомления о комментариях, не говорит о том, что вы подписаны на обновление блога!!!

      Проверьте пожалуйста папку «спам» там должно быть письмо с фитбернера и в нем будет ссылка для активации. После перехода по ссылке…вы станете подписчицей моего блога.

      По поводу баннеров…я завтра свяжусь с вами по email  и покажу что надо делать. Хорошо? 

      Просто сейчас не могу (по личным причинам) 

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

    • У меня фигурирует, что вы подписаны, но не активированы. То есть, не прошли по ссылке активации, которая приходит по email. Попробуйте снова подписаться и если не получится, то я пришлю вам полную инструкцию (скриншоты) на ваш email.

  21. Все, я активировала подписку, спасибо, что помог 

  22. Здравствуйте. Спасибо Вам за статью,очень полезно,но немножко я Вас дополню. 
    Я как-то тоже задалась целью создать баннер для своего сайта,точнее сказать форума и наткнулась на такую проблему как у Людмилы. Кликая по баннеру он меня  не переносит на мой сайт,а переносит на сайт конструктора dash . Как это решить  покажу наглядно. 
    Вот стандартный код моего баннера
    <a href=»http://bannerovich.ru/»><img src=»http://bannerovich.ru/makebanner/output/bannerovich_ru_file_2679_240x70(PRJ4756).gif» title=»Баннер сделан в http://www.bannerovich.ru» border=»0″ style=»margin: 5px; border: 0; padding: 0;» /></a>
    А вот код уже мной отредактирован 
    <a href=»http://22lr.net.ua/»><img src=»http://bannerovich.ru/makebanner/output/bannerovich_ru_file_2679_240x70(PRJ4756).gif» title=»http://22lr.net.ua» border=»0″ style=»margin: 5px; border: 0; padding: 0;» /></a>
    Посмотрите внимательно и сделайте выводы. Все,всем спасибо. kiss 

    • Здравствуй Александра. Благодарю за дополнение к статье, но…на самом деле, я упомянул этот момент 07 

      Я об этом написал под заголовком «Как получить и скачать баннер с сайта bannerovich.ru» Почитайте ещё раз и вы в этом убедитесь.

      В любом случае, спасибо вам за комментарий 17

  23. лиля:

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

    • Здравствуй Лиля. Я отвечу на ваш упрек и докажу обратное в том случае, если вы докажите мне, что вы не бот, а настоящий комментатор. Просто не хочется тратить собственное время на роботов  search 

  24. лиля:

    А еще, когда я стираю куки у этого сайта (igorchernomoretz.com), то мой комментарий чудесным образом пропадает….. С чего бы это……

    • Ну конечно же ваш коммент пропадает, ведь до этого момента он был под моей модерацией и не был опубликован. Попробуйте сейчас почистить куки и проверьте, проподает ли ваш коммент smile

  25. лиля:

    Вы «как-бы» обманываете посетителей Вашего ресурса. Они думают, что коммент опубликован. А теперь расскажите мне, чем так хорошо вставлять код чужих сайтов себе на страницы?

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

Поиск по сайту
Следите за новостями блога

Подпишитесь на обновление блогa и получайте первыми на ваш Email, новые статьи!


Реклама
© 2016    Блог Игоря Черноморца    //    Войти   //    Вверх
Яндекс.Метрика