Создание сайта/блога на WordPress — что может быть проще!
как сделать баннер для сайта
Рубрика: Все для вебмастера

Часть1: как сделать баннер для сайта «Программы и инструменты»

12 комментариев   

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



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

Кстати, написал подробный обзор популярного скрипта БаннерБро — который продает баннеры на автомате!

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

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

А в наш век безудержного Интернета не обойтись без нее и на страницах ресурсов сети.

Конечно, можно просто наполнить сайт обычными словесными рекламными призывами, что, кстати, очень часто и делается в том же Google AdWords. Это быстро и очень неплохо работает.

Преимущества такого подхода:

  • скорость создания – по существу затраченное время не больше времени набивки строки текста;
  • возможность оперативного изменения.

Но, прямо скажу, такой подход сродни простому объявлению в газете в рубрике «Услуги» «на 5-ой странице».

Если же вы хотите, чтобы на Ваше предложение было обращено повышенное внимание, чтобы мимо него никак нельзя было пройти, то тут не обойтись уже без её художественного оформления в цвете и на «первой странице».
kak-sdelat-banner-dlja-saita-003Вот тогда, мы и задумываемся сделать баннер для сайта и какие программы для этого использовать. Здесь необходимо будет решить несколько организационных вопросов.

Характер и размеры баннеров

Когда говорим о характере, то имеем в виду: сделать его статичным или он будет Анимационный. Всё-таки останавливаемся именно на использовании анимации, хотя она и требует аккуратного её использования, когда действовать приходится по принципу «не навреди».

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

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

Плохой линией поведения является ситуация, когда рекламные баннеры скрываются в виде невидимых слоёв. Они появляются благодаря, например, событию onmouseover (а хуже всего – onload), присвоенного любому видимому объекту на сайте.

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

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

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

Если следовать принципу – «учись на старших глядя», привожу популярные размеры баннеров для сайта и те, которые рекомендует служба GoogleAdSense (ширина x длина):

  • Горизонтальные — 468×60; 728×90; 320×100;
  • Вертикальные — 240×400; 300×600; 336×280; 300×250;
  • Квадратные — 250×250; 200×200; 300×300 и так далее...
  • Адаптивные — тренд сезона! Хорошо подойдет под адаптивную верстку. Такой баннер подстраивается под ширину экрана.

Инструменты и программы для создания баннера

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

Статичный JPG – был и остаётся самым известным графическим форматом для Web-дизайнера. Как показывает анализ, из каждых 100 графических файлов, которые размещены на сайте, не менее 70 имеют jpg-формат.

Для работы со статикой лучшей программой является — Adode Photoshop во всевозможных своих версиях – уже в 7-ой есть практически все инструменты, которые позволят создать прекрасный рекламный баннер.
kak-sdelat-banner-dlja-saita-001В принципе можно использовать любой подобный редактор, главное чтобы он имел следующие функции:

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

Анимированный GIF – самый известный формат. Для создания таких файлов можно использовать несложную программку Easy GIF Animator.

Но советую воспользоваться Image Ready, входящую в пакет Photoshop, как самостоятельную программу в версиях 7 и CS, или как внутренний инструмент самого Фотошопа. Ценность IR заключается в полной поддержке родного многослойного формата PS, а также в преемственности интерфейса.
kak-sdelat-banner-dlja-saita-002Новичкам советую выбрать IR в виде самостоятельной программы, она и проще и понятнее, без тех наворотов, которые уже предлагает PS CS5 и которые большей частью не имеют никакого значения.

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

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

Онлайн сервисы и специальный софт

Для особо притязательных, публикую несколько ссылок на on-line сервисы и программы, которые помогут сделать задуманное... ;)

  • Banner-Maker-Pro
  • Banner-Designer-Pro
  • Banner-Design-Studio
  • Ulead-Gif-Animator
  • Sothink-SWF-Easy
  • AleoFlash-Intro-Banner-Maker
  • Atani
  • Websmartz-Banner-Designer-Pro
Из за большого количества ссылок, не буду делать их активными — просто скопируй и вставь в адресную строчку браузера. А проги погуглите в ПС...

На этом я заканчиваю 1 часть статьи — как сделать баннер для сайта! Надеюсь Вам все понравилось и Вы узнали что то новое для себя... Скоро опубликую 2 часть не менее познавательную :razz:

P.S: Кстати будет круто, если Вы поделитесь в комментариях своим опытом и знаниями в этой области. Какой софт или сервис предпочитаете? А может и не стоит париться и заказать работу у спеца?! Пишите...

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

А я с Вами не прощаюсь :) До скорого!


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 12 комментариев


  1. Александр Приколист 2015-04-09 в 20:27 

    Я пробовал делать баннеры с помощью AleoFlash-Intro-Banner-Maker прикольная программа для анимированных баннеров но сохранять готовый лучше в формате SWF (флеш) в данном формате он будет весить несколько кб ( тот же баннер в формате gif будет весить несколько мб , естественно для воспроизведения понадобиться код такой же как и для флеш игр.

    Ответить
    • Владимир Савельев 2015-04-09 в 22:04 

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

      Ответить
      • Александр Приколист 2015-04-10 в 18:51 

        Вова да я методом тыка делал и по моему прикольные получились

        Я даже видео по ней записывал — в статье есть пример баннера и ссылка на другие примеры)

        Но как я уже писал выше сохранять нужно не в формате gif а я сохранял раньше именно так и они тяжеленные по весу

        Сама статья ( перед ссылкой поставлю тире чтоб не активна была)

        _http://put-k-uspehy.ru/kak-sdelat-banner-dlya-sajta-za-10-minut-s-pomoshhyu-programmy-aleoflash-intro-banner-maker/

      • Александр Приколист 2015-04-10 в 18:51 

        Блин всё равно ссыль активная Вова подправь

    • Игорь 2015-06-30 в 23:50 

      Спасибо за разжеваный коммент

      Ответить
  2. Александр Белый 2015-04-11 в 09:52 

    Классная статья получилась. Здесь все доступно описано плюс монетизирована.

    Ответить
    • Владимир Савельев 2015-04-11 в 10:41 

      :oops: А ты Саша баннеры сам делаешь или заказываешь?

      Ответить
  3. Никита Волков 2015-04-11 в 16:42 

    Как раз скоро понадобится баннер делать)) Буду ждать вторую часть статьи)

    Ответить
  4. Баннер 2015-05-10 в 16:33 

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

    Ответить
    • Владимир Савельев 2015-05-10 в 17:51 

      В принципе можно :razz: Если очень захотеть можно в космос улететь :lol: После изучения курса Сергея Буйбарова ссылка в статье, будет все под силу...

      Ответить
      • Сергей 2015-11-17 в 18:35 

        Это точно ;-)

  5. Игорь 2015-06-30 в 23:51 

    Собираюсь тоже банер сляпать

    Ответить

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

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Готовые шаблоны для WordPress