заработок в интернете

Создание баннера

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

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

Итак. Открываем фотошоп, и создаём новый документ.

создание документа

Задаём необходимые размеры будущего баннера.

размеры

Рисуем или вставляем требующуюся картинку, в данном случае скриншот шапки этого сайта. И сохраняем для веб устройств.

сохранение изображения

Сохраняя для веб устройств, выбираем расширение:

JPEG – обычный рисунок, занимает самый маленький объём. Его и будем создавать.

стандартный jpg рисунок

PNG – рисунок на прозрачном фоне.

прозрачный фон

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

динамическое изображение

Получившуюся картинку, названную sb1.jpg, загружаем на любой хостинг. Для примера воспользуемся бесплатным фотохостингом radikal.ru.

загрузка изображения на хостинг

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

ссылка на картинку

Ссылку необходимо сохранить.

Далее переходим к коду баннера. Стандартный код выглядит таким образом:

изначальный код

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

конструкция баннера

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

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

Альтернативный текст – текст, который видно в момент недоступности картинки.

Заменяем адрес картинки на полученный от хостинга. Адресом ссылки указываем главную страницу этого сайта. Ширину и высоту убираем, т.к. создавали в размер. Полученный код выглядит так:

код созданного баннера

А вот и созданный баннер, при нажатии на него откроется главная страница в новой вкладке.

созданный баннер

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

новый баннер

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

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