Перейти к содержимому

14 ноября, 2012

8


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

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

Создать свой баннер можно тремя способами:

  1. через программы (например фотошоп)
  2. через онлайн сервис (пример в статье)
  3. заказать у профессионалов (например фриланс)

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

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

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

Использование баннеров на практике:

Использование рекламных баннеров на сайте сегодня необходимость от которой никуда не деться. Размещение баннеров — это один из наиболее действенных рекламных видов в интернете (как заработать на размещение рекламных баннеров).

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

88 x 31_________ микро полоса
100 x 100 квадратный маленький
120 x 60 кнопка 2
120 x 90 кнопка 1
125 x 125 квадратная кнопка
120 x 240 вертикальный баннер
120 x 600 небоскреб
160 x 600 широкий небоскреб
180 x 150 прямоугольник
234 x 60 половина длинного баннера
240 x 400 вертикальный прямоугольник
250 x 250 всплывающий квадрат
300 x 250 прямоугольник средней величины
300 x 600 объявление на полстраницы
336 x 280 большой прямоугольник
468 x 60 длинный баннер
500 x 100 горизонтальный
600 x 90 горизонтальный средний
728 x 90 горизонтальный (ведущий) длинный

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

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

Ссылка на сервис.

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

Как сделать свой баннер используя WordPress

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

Этот способ подходит только для создания баннеров такого формата, как изображение при нажатие на которое пользователь перенаправляется по ссылке, но все же для общего сведения и для закрепления редактирования HTML-кода баннеров будет полезно просмотреть данное видео:

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

Какие цвета использовать при создании баннера:

  • — синий на белом;
  • — черный на желтом;
  • — зеленый на белом;
  • — черный на белом;
  • — зеленый на красном;
  • — красный на желтом;
  • — красный на белом;
  • — оранжевый на черном;
  • — черный на пурпурном;
  • — оранжевый на черном;
  • — черный на пурпурном;
  • — оранжевый на белом;
  • — красный на зеленом.

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

Как сделать кнопку «получить код для баннера» на сайте

Небольшое дополнение к текущей статье… В комментариях мне задали один вопрос — «как сделать кнопку получить код?» Не мог не обратить внимание на столь актуальный вопрос. В самом деле при создании своего баннера довольно часто есть такая реализация, как «разместить наш баннер на сайте» и что самое главное, такой подход работает. Если посмотреть посещаемые сайты (хотя бы от 2 до 5 сотен посетителей в сутки, не говорю о более популярных) и проследить код баннера, то просто удивляет насколько много веб-мастеров делятся таким баннером на безвозмездной основе. И теперь сама реализация кнопки «получить код баннера»:

Это код кнопки:

<form><center>
<input value=»Получить код» onclick=»popup1()» type=»button»>
</center></form>

Это скрипт который вызывает кнопка:

<script language=»JavaScript»>
<!—
function popup1()
{
prompt(‘Сопроводительный текс в окошке с кодом’,’код вашего банера’);
return false;
}
//—>
</script>

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

Так же читайте:



Также вы можете просмотреть Все записи блога

Узнайте больше из Полезные сервисы



Узнавайте О Новых Статьях По Почте


8 комментариев Написать комментарий
  1. Ноя 15 2012

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

    [Ответить]

    Иванов Сергей Reply:

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

    [Ответить]

  2. Ноя 25 2012

    А как сделать, что бы при нажатии на кнопку сайта пользователь получал ее код для вставки?

    [Ответить]

    Иванов Сергей Reply:

    Вы имеете ввиду кнопку «получить код» для баннера?

    [Ответить]

  3. Ноя 27 2012

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

    [Ответить]

    Иванов Сергей Reply:

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

    [Ответить]

  4. Авг 22 2013

    Совершенно случайно открыла для себя новый хороший сайт. Буду изучать Ваши уроки.

    [Ответить]

    Иванов Сергей Reply:

    Буду рад писать для вас еще много новых и полезных статей

    [Ответить]

Поделитесь своими мыслями. Оставить комментарий.

(required)
(required)

Внимание: HTML не допускается. Ваш адрес электронной почты никогда не будет опубликован.