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

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

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

Что включает в себя веб-баннер:

  1. Графическое изображение;
  2. Рекламный текст;
  3. Гиперссылку на рекламируемую страницу.

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

Распространенные типы баннеров

1. Статический плакат

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

2. Слайдер

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

Для создания слайдера любого размера на сайте WordPress рекомендую использовать плагин Content Slide.

3. GIF-анимация

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

4. Flash-анимация

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

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

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

1. Онлайн-сервисы

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

Представлю два бесплатных, понравившихся мне сервиса.

Banner FANS

BannerFans - создать баннер онлайн

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

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

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

Удобный сервис, позволяющий быстро создать простой и без излишеств баннер для своего сайта.

Гифовина

Гифовина - анимированный баннер онлайн

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

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

2. Специальный софт

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

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

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

Ulead Gif Animator

Ulead Gif Animator - программа для создания баннера для сайта

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

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

Я заменил текст бегущей строки шаблонного баннера программы, и вот что у меня получилось:

Баннер

Easy GIF Animator Pro

Easy GIF Animator Pro - программа для создания баннеров

Этот софт проще, чем предыдущий.

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

Вот мой баннер, созданный в Easy GIF Animator Pro менее чем за минуту:

Animirovannihyj-Banner

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

3. Заказать дизайнерской студии или фрилансеру

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

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

Хорошего исполнителя заказа вы быстро найдете на биржах фриланса, например таких как frilans.ru.

4. Вручную в графическом редакторе

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

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

Фотошоп

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

Microsoft Power Point

Программа, входящая в установочный пакет Microsoft Office. Высока вероятность того, что она у вас уже установлена вместе с Microsoft Office Word.

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

Paint.net

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

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

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

Баннер делается ссылкой как любое другое графическое изображение. Для этого загрузите его на любую страницу своего сайта.

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

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

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

HTML код баннера

Обратите внимание, чтобы рекламируемая страница открывалась в новом окне, к ее ссылке добавьте атрибут target="_blank", как на картинке.

Тем, кому я помог создать баннер для своего сайта, предлагаю поделиться здесь своим творением. Просто скопируйте его HTML код в форму комментария. Дополнительная реклама вашему сайту не помешает :-).

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

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

Страница 1 из 11
  • Kg говорит:

    Из перечисленных программ пользовался Ulead Gif Animator, действительно легкая и удобная программка. Однако пробовал чисто в экспериментальных целях. А для сайта баннер не делал, где-ж его располагать то?

  • Станислав говорит:

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

  • XakerFaker говорит:

    Больше всего, мне понравилась программа для создание баннеров Ulead Gif Animator. Для своего сайту Я делал с программы Camtasia Studio 7. Спасибо!

  • Антон Титов говорит:

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

  • Валентина говорит:

    Роман, спасибо огромно! Как раз возникла необходимость сделать баннер, а тут Ваша статья и так много способов)) На днях займусь 🙂

    • Руслан Носов говорит:

      С онлайн сервисами проще всего работать. О большинстве из них узнал впервые.

  • Наталья говорит:

    Большое спасибо.Очень полезный у Вас сайт, и урок про баннер в фотошоп.Да и по оптимизации картинки - тоже. Вобщем,буду у Вас учиться.Вы не советуете загружать картинки свыше 50кб, а я сделала флеш-часики (swf), они весят почти 61 кб и Вордпресс их не загружает, а так хотелось бы.У меня по специфике сайта много картинок. Как Вы считаете, все таки не стоит так загружать сайт?Спасибо. Наталья.

    • Роман Ваховский говорит:

      Здравствуйте Наталья! Что-то не припомню, чтобы я советовал ограничение в 50кб для картинок. Может опечатка в тексте. Главное, чтобы картинка была оптимизирована без потери качества, и вес ее не был бы запредельным. А у WordPress ограничение на размер загружаемого файла 1000Mb (очень большой размер, наверное разработчики что-то напутали) .Странно, что ваши часики не загружаются. Попробуйте еще.
      Если картинок совсем много, что даже места на хостинге не хватает, можно их загрузить на фотохостинг и вставлять на свои страницы через ссылки, но это совсем крайний случай.

  • Елена говорит:

    Спасибо за статью, она помогла мне за пару минут сделать простенький баннер для моего блога

  • Alex говорит:

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

  • Alex говорит:

    Роман! Я все сделал по вашему описанию. Получилось отлично, но... какое-то время баннер нормально открывался у партнера. а теперь перестал. У меня открывается. Код один и тот же, что у меня, что у партнера. В чем может быть проблема?.

    • Роман Ваховский говорит:

      1. Советую сделать так, чтобы можно было-бы легко скопировать html код баннера. А то лезть в код страницы и искать его там не каждый пожелает.
      2. Если партнер Исторический портал Северского района, то баннер там нормально отображается, но он некликабелен. Видимо партнер исправлял код, чтобы убрать ссылку, что-то там напортачил, а потом исправил. Ссылки в коде баннера нет.

  • Alex говорит:

    Роман, большое спасибо. Я подозревал, что-то в этом роде, но человек упорно пишет, что сам "не знает в чем дело". Я ему по почте пересылал код. Честно говоря, у него на сайте вообще все ссылки хитрым образом спрятаны, то есть, если не погуляешь по сайту - не поймешь, что они у него есть. И поначалу он так же спрятал мою ссылку, пока я не возмутился.Собственно, не я предлагал обмен баннерами; у меня сайт хоть и медленно, но все больше привлекает подписчиков, так что я, наверное, откажусь от такого сотрудничества, хотя хотел помочь парню набрать людей.)

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

  • Alex говорит:

    Партнер все исправил, забыл в коде пробелы поставить. Спасибо за консультацию.)

  • Баннер говорит:

    Как думаете, а такие баннеры http://www.bandesign.ru/portfolio.php?s=0 сложно сделать самому?

    • Роман Ваховский говорит:

      Сделать не сложно, сложнее проявить фантазию для таких баннеров.

  • Надежда говорит:

    Может косо и криво, но у меня получилось!!!!!!!
    Благодарю, автора статьи!!

  • Владимир говорит:

    Баннер - это реклама. И лучше не скупиться, когда рекламируешь свою компанию.
    Лучше заказать у профессианалов !

  • allvolley.ru говорит:

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

      • dalbert говорит:

        Я попробовал - специально заточено под создание банера. HTML и CSS можно править. Инструментарий как в Fotoshop. Рекомендую.

  • Евгения говорит:

    Хорошая статья. всё доступно расписано. Я дополнительно зарабатываю, создавая банеры.

  • Евгения говорит:

    Хорошая статья. Четко и понятно. Вот бы ещё и заказчик не был очень вредным)

  • Алевтина говорит:

    Сделала баннер в Gifovina.ru, а как его разместить на wordpress не знаю. Попробовала разместить в соцсети гр.VK, Facebook отображается только первая картинка

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу

Все права защищены © 2011-2016. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.