Рассылка блога

Форма подписки

Подпишись на обновления сайта. Получай новые статьи на почту:

Напишите мне

Your message was successfully sent.
Thank You!

Яндекс.Метрика
Яндекс цитирования
DevilArt.name - cервис анализа сайтов
Счетчик PR-CY.Rank
Счетчик PR-CY.Rank

Как сделать баннер и создать его код?

Как сделать баннер и создать его код?

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

          Что такое баннер и как разместить готовый баннер на сайте рассмотрено ранее в статье «Размещение баннера». Здесь же мы рассмотрим коротко со ссылками на другие ресурсы сам процесс изготовления, а также подробнее, вызывающее затруднения у начинающих, создание кода баннера для вставки на сайт.

          Процесс создания баннера начинается с рисования картинки. Если Вам нужен статический баннер, то достаточно одной картинки, если Вам нравится анимированный баннер, то рисуется столько картинок, сколько нужно для качественного процесса анимации. Если у Вас возникают трудности с работой в программе фотошоп, можно воспользоваться более простой программой онлайн сервиса «Photoeditoronline»  (рисунок 1, ). Является он сильно упрощенным вариантом фотошопа, но иногда для создания простой картинки вполне достаточен. Для входа достаточно нажать название сервиса «Photo editor online».

Как сделать баннер и создать его код?

Рисунок 1. Верхняя панель онлайн сервиса «Photo editor online»

В этом сервисе предоставлены возможности создания нового рисунка, загрузки изображения с компьютера, загрузки изображения по URL, открытия изображения из библиотеки и даже с Вашего мобильного телефона/планшета (рисунок 2).

Как сделать баннер и создать его код?

Рисунок 2. Окно функциональных кнопок онлайн сервиса «Photo editor online»

 

          В интернете полно ресурсов, рассматривающих создание и описание баннера в виде кода. Среди них можно привести, например, 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).

Как сделать баннер и создать его код?

Рисунок 3. Консоль сайта

 

В открывшемся окне (рисунок 4) нажимаем кнопку «Выберите файл». Выбираем файл с созданной и сохраненной у себя на компьюторе картинкой. В окошке (рисунок 5) появляется название выбранной картинки. Нажимаем активирующуюся при нажатии кнопку «Загрузить» и открывается окно «Библиотека файлов» (рисунок 6).

Как сделать баннер и создать его код?

Рисунок 4. Окно выбора нового медиафайла

Как сделать баннер и создать его код?

Рисунок 5. Окошко загрузки нового медиафайла

Как сделать баннер и создать его код?

Рисунок 6. Окно «Библиотека файлов»

 

Далее щелкаем по картинке нашего файла – открывается окно «Изменить медиафайл» (рисунок 7). В этом окне видим ссылку на  файл с нашей картинкой.

Как сделать баннер и создать его код?

Рисунок 7. Окно «Изменить медиафайл с требуемой ссылкой на нашу картинку

 

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

          Сразу скажу, что не советую новичкам создавать код самим, например, как показано на ресурсе Марии Риш. Дело это тонкое, требует внимательности и определенных навыков. Процентов 99, что у Вас не скоро получится. В конце концов, наша цель – зарабатывать деньги, а не изучать язык HTML. Поэтому, заходим на замечательный сервис http://webanet.ucoz.ru/index/0-14, нажимаем «Генератор HTMLкода баннеров и кнопок» и заполняем поля в окне (рисунок 8).

Как сделать баннер и создать его код?

Рисунок 8. Окно генератора HTML кода баннеров и кнопок сервиса WEB.A.NET

 

Ввод данных обычно затруднений не вызывает. Единственное, в поля «Ширина и высота баннера» значения нужно вводить в пикселях. После заполнения полей нажимаем кнопку «Сгенерировать код» и в окошке «Скопируйте готовый код из этой формы» получаем готовый код для вставки в наш сайт бар. Еще раз напомню, что процесс размещения баннера (вставки кода) подробно приведен в статье «Размещение баннера».  В этом окне видим ссылку на  файл с нашей картинкой. После вставки кода в нашем сайт баре видим, например, такую картинку (рисунок 9). При нажатии на картинку, открывается страница подписки на бесплатную книгу «Сайт сам создам». Попробуйте! В то же время можно не нажимая на картинку ввести свои имя и E-mail в форму внизу и получить бесплатную книгу, нажав на кнопку «Получить». Попробуйте!

 


Понравилась статья? Поделитесь с друзьями! Нажмите на кнопочки!
Приглашаю присоединиться:

Похожие статьи

10 комментариев к записи Как сделать баннер и создать его код?

Страница 1 из 11
Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Рад приветствовать!

Подписаться

Архивы

Хостинг для Wordpress сайтов