В процессе раскрутки сайта, блога, наступает то время, когда изготовление и установка своего баннера становится острейшей необходимостью. Например, создали мы свой первыйинформационный продукт, сделали страницу захвата с формой подписки. На эту страницу захвата нужно направлять посетителей. Используем для этого социальные сети, рассылки и т.д. И здесь совсем не лишним будет наличие на видном месте, как правило, в сайт баре и не только, привлекающего внимание баннера, при нажатии на который посетитель попадает на ту же страницу захвата. Здесь и возникает вопрос, как сделать баннер и создать его код.
Что такое баннер и как разместить готовый баннер на сайте рассмотрено ранее в статье «Размещение баннера». Здесь же мы рассмотрим коротко со ссылками на другие ресурсы сам процесс изготовления, а также подробнее, вызывающее затруднения у начинающих, создание кода баннера для вставки на сайт.
Процесс создания баннера начинается с рисования картинки. Если Вам нуженстатический баннер, то достаточно одной картинки, если Вам нравится анимированный баннер, то рисуется столько картинок, сколько нужно для качественного процесса анимации. Если у Вас возникают трудности с работой в программе фотошоп, можно воспользоваться более простой программой онлайн сервиса «Photoeditoronline» (рисунок 1, ). Является он сильно упрощенным вариантом фотошопа, но иногда для создания простой картинки вполне достаточен. Для входа достаточно нажать название сервиса«Photo editor online».
В этом сервисе предоставлены возможности создания нового рисунка, загрузки изображения с компьютера, загрузки изображения по URL, открытия изображения из библиотеки и даже с Вашего мобильного телефона/планшета (рисунок 2).
В интернете полно ресурсов, рассматривающих создание и описание баннера в виде кода. Среди них можно привести, например, bloguspeh.ru, Banner Fans, MyBannerMaker, dabuttonfactory.com, all-gif.narod.ru/baner.htm, danilidi.ru, odnaknopka.ru. Создание своей картинки с анимацией (gif файл) довольно простым и понятным методом в редактореFastStone подробно представлено в материале Эдуарда Питерцева. Там же он рассказывает и о самом редакторе FastStone. Простой способ создания баннера представляет в своих видеоуроках Сергей Медведев. Процесс написания кода подробно рассматривается на ресурсе Марии Риш.
Можно, конечно, покопавшись разобраться и воспользоваться любым из приведенных ресурсов, но я предложил бы для новичков простой, опробованный в свое время мной самим путь.
Создание картинки
Создаем картинку с использованием онлайн сервис «Photo editor online». Разобраться там легко прямо в самом сервисе. Если есть хотя бы первоначальные общие навыки по работе в программе фотошоп, конечно лучше использовать ее. Там намного больше возможностей для выражения Вашей индивидуальной задумки.
Получение URL места, где лежит картинка
Созданную и сохраненную у себя на компьюторе картинку, загружаем к себе на сайт. Для этого заходим в админ панель сайта на движке WordPress, в консоли находим«Медиафайлы» à «Добавить новый» и нажимаем «Добавить новый» (рисунок 3).
В открывшемся окне (рисунок 4) нажимаем кнопку «Выберите файл». Выбираем файл с созданной и сохраненной у себя на компьюторе картинкой. В окошке (рисунок 5) появляется название выбранной картинки. Нажимаем активирующуюся при нажатии кнопку «Загрузить» и открывается окно «Библиотека файлов» (рисунок 6).
Далее щелкаем по картинке нашего файла – открывается окно «Изменить медиафайл»(рисунок 7). В этом окне видим ссылку на файл с нашей картинкой.
Создание кода баннера
Сразу скажу, что не советую новичкам создавать код самим, например, как показано на ресурсе Марии Риш. Дело это тонкое, требует внимательности и определенных навыков. Процентов 99, что у Вас не скоро получится. В конце концов, наша цель – зарабатывать деньги, а не изучать язык HTML. Поэтому, заходим на замечательный сервисhttp://webanet.ucoz.ru/index/0-14, нажимаем «Генератор HTMLкода баннеров и кнопок» и заполняем поля в окне (рисунок 8).
Ввод данных обычно затруднений не вызывает. Единственное, в поля «Ширина и высота баннера» значения нужно вводить в пикселях. После заполнения полей нажимаем кнопку«Сгенерировать код» и в окошке «Скопируйте готовый код из этой формы» получаем готовый код для вставки в наш сайт бар. Еще раз напомню, что процесс размещения баннера (вставки кода) подробно приведен в статье «Размещение баннера». В этом окне видим ссылку на файл с нашей картинкой. После вставки кода в нашем сайт баре видим, например, такую картинку (рисунок 9). При нажатии на картинку, открывается страница подписки на бесплатную книгу «Сайт сам создам». Попробуйте! В то же время можно не нажимая на картинку ввести свои имя и E-mail в форму внизу и получить бесплатную книгу, нажав на кнопку «Получить». Попробуйте!