Полезные советы. Баннеры для сайта.

Привет друзья!

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

Баннеры – это привлекающие внимание посетителей рекламные картинки, кликая на которые, посетитель попадает на вашу подписную или продающую страницу. Баннеры бывают статические, анимационные и флеш-баннеры.

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

Для изготовления статичного баннера главное правильно подобрать или изготовить изображение, отражающее суть вашего предложения и способное привлечь внимание посетителя.

Если вы владеете основами работы в программе Фотошоп, то для вас это не составит труда. Если нет, тоже не страшно. Можно найти заготовки для баннеров в интернете. Забейте в поисковую строку фразу «Заготовки для баннеров» и посмотрите, что вам предложат.

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

Для создания рекламных баннеров на основе заготовок, если вы не владеете навыками работы в Фотошопе, можно сделать баннер в простом графическом редакторе, например Paint. Очень удобно использовать программу FastStone Image Viewer. Как работать с этой программой, и где ее взять, вы можете узнать здесь.

Полезные советы. Баннеры для сайта.

Давайте попробуем сделать баннер вместе.

Скачиваем заготовку с сайта Веб-мастер, и открываем ее с помощью программы FastStone Image Viewer.

Нажимаем кнопку «Правка», выбираем пункт «Рисование» > «водяной знак», находим у себя изображение вашего продукта и накладываем его на заготовку.

Сохраняем картинку и далее делаем надпись с предложением. Для этого в меню «Рисование» выбираем пункт «Вставить текст» и делаем надпись без фона. У нас получился вот такой статичный баннер.

Не забудьте сохранить рисунок после всех изменений в удобном месте.

Если вы хотите затем разместить его на своем сайте в одну, или несколько статьей, вставьте его в нужное место, как обычный рисунок, через админку своего сайта. Только не забудьте в поле «ссылка на изображение» указать ссылку на подписную, или продающую страницу, куда должен перейти посетитель, и поставить галочку в чек-боксе «Открывать в новом окне».

В баннер можно вставить свои контактные данные (телефон, адрес), распечатать его на цветном принтере и расклеить на досках объявлений. Здесь он будет рекламировать ваш продукт в режиме офлайн.

Если же вам нужно вставить этот баннер в шапку сайта, подвал, или сайт бар, то  лучше разместить его на хостинге изображений, там получить ссылку  на изображение и вставить ее в код баннера, который затем встраивается в код страницы сайта в редакторе HTML, либо как виджет, через кнопку «Текст». Но об этом поговорим чуть позже.

Ну а для тех, кто не хочет заморачиваться с редакторами изображений, существуют конструкторы баннеров, например баннер-студия artbanner.com (нажмите на название и вы на нее попадете).

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

Давайте попробуем сделать сами анимационный баннер.

Из той же заготовки, из которой мы делали статичный баннер, изготовим в программе FastStone Image Viewer, либо в другом графическом редакторе ряд последовательных слайдов. Например, вот таких.

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

Затем подготовленные слайды загружаем в программу Easi GIF Animator, и создаем из этой серии анимационную картинку в формате (gif). Как это делается, посмотрите здесь.

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

Кликните по нему и посмотрите, что получится.

Подготовленный анимационный баннер размещаете на сайте так же, как и статичный.

Выше я уже упоминал о хостинге изображений. Это сервис для хранения файлов формата jpg, jpeg, png, bmp, psd и gif, а также для обмена такими файлами. При размещении на таком хостинге файлов с указанными форматам, вы получаете ссылки на эти изображения в различных видах: прямую ссылку на изображение, ссылку на страницу с изображением, ссылку на изображение для сайтов, для форумов.

Существует несколько таких бесплатных хостингов. Для примера можете познакомиться с хостингом imageup.ru – с возможностью загрузки файлов до 3Мб; pic4net.com – загрузка файлов до 5 Мб; picshare.ru – с загрузкой файлов до 30 Мб. У каждого из хостингов свои правила размещения и хранения изображений – у каждого свой набор форматов файлов, одни требуют регистрации, другие нет… Зайдите, посмотрите и выберите наиболее подходящий для себя.

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

<p align="center">

<a rel="nofollow" target="_blank" href="хххх ххххх хххх">

<img border="0" src="уууу ууууууу уууу" width="ААА" height="ВВВ"></a></p>

Где хххх ххххх – ссылка на страницу, куда должен вести баннер (подписная или продажная страница предлагаемого продукта);

уууу ууууу –  прямая ссылка на изображение (берется с хостинга размещения изображения);

ААА – ширина изображения в пикселях:

ВВВ – высота изображения в пикселях.

Подставляете в формулу указанные переменные и получается HTML код для вставки баннера на сайт. Затем полученный код копируется и вставляется через редактор или кнопку «текст» в виджетах в нужное место на сайте.

Вот так все просто и доступно даже для начинающих!

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

Если что-то не получается, напишите в комментариях к статье или на странице обратной связи сайта – я отвечу.

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

До встречи!

На эту тему вы можете почитать:

Хотите со мной подружиться? Нажмите кнопки своих социальных сетей.