Урок 37 Как сделать баннер на сайте, баннер что такое

03.09.201618583

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


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

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

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

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

  1. Статическая картинка, не изменяемая со временем.
  2. Динамическая картинка в виде мультипликации или анимации.

Что статический, что анимационный баннер для сайта, при нажатии на него мышкой, перенесет вас на рекламируемый сайт, страницу или товар. Конечно же Ctr (количество нажатий на баннер деленное на количество просмотров) будет тем выше, чем качественней, красивее, креативней будет выполнен баннер. На сегодняшний день используют 2 технологии создания баннеров:

  • С использованием Flash (баннер флеш) технологий.
  • С использованием Gif рисунков при анимированном баннере.

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

  • Баннер 468х60 - самый распространенный в интернете размер.
  • Размер 100х100.
  • Размер 250х250.
  • Размер 728х90.
  • Размер 234х60.

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

Баннер, как сделать самому

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

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

Рекомендую вам увеличить размер создаваемого изображения в 10 раз, то есть если вы хотите сделать баннер размером 468х60, то создавай новый файл сделайте размер 4680х600, вам гораздо легче будет работать с таким форматом. Впоследствии по окончании работы вы можете уменьшить баннер до нужного, установленного размера.Сохранить созданный файл необходимо с расширением .JPG

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

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

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

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

баннер что это такое

Теперь осталось дело за малым, установите время например 0,1 секунду для каждой картинки, полученный результат вы можете проиграть в плеере и посмотреть, что у вас получилось. Для придания плавности, нажмите кнопку создать промежуточные кадры (между кнопкой плеера и кнопкой создании копии анимации).

А в последнем кадре анимации, также нажав на кнопку создания промежуточных кадров, укажите, что это первый кадр. Если вас все устраивает сохраняем, выбрав в меню, сохранение для web и устройств, баннер в формате .Gif  (вкладка должна иметь название оптимизация) и любуемся красотой нового баннера). Баннер-пример (образец), который получился у меня:

баннер

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

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

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

<a href="http://сайт_куда_направляет_баннер/" target="_blank"><img src="http://путь_к_баннеру.gif" alt="описание"></a>

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

Для вставки баннера в статью вам необходимо отредактировать файл Single.php, и найти там код вывода поста, у меня он прописан так:

<div id="post-<?php the_ID(); ?>" class="article">

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

Если вы хотите, чтобы баннер выводился в самом низу вашей статьи, то вставляйте код вывода баннера в самом низу файла Single.php, не бойтесь экспериментировать, если не до конца понимаете куда вставлять код, вставили в одно место - посмотрели, если не там удалили и переставили в другой.

И так, методом проб и ошибок вы подберете подходящее место, тоже самое касается и вывода баннера в шапке. Для этого вставляйте код в файл header.php.

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

Всем спасибо!

Не забудьте посмотреть видео как сделать баннер на сайте!