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

Создание, оптимизация, продвижение сайта и заработок на его основе

Как самостоятельно слепить незамысловатый баннер на сайт?

Автор: Сергей Егерев Опубликовано: 10 - Май - 2012

создание баннераПриветствую вас уважаемый посетитель!

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

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

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

Создание баннера с использованием специальной программы

Баннеры, размещаемые на сайтах, обычно бывают стандартных размеров 468х60, 125х125, 120х600 и т.д.

Мы сделаем с вами анимированный баннер, а для этого нам нужно подготовить картинки .JPG в каком-либо графическом редакторе, двух картинок достаточно.

Давайте сделаем баннер размером 468х60 пикселей. Вы можете, конечно, приготовить уже готовые фоновые картинки данных размеров и, добавив по своему желанию надписи, использовать их. Я буду делать баннер с чистого листа.

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

Далее открываем эту картинку в Paint.

создать баннер самому

Теперь нам необходимо вырезать эту область, сделать чистый прямоугольник размерами 468х60, если не знаете, как это делается, то почитайте статью (Как сделать снимок с экрана монитора ).

Получаем вот такую чистую картинку

Сохраняем ее в формате JPG.

Вот теперь работаем с этим файлом изображения, чтобы сделать картинку баннера.

Можно делать картинку в Painte, но я предпочитаю использовать либо Snagit, либо FastStone Image Viewer. (О работе в данных редакторах почитайте в статье: «Редактирование картинок»).

У меня получились вот такие два рисунка:

самостоятельно создать баннер

создаем баннер

Теперь нам нужно скачать себе на компьютер специальную программу для создания баннера, называемую gif-аниматором. Программа называется GIF Movie Gear, скачать из Интернета не составит труда, правда она платная и срок использования в бесплатном режиме 30 дней. Я думаю, это не проблема для большинства пользователей, тем более за 30 дней можно столько картинок нащелкать, на всю оставшуюся жизнь хватит.

Скачиваете, запускаете, выходит вот такое окно:

программа создания баннера

  1. Нажимаете открыть файл и с компьютера загружаете первый рисунок.
  2. Затем нажимаете на кнопку под цифрой 2 и загружаете второе изображение.

В красном квадратике стрелочка для просмотра вашего анимированного GIF баннера.

Во время предпросмотра поставьте время показа каждого изображения (циферблат часов).

После выставления временного интервала сохраните полученный баннер File – Save GIF Animation As далее название файла. Если две картинки были в формате JPG, то полученное изображение будет уже в формате GIF.

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

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

 <a href="АДРЕС СТРАНИЦЫ" target="_blank"><img src="АДРЕС КАРТИНКИ" alt="" border="0" /></a>

Где адрес страницы – URL сайта либо веб-страницы, куда должен перенаправлять ваш баннер;

Адрес картинки – адрес вашего баннера на хостинге.

target= «_blank» – открывает ссылку в новом окне.

alt= » » — В кавычках вы прописываете тег alt, если вы его прописывали в названии картинки при загрузке на хостинг.

border= «0″ — это ширина рамки баннера, если ее нет, то ставим 0.

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

Мы использовали для создания баннера только две картинки, их может быть, конечно же,  больше, все зависит от ваших желаний и возможностей, принцип тот же, просто больше рисунков нужно будет загружать в программу GIF Movie Gear, а это ведет к увеличению объема файла.

Таким образом, мы сделали баннер, используя специальную программу gif-аниматора.

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


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

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

Успехов вам!

Посмотрите видео по созданию баннера в онлайн-сервисе.

  1. Игорь:

    А я выматолся с фотошопом , ну ни как банер не получался, с GIF Movie за 10 минут то что хотел сделал :)

    Опубликовано: 1 Ноябрь 2012 в 00:37

  2. Сергей:

    Я приятно удивлён. Это так просто! Буду к вам захаживать. Я начинающий сеошник, сохрану ваш сайт в закладках.

    Опубликовано: 20 Май 2014 в 12:05

  3. Сергей Егерев:

    Гостям всегда рады, заходите :)

    Опубликовано: 21 Май 2014 в 12:32

Оставить комментарий

Switch to Dark fonts Switch to Light fonts