Баннер своими руками
Опубликовал Евгений от апреля 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:
«Интернет для всех: пенсионеры в глобальной сети – объединяйтесь!» и
«За здоровый Интернет».
Популярность: 23%
На эту тему я писал раньше:
Ваш E-Mail в безопасности
Неужели все такие грамотные, что никто не оставил ни одного комментария? А мне лично статья очень понравилась. Только у меня, к примеру, нет фотошопа. А в редакторе рисунков нет пикселей. Есть лишь размеры 100%, Крупный, Другой. Потому так и не понял, как можно из другого редактора делать баннеры и их закачивать.
[Ответить]
admin Reply:
мая 1, 2012 at 6:38
Спасибо за комментарий Александр. Кроме фотошопа существует масса бесплатных графических редакторов, их можно найти в Интернет, например здесь. Скачайте, освойте и пользуйтесь. Удачи.
[Ответить]
Просто и понятно, спасибо)
[Ответить]
Евгений, статья действительно очень интересная и полезная. Как говорится, все гениальное просто. Зачем ломать голову Как сделать? или тратить уйму денег на фрилансеров. Когда можно просто взять и нарисовать банер своими руками.
[Ответить]
Приветствую Вас" Судя по статье , то все и не так уж сложно. Теперь остается лишь попробовать на деле .Если в Paint (стандартная программа) отображаются пиксели (а это надо проверить ) , то буду делать в ней.
У Вас познавательный и интересный блог.Хочу вручить Вам Кубок Признания.
Заходите получить www.tapac.com.ua/zikavo/priz.html .
[Ответить]
Спасибо за статью,понравилась.Попробую создать собственный баннер в программе Paint,Фотошопа пока нет.Отдельные уроки от Зинаиды получаю,но они разрознены,нужно собирать в одно место, а времени никак не выберу.Еще раз спасибо.
[Ответить]
admin Reply:
июля 11, 2012 at 5:57
Зинаида, в Интернет полно бесплатных онлайн вариантов Фотошопа, например pixlr.com/editor/. Его функций вполне достаточно.
[Ответить]
Огромное спасибо. Сегодня же и попробую создать баннер. Так просто описано, вдруг сразу и получится:)
[Ответить]
Спасибо, доступное изложение, поделюсь с коллегами-учителями и сама воспользуюсь при случае.
[Ответить]
Евгений!
Спасибо за статью, но есть вопрос.
«и забрасываем ее в корневой каталог блога в папку images». А если этого не делать, а просто фрагмент html кода вставить в сайт бар или шапку блога?
[Ответить]
admin Reply:
июля 17, 2013 at 16:18
Александр Иванович, картинка обязательно должна быть помещена на сайт ведь в коде баннера вы ссылаетесь на ее адрес: networkjob.ru/images/banner.jpg, а сам код размещайте где Вам угодно.
[Ответить]