Как легко создать красивый баннер всего за пару минут
Создать свой баннер можно тремя способами:
- через программы (например фотошоп)
- через онлайн сервис (пример в статье)
- заказать у профессионалов (например фриланс)
Для создания своего баннера мы воспользуемся бесплатным методом и научимся делать баннеры всего за пару-тройку минут.
Как создать баннер для сайта онлайн
В видео мы рассмотрим, как можно создавать свой баннер бесплатно через онлайн сервис. В нем имеется возможность создания, как простого баннера (в виде картинки с заданными слоганами), так и возможность создать анимированный баннер.
Использование баннеров на практике:
Использование рекламных баннеров на сайте сегодня необходимость от которой никуда не деться. Размещение баннеров — это один из наиболее действенных рекламных видов в интернете (как заработать на размещение рекламных баннеров).
Стандартные размеры баннеров:
| 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>
Используйте данный урок для создания своего собственного баннера, подбирайте гармоничные цвета и реализуйте вариант кнопки «получить код».
Так же читайте:
Также вы можете просмотреть Все записи блога
Эх, скажу я вам, инструкции и уроки в формате видео существенно проигрывают текстовым. Потому что в видео надо ждать, пока там диктор всё начитает и покажет картинки, а в тексте я сама двигаюсь с удобной мне скоростью, могу одновременно видеть несколько абзацев и легко вернуться назад в нужное место.
[Ответить]
Иванов Сергей Reply:
ноября 16, 2012 at 12:18
Так то оно так, но и видео имеет свои плюсы. Все наглядно, все в режиме онлайн и если на словах что то можно не уловить, в силу того что автор какой то момент считает не существенным, то в видео эти нюансы видно.
[Ответить]
А как сделать, что бы при нажатии на кнопку сайта пользователь получал ее код для вставки?
[Ответить]
Иванов Сергей Reply:
ноября 27, 2012 at 15:28
Вы имеете ввиду кнопку «получить код» для баннера?
[Ответить]
Да. На некоторых сайтах есть такая фишка — нажимаешь на кнопку баннера и в маленьком окошке появляется код для ее вставки.
[Ответить]
Иванов Сергей Reply:
ноября 28, 2012 at 22:51
Пробовал в комментарии написать код, но он почему то вообще не поддается к выводу, добавлю в продолжение статьи. Так что перечитывай окончание поста)))
[Ответить]
Совершенно случайно открыла для себя новый хороший сайт. Буду изучать Ваши уроки.
[Ответить]
Иванов Сергей Reply:
сентября 5, 2013 at 19:49
Буду рад писать для вас еще много новых и полезных статей
[Ответить]