Баннер своими руками

Опубликовал Евгений от апреля 29, 2012





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

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

Для начала создаю картинку размерами 1200×180 пикселей (в два раза больше требуемой).

Затем вставляю в нее изображение моей книги размером 180×180 пикселей.

Следом вставляю фото моего института, годам обучения в котором собственно и посвящена книга с высоты птичьего полета размером 1020×180 пикселей.

В полученную картинку добавляем необходимую текстовую информацию:

Все баннер готов, теперь уменьшаем изображение до нужных размеров 600×90 пикселей, запоминаем картинку и забрасываем ее в корневой каталог блога в папку images.

Далее строим фрагмент html кода следующего вида:

<a href=«http://ваш сайт»><img src=«ваша картинка .jpg» alt=«надпись при наведении» WIDTH=«ширина баннера» HEIGHT=«высота баннера»></a>

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

В моем случае это будет выглядеть следующим образом:

<a href="http://networkjob.ru/downloads/books/kniga.zip"><img src="http://networkjob.ru/images/banner.jpg" alt="моя книга" WIDTH="600" HEIGHT="90"></a>

Далее вставляете этот код туда, где бы вы хотели видеть свой баннер, вот и все.

моя книга

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

Всех благ Вам и удачи, Евгений Беляков.

Не забывайте добавлять к своим комментариям ссылки на новые статьи Вашего блога.

Подписывайтесь на мою рассылку – Реальные деньги в виртуальном мире.

Вступайте в мои группы на SubScribe.ru:

«Интернет для всех: пенсионеры в глобальной сети – объединяйтесь!» и

«За здоровый Интернет».

Популярность: 21%

Если Вам понравилась эта статья, подпишитесь на новые через RSS. Моя RSS!

На эту тему я писал раньше:


Об авторе

Евгений




Комментарии

11 комментариев to “Баннер своими руками”


  1. Неужели все такие грамотные, что никто не оставил ни одного комментария? А мне лично статья очень понравилась. Только у меня, к примеру, нет фотошопа. А в редакторе рисунков нет пикселей. Есть лишь размеры 100%, Крупный, Другой. Потому так и не понял, как можно из другого редактора делать баннеры и их закачивать.

    [Ответить]

    admin Reply:

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

    [Ответить]


  2. Просто и понятно, спасибо)

    [Ответить]


  3. Евгений, статья действительно очень интересная и полезная. Как говорится, все гениальное просто. Зачем ломать голову Как сделать? или тратить уйму денег на фрилансеров. Когда можно просто взять и нарисовать банер своими руками.

    [Ответить]


  4. Приветствую Вас" Судя по статье , то все и не так уж сложно. Теперь остается лишь попробовать на деле .Если в Paint (стандартная программа) отображаются пиксели (а это надо проверить ) , то буду делать в ней.

    У Вас познавательный и интересный блог.Хочу вручить Вам Кубок Признания.

    Заходите получить www.tapac.com.ua/zikavo/priz.html .

    [Ответить]


  5. Спасибо за статью,понравилась.Попробую создать собственный баннер в программе Paint,Фотошопа пока нет.Отдельные уроки от Зинаиды получаю,но они разрознены,нужно собирать в одно место, а времени никак не выберу.Еще раз спасибо.

    [Ответить]

    admin Reply:

    Зинаида, в Интернет полно бесплатных онлайн вариантов Фотошопа, например pixlr.com/editor/. Его функций вполне достаточно.

    [Ответить]


  6. Огромное спасибо. Сегодня же и попробую создать баннер. Так просто описано, вдруг сразу и получится:)

    [Ответить]


  7. Спасибо, доступное изложение, поделюсь с коллегами-учителями и сама воспользуюсь при случае.

    [Ответить]


  8. Евгений!

    Спасибо за статью, но есть вопрос.

    «и забрасываем ее в корневой каталог блога в папку images». А если этого не делать, а просто фрагмент html кода вставить в сайт бар или шапку блога?

    [Ответить]

    admin Reply:

    Александр Иванович, картинка обязательно должна быть помещена на сайт ведь в коде баннера вы ссылаетесь на ее адрес: networkjob.ru/images/banner.jpg, а сам код размещайте где Вам угодно.

    [Ответить]

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

«Реальные деньги в виртуальном мире»
Подпишитесь на рассылку
Введите Ваше Имя и Ваш E-mail:

Ваш E-Mail в безопасности