Изготовление баннера

Baner1Сегодня рассмотрим вопрос «Как сделать баннер?» Этот вопрос на протяжении последних двух месяцев я слышу постоянно, от не которых даже не по единственному разу. Была уже сохранена заготовка с ответом, которую я периодически кидала в Skype. Сегодня меня очередной раз задали этот вопрос, и я решила, что хватит откладывать написание этого поста.

Для примера изготовим банер для 9-тура блог-марафона, который видите слева.

Начнем с определения баннера. Дословно от английского слова «banner» – флаг, транспарант.  Т.е.  это графическое изображение, очень часто  рекламного характера. Например, вы участвуете в партнерской программе,  и вам надо чтобы человек прошел по вашей партнерской ссылке на нужный ресурс. Или как в случае блог-марафона, надо чтобы блогер прошел или на площадку командного сайта проекта, или на «Чемпион-блог» для регистрации в следующем туре.

Из чего состоит баннер?  Банер состоит из:

tekst-banera1. Собственно изображения: картинки, надписи;

2. Ссылки с переходом на нужный ресурс.

3. Размеры банера, т.к. изображение может оказаться гораздо больше размера сайтбара.

Итак, сначала нам надо подготовить изображение.

Для этого я буду пользоваться самыми простыми программами, которые есть и в ОC Windows XP,  и в  Windows7.

Это:

— Microsoft Office Power Point

— Paint

— Microsoft Office Picture Manager.

То есть, даже начинающий пользователь, с помощью этого алгоритма может сделать любой необходимый банер.

1. В Microsoft Office Power Point добавляем изображение. В моём случае, 2 изображения: картинка на детскую тематику и логотип марафонца. У «марафонца» прозрачный фон, поэтому он хорошо ложится на основную картинку.

— Добавляем надпись.

klava— Делаем скриншот экрана. Кнопка на клавиатуре «PrtScSysRq» (на разных клавиатурах может называться по разному).

2. Открываем программу Paint.

— Нажимаем вставить. Теперь у нас появился скриншот экрана. Сохраняем изображение. Нам остается обрезать его до нужного размера.

3. Открываем программу Microsoft Office Picture Manager.

Идём в «Изменить рисунки» и в панели с права ищем «Обрезка». Обрезаем под нужный размер. Сохраняем. Изображение готово.

4. Нам остается получить её URL. Можно на ресурсе «Радикал-Фото:: Обработка изображений». А можно разместить непосредственно на своём блоге. Находим «Медиафайлы» — «добавить новый» (это на WordPress). Берём адрес по которому находится наше изображение. Вот что у нас получается.

tekst-banera-2Теперь этот HTML-код размещаем на своём блоге. В BlogSpote — с помощью «гаджет», на  WordPress — виджет.

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

Подробную инструкцию можете посмотреть в видео касте.

В следующем посте расскажу как можно подготовить изображение, используя только одну программу — Paint.net.

Здоровья и процветания.
С уважением, Ольга Батырева.

Изготовление баннера: 10 комментариев

  1. Оля, спасибо большое за полезную информацию.
    Я, конечно, «изобрела» свой способ изготовления баннера — совершенно антинаучны!.. Пользуюсь им пока.

    А ту -всё по полочкам, а главное узнала о программе «Радикал-фото» — век живи и век учись!

    СПАСИБО!

    1. Наташ, ну я тоже антинаучно, методом «в тыка». Пользовалась тем что было под рукой. И в коде раньше не указывала ни высоту, ни ширину. Там одно подглядела, тут другое… Вот и получилось почти научно…

      «Радикал-фото» — это была палочка-выручалочка, когда жила только на BlogSpote. При установки плагинов к браузеру Mozilla Firefox, BlogSpotовские URL почему-то не воспринимались нормально. А с «Радикалом» эта задача сразу разрешилась…

  2. Вот вот, Лена! А то последнее время кидаю HTML-коды дрУгам, и чувствую, это меня не понимают. Наверное этот самый код кажется страшным. А всё на самом деле не просто, а ОЧЕНЬ просто.

  3. Оля, спасибо Вам за замечательный урок. Мне еще многому нужно учиться, но под Вашим руководством я надеюсь стать грамотным поль зователем.Кстати, подскажите пожалуйста, где можно научиться языку HTML?

    1. Нина, если честно, я его не учила… Просто посмотрела пару уроков, кое-что сама попробовала делать. В интернете множество ресурсов с информацией по HTML-коду.

      Я в своё время пользовалась вот этими ресурсами:
      1. http://zvirec.com
      2. http://htmlka.com
      3. http://www.on-line-teaching.com/html/
      4. http://webcity.narod.ru — лично мне этот нравится больше всего.

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

  4. Евгений, например при установке Wise Stamp «Умной подписи», УРЛы с блогспота не воспринимались ресурсом.

  5. Ольга, а можно подробнее про «… При установки плагинов к браузеру Mozilla Firefox, BlogSpotовские URL почему-то не воспринимались нормально. …»? В чём именно была трудность?

  6. Оля, чтобы обрезать картинку, созданную в Paint, можно тут же вверху нажать кнопку Обрезать. Нажимаешь, выделяешь курсором картинку и там же жмешь обрезать. никуда переходить не надо.

    1. Да, Оля, но когда картинка во весь экран, то не всегда получается выделить
      . И если размер надо изменить для веб-страницы, или подогнать под конкретные параметры длинны и высоты, то всё-таки лучше воспользоваться Microsoft Office Picture Manager.

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

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